偶然看到微信公众号的一篇文章，炫技，从 12.67s 到 1.06s 的网站性能优化实战，自己在这个文章里看到了许多陌生的词汇，也get到许多新的工具（利器），虽然在看的当下没办法一一去体验，但是打算简略记录下来，以后不断的去尝试，用自己做的一些公司内部项目，进行相关的评价与改进。
日常积累
- 网站性能（前端er）性能指标：白屏时间、首屏时间、整页时间、DNS时间、CPU占用率；
- 用户等待一个页面的时间（超过多少秒会关闭）？
- 资源打包压缩：js压缩、HTML压缩、提取css并压缩
- 重排（reflow），渲染层内的元素布局发生修改，都会导致页面重新排列，比如窗口的尺寸发生变化、删除或添加DOM元素，修改了影响元素盒子大小的CSS属性（诸如：width、height、padding）。重绘（repaint）：绘制，即渲染上色，所有对元素的视觉表现属性的修改，都会引发重绘。重排是由CPU处理的，而重绘是由GPU处理的，CPU的处理效率远不及GPU，并且重排一定会引发重绘，而重绘不一定会引发重排。所以在性能优化工作中，我们更应当着重减少重排的发生。
- 图片在渲染前指定大小
- 对页面中可能发生大量重排重绘的元素单独触发渲染层，使用GPU分担CPU压力（要慎重，渲染层过多对GPU也是不必要的压力）
- 将没用的元素设为不可见：visibility: hidden，以减小重绘的压力
- 压缩DOM的深度，一个渲染层内不要有过深的子元素，少用DOM完成页面样式，多使用伪元素或者box-shadow取代。
陌生词汇
- navigation timing监测指标图
- 布局是由CPU完成的，绘制是有GPU完成的
- 把容易触发重排重绘的元素单独触发渲染层，让它与那些“静态”元素隔离，让GPU分担更多的渲染工作（硬件加速）
- 重排与重绘
- CSS属性读写分离
- Dom元素离线更新
新利器
- 网络传输性能检测工具——Page Speed（Chrome插件，比Network更详细）
- 详细列出了哪些CSS属性在不同的渲染引擎中是否会触发重排或重绘——csstriggers.com
文章架构-前端性能
网友评论