Review

1. 2021/04/26
2. 2024-10-05 11:03

[!Summary]

一、Introduction #

通用方案 #

1. 骨架屏预渲染
2. 懒加载（Lazy Loading）：视窗外的或者长列表中不可见的资源（图片、视频），可以在滚动页面展示时在加载
3. 按需加载（On-Demand Loading）：可以根据路由、用户交互等事件加载，仅加载需要的资源
4. 异步加载（Asynchronous Loading）：不阻塞页面渲染的情况下，异步加载资源。如 async, defer ，动态创建的 script 标签、XHR/Fetch请求
5. 资源预加载：prefetch, preload, prerender
6. 减少/合并DOM操作：document.createDocumentFragment()
7. 优先使用可以触发 GPU 加速能力的特性: transform, will-change, filter , position:fixed
8. 长列表优化：使用虚拟列表技术
9. 将 CSS 放在 HTML 文件头部，将 JavaScript 放在 HTML 文件底部
10. 使用字体图标 iconfont 代替图片图标
11. 避免/减少 Reflow, Repaint
12. 元素适当定义宽高，或者最小宽高
13. 在大量修改元素样式时，可以先用display： none将其隐藏，修改完再设置为display： block，这样只会造成两次回流；
14. 避免使用 iframe ，性能差，SEO不好

Mobile App #

1. 使用离屏渲染：如Canvas离屏渲染

Reference #

CSS GPU Animation: Doing It Right