如何进行首屏渲染优化？

网络传输性能优化

浏览器缓存

浏览器向服务器发起请求之前，会先查询本地是否有相同的文件，如果有，就会直接拉取本地缓存

资源打包压缩

浏览器缓存的工作，只有用户在第二次访问我们的页面才能起到效果，如果要在用户首次打开页面就能实现优良的性能，必须对资源进行优化

减少请求数、减小请求资源体积、提升网络传输速率

不要对图片进行 Gzip 压缩，对图片进行压缩不但会占用后台大量资源，压缩效果其实并不可观，可以说是“弊大于利”

图片资源优化

• 不要在 HTML 里缩放图像，认为这样能让用户觉得图片更加清晰，其实不然。
• 使用雪碧图
• 使用字体图标

使用 CDN

用户和服务器之间的距离越远，经过的路由器越多，延迟也就越高。

页面渲染性能优化

DOM 渲染层与 GPU 硬件加速

• 浏览器会先获取 DOM 树并依据样式将其分割成多个独立的渲染层
• CPU 将每个层绘制进绘图中
• 将位图作为纹理上传至 GPU 绘制
• GPU 将所有的渲染层缓存，并复合多个渲染层最终形成我们的图像
• 布局是由 CPU 处理的，而绘制则是由 GPU 完成的

如果把那些一直发生大量重排重绘的元素提取出来，单独出发一个渲染层，那样这个元素不就不会连累其他元素一块重绘了

video 元素、WebGL、Canvas、CSS3 3D、CSS 滤镜、z-index 大于某个相邻节点的元素都会触发新的 Layer。

transform: translateZ(0);
backfac—visibility: hidden;

我们把容易触发重排重绘的元素单独触发渲染层，让它与那些“静态”元素隔离，让 GPU 分担更多的渲染工作，我们通常把这样的措施称为硬件加速，或者是 GPU 加速

重排重绘

重排：渲染层内的元素布局发生修改，都会导致页面重新排列，比如窗口的尺寸发生变化、删除或添加 DOM 元素，修改了影响元素盒子大小的 CSS 属性

重绘：绘制，即渲染上色，所有对元素的视觉表现属性的修改，都会引发重绘。

不论是重排还是重绘，都会阻塞浏览器。要提高网页性能，就要降低重排和重绘的频率和成本。

优化策略

1. css 属性读写分离，先读后写，避免出现两者交叉使用的情况。
2. 通过切换 class 或者 style.csstext 属性去批量操作元素样式
3. dom 元素离线更新，等元素组装完成后再一次插入页面
4. 将没用的元素设为不可见，可以减小重绘的压力，必要的时候再将元素显示
5. 压缩 DOM 的深度，少用 DOM 完成页面样式，多使用伪元素或者 box-shadow 取代。
6. 图片在渲染前指定大小

扩展阅读

首屏时间从 12.67s 到 1.06s，我是如何做到的？

希望对读完本文的你有帮助、有启发，如果有不足之处，欢迎批评指正交流！

辛苦整理良久，还望手动点赞鼓励~

'摘抄'不是单纯的“粘贴->复制”，而是眼到，手到，心到的一字一句敲打下来。

声明:所有转载的文章、图片仅用于作者本人收藏学习目的，被要求或认为适当时，将标注署名与来源。若不愿某一作品被转用，请及时通知本站，本站将予以及时删除。