面试官：请你谈一下如何进行首屏渲染优化？
Posted 前端功成屋
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了面试官：请你谈一下如何进行首屏渲染优化？相关的知识，希望对你有一定的参考价值。
如何进行首屏渲染优化？
网络传输性能优化
浏览器缓存
浏览器向服务器发起请求之前，会先查询本地是否有相同的文件，如果有，就会直接拉取本地缓存
资源打包压缩
浏览器缓存的工作，只有用户在第二次访问我们的页面才能起到效果，如果要在用户首次打开页面就能实现优良的性能，必须对资源进行优化
减少请求数、减小请求资源体积、提升网络传输速率
不要对图片进行 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 属性
重绘：绘制，即渲染上色，所有对元素的视觉表现属性的修改，都会引发重绘。
不论是重排还是重绘，都会阻塞浏览器。要提高网页性能，就要降低重排和重绘的频率和成本。
优化策略
-
css 属性读写分离，先读后写，避免出现两者交叉使用的情况。 -
通过切换 class 或者 style.csstext 属性去批量操作元素样式 -
dom 元素离线更新，等元素组装完成后再一次插入页面 -
将没用的元素设为不可见，可以减小重绘的压力，必要的时候再将元素显示 -
压缩 DOM 的深度，少用 DOM 完成页面样式，多使用伪元素或者 box-shadow 取代。 -
图片在渲染前指定大小
扩展阅读
首屏时间从 12.67s 到 1.06s，我是如何做到的？
希望对读完本文的你有帮助、有启发，如果有不足之处，欢迎批评指正交流！
辛苦整理良久，还望手动点赞鼓励~
'摘抄'不是单纯的“粘贴->复制”，而是眼到，手到，心到的一字一句敲打下来。
声明:所有转载的文章、图片仅用于作者本人收藏学习目的，被要求或认为适当时，将标注署名与来源。若不愿某一作品被转用，请及时通知本站，本站将予以及时删除。
以上是关于面试官：请你谈一下如何进行首屏渲染优化？的主要内容，如果未能解决你的问题，请参考以下文章