2021-01-11 前端性能

1、重绘(Repaint)
重绘（repaint或redraw）：当盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来之后，浏览器便把这些原色都按照各自的特性绘制一遍，将内容呈现在页面上。重绘是指一个元素外观的改变所触发的浏览器行为，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。
重绘不会带来重新布局，所以并不一定伴随重排。
"重绘"不一定需要"重排"，比如改变某个网页元素的颜色，就只会触发"重绘"，不会触发"重排"，因为布局没有改变。
但是，"重排"必然导致"重绘"，比如改变一个网页元素的位置，就会同时触发"重排"和"重绘"，因为布局改变了。
2、重排(Reflow)
重排（重构/回流/reflow）：当渲染树中的一部分(或全部)因为元素的规模尺寸，布局，隐藏等改变而需要重新构建, 这就称为回流(reflow)。每个页面至少需要一次回流，就是在页面第一次加载的时候。
渲染对象在创建完成并添加到渲染树时，并不包含位置和大小信息。计算这些值的过程就称为布局或重排。
Reflow 的成本比 Repaint 的成本高得多的多。DOM Tree 里的每个结点都会有 reflow 方法，
一个结点的 reflow 很有可能导致子结点，甚至父点以及同级结点的 reflow。在一些高性能的电脑上也许还没什么，
但是如果 reflow 发生在手机上，那么这个过程是消耗内存性能和耗电的。
重排必定会引发重绘，但重绘不一定会引发重排。
触发重排的条件：
任何页面布局和几何属性的改变都会触发重排，比如：
1、页面渲染初始化；(无法避免)
2、添加或删除可见的DOM元素；
3、元素位置的改变，或者使用动画；
4、元素尺寸的改变——大小，外边距，边框；
5、浏览器窗口尺寸的变化（resize事件发生时）；
6、填充内容的改变，比如文本的改变或图片大小改变而引起的计算值宽度和高度的改变；
7、读取某些元素属性：（offsetLeft/Top/Height/Width,　clientTop/Left/Width/Height,　scrollTop/Left/Width/Height, width/height,　getComputedStyle(),　currentStyle(IE)　)
重绘发生的情况：
重绘发生在元素的可见的外观被改变，但并没有影响到布局的时候。比如，仅修改DOM元素的字体颜色（只有Repaint，因为不需要调整布局）
1、改变字体
2、增加或者移出样式表
3、内容变化，比如用户在input框中输入文字
4、激活css伪类，比如:hover
5、脚本操作DOM
6、计算offsetWidth和offsetHeight属性
7、设置style属性的值

image.png

image.png

image.png

1、前端性能指标

• FP 首次绘制
• FCP 首次内容绘制
• FMP 首次有效绘制
• TTI 可交互时间

2、前端页面渲染流程

• HTML页面请求
  • HTML文档下载
    • html -> 文档自身
    • javascript -> js
    • link -> css
    • video -> .ogg .mp4
    • audio -> .mp3
    • img -> 图片src
  • HTML文档解析（按顺序依次执行）
    • dom树生成（html文档中所有标签元素，不管该标签在页面中是否实际可见）
    • render树生成（结合css样式、js代码绘制成的页面实际展示的dom元素）
    • 逐级解析dom树
      • p、label、ol、a等等一般不引用外部资源的标签
      • link、javascript、img可引用外部资源的标签
        • link -> css、尽量减少页面的reflow （reflow-回流：当页面结构发生改变时，例如当元素位置发生改变，比如某个元素的margin、padding的改变导致其他元素位置的变化，或者说render树被重新组装；repaint-重绘）
        • javascript -> js，js绘制dom节点会阻塞其他标签接解析、甚至下载
        • img -> 图片src，图片加载可以先使用分辨率较低的图片
• 浏览器的js引擎

3、技术优化出发点

• 复用（维护性、开发成本）
  • 前端复用
  • 后端复用
• 加载方式（提升用户体验）
  • 同步加载
    • 都加载完才能展示给用户想看的
    • 可能很少的tcp连接就能完成页面的加载
  • 分级加载
    • 同步加载和异步加载相结合
    • 先给用户加载重要信息，比如logo/核心功能，后面加载不重要的
  • 按需加载
    • 用户不触发该功能我们就不加载
    • 用户不触发该功能，但是宽带闲置，或者页面的主要元素都加载完了，就可以加载