奇幻的梦之旅

http://llmysnow.top/

0%

优化2.渲染优化

发表于 分类于
本文字数： 5k 阅读时长 ≈ 5 分钟
现代浏览器网页渲染原理——大厂面试考点；深入了解关键渲染路径，减少回流与重绘；防止布局抖动(Layout Thrashing)；GPU加速避免重绘，加速页面呈现

关键渲染路径

前端性能优化之关键路径渲染优化

浏览器怎么把页面渲染出来，渲染过程分很多环节，就是 关键渲染路径（CRP）

  • CRP：Critical Rendering Path

浏览器渲染过程：

JavaScript（触发视觉变化） -> Style（浏览器对样式重新进行计算） -> Layout（布局） -> Paint（绘制） -> Composite（合成）

  • JavaScript：可以通过 JavaScript 实现一些页面上视觉上的变化，例如：添加 DOM 元素、jQuery实现动画、CSS 动画
  • Style：浏览器对样式重新计算，这个过程会根据选择器进行重新匹配，计算哪些元素 CSS 受到影响，新的规则是什么样的，应该绘制成什么样子
  • Layout：布局就是把元素按照样式绘制到页面上，实际上是几何问题，需要知道元素的大小、位置
  • Paint：真正把内容绘制到页面上：文字、图片、颜色、阴影等
  • Composite：合成，绘制会和这个合成联系，浏览器为了提高效率，并不是把所有东西都画在一个层里，会建多个图层，最后再把它们组合起来

DOM 树

  1. 浏览器下载完 HTML 文档，就要把代码读进去，读进去的是文本，它先把这些文本转换成单个的字符
  2. HTML 有很多标签，标签是通过一对尖括号标记出来的，这个尖括号就可以用作于识别，就可以把一些字符串理解成有含义的标记，这些标记最终被换成节点对象，放在链形数据结构里，如下图

CSS 树

  • 当解释器遇到引用的 CSS，会先把资源下载下来，下载完成后对这个资源进行文本处理，把里面的标记全部识别出来，看样式是哪个节点的样式，然后用树形结构把这个关系存储起来，如下图

浏览器构建渲染树

DOM 和 CSSOM 合并成 Render Tree，把内容和样式合在一起，让浏览器理解最终要把什么画在页面上。合并的时候会把需要显示的留下，不需要显示的删除，比如：span 节点的样式是 display: none，不需要显示在页面上，构造成渲染树后，span 节点就会被去掉

回流与重绘

布局（layouts）与绘制（paint）

  • 渲染树只包含网页需要的节点
  • 布局计算节点精确的 位置和大小——“盒模型”
  • 绘制是像素画每个节点的过程

影响回流的操作

布局也叫回流。布局：通常页面第一次加载完成之后，把东西放在页面上。回流：由于页面上发生了视觉上的变化又再次导致重新布局

  • 添加/删除元素
  • display: none
  • 移动元素位置
  • 操作 styles
  • offsetLeft、scrollTop、clientWidth
  • 修改浏览器大小、字体大小

避免布局抖动

  • 避免回流

    比如想改变元素位置，千万不要修改 top、left 这样的值，可以使用 transform 或 translate 来进行位移

  • 读写分离

    批量的读操作再进行批量写操作

1
2
3
4
5
6
7
8
let cards = document.getElementsByClassName('card')
const update = timestamp => {
  for (let i = 0; i < cards.length; i++) {
    cards[i].style.width = Math.sin(cards[i].offsetTop + timestamp / 1000 + 1) * 500 + 'px'
  }
  window.requestAnimationFrame(update)
}
window.addEventListener('load', update)

性能分析里右上角红色三角形表示长任务提示了强制回流（Forced reflow）

  • 浏览器为了提高布局性能，会尽量把修改布局相关属性推迟操作
  • 但是当你获取布局属性（比如：offsetTop）时是无法推迟操作，不得不立即进行最新计算，以保证取到的是最新结果
  • 如果有连续的读写，就会导致有连续不断的回流发生，导致页面抖动

使用 FastDom（防止布局抖动）

FastDom

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script src="https://cdn.bootcdn.net/ajax/libs/fastdom/1.0.10/fastdom.min.js"></script>
<script>
  let cards = document.getElementsByClassName('card')
  const update = timestamp => {
    for (let i = 0; i < cards.length; i++) {
      fastdom.measure(() => {
        let top = cards[i].offsetTop
        fastdom.mutate(() => {
          cards[i].style.width = Math.sin(top + timestamp / 1000 + 1) * 500 + 'px'
        })
      })
    }
    window.requestAnimationFrame(update)
  }
  window.addEventListener('load', update)
</script>

运行之后发现 load 之后没有再出现红色三角形的长任务警告了，也没有出现有问题的 layout

复合线程与图层

复合线程

复合线程（compositor thread）

  • 将页面拆分图层进行绘制再进行复合
  • 利用 DevTools 了解网页的图层拆分情况

页面是怎么拆成不同图层的：

  • 默认情况下它是由浏览器决定的，浏览器会根据一些规则来判断是否将页面拆分成多个图层，又把哪些元素拆分成一个单独的图层（依据元素与元素之间是否有相互影响）
  • 主动的把一些元素提取成一个单独的图层（知道元素会影响其他部分，可以提取出去）

Position、Scale、Rotation、Opacity

High Performance Animations

减少重绘

  • 利用 DevTools 识别 paint 的瓶颈
  • 利用 will-change 创建新的图层
1
2
3
4
5
6
7
8
9
10
11
12
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.cardSpinning {
  width: 300px;
  animation: 3s linear infinite running rotate;
}

在 Performance 里录制动画并进行分析，放大后随便看一组，首先会重新计算样式（Recalculate Style）、更新图层数（Update Layer Tree），并没发生布局和重绘（Paint），直接触发复合（Composite Layers）

1
2
3
4
5
6
7
8
@keyframes rotate {
  0% {
    width: 300px;
  }
  100% {
    width: 600px;
  }
}

在 Network 里，键入 Ctrl + Shift + P，输入 Show Rendering，勾选 Paint flashing，所重绘的区域会用绿色标记出来

可以利用 willChange 属性，这样浏览器就知道这个元素应当被提取到一个单独的图层里

1
will-change: transform;

高频事件防抖

有一些事件触发频率非常高，甚至会超过帧的刷新速率，比如：scroll、touchstart、touchmove、mousemove。这些函数触发频率非常快，在 Main 函数里，可以看到事件处理函数消耗比较高，但实际上并没有必要在一帧里处理很多次，比如滚动，并不关心中心过程，只关心最后滚动到哪里，这样就可能会出现卡顿也就是抖动

1
2
3
4
5
6
7
8
9
10
11
12
// 修改图片宽度
function changeWidth(rand) {
  let cards = document.getElementsByClassName('card')
  for (let i = 0; i < cards.length; i++) {
    cards[i].style.width = (Math.sin(rand / 1000) + 1) * 500 + 'px'
  }
}
// 利用DevTools打开时可以复现抖动的问题
window.addEventListener('pointermove', e => {
  let pos = e.clientX
  changeWidth(pos)
})

先看一下下一帧的生命周期

  • 事件（touch、wheel）开始触发，JS 触发视觉上的变化
  • 一帧开始，rAF （requestAnimationFrame）调用，Layout （重新计算样式，更新图层）布局，Paint （合并图层）重绘
  • rAF 是在布局和重绘之前调用，这样可以利用 rAF 先把我们做的处理做完，之后再去进行布局和绘制，极大提高效率
  • rAF 本身是由 JavaScript 进行调度的，会尽量让你能够在每一次绘制之前去触发这个 rAF，尽量达到 60fps 的效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 修改图片宽度
function changeWidth(rand) {
  let cards = document.getElementsByClassName('card')
  for (let i = 0; i < cards.length; i++) {
    cards[i].style.width = (Math.sin(rand / 1000) + 1) * 500 + 'px'
  }
}
let ticking = false
// 利用DevTools打开时可以复现抖动的问题
window.addEventListener('pointermove', e => {
  let pos = e.clientX
  if (ticking) return
  ticking = true
  window.requestAnimationFrame(() => {
    changeWidth(pos)
    ticking = false
  })
})

React 时间调度实现

熟悉requestidlecallback到了解react ric polyfill实现

基本原理

  • requestIdleCallback 的问题

    requestIdleCallback 官方给出的标准：它的执行希望在 16ms 时间内，如果还有空余时间，它可以让它做些事情，但是这个函数并没有被浏览器进行很好的支持，React 考虑到这点，是通过 rAF 模拟实现 rIC

  • 通过 rAF 模拟 rIC

requestIdleCallback 在一帧关键渲染周期内，都做的事情：

  • requestAnimationFrame 是在 Layout 和 Paint 之前触发。在这一阵开始渲染之前执行
  • requestIdleCallback 是在 Layout 和 Paint 之后触发。在一帧之内，如果所有事情都做完了还有剩余时间，就可以做一些其他的事情。但是这个事要有个度，因为要给主线程留更多的空余时间，因为一旦有交互过来，至少要留 50ms 给每一次交互去处理

requestIdleCallback React 里的实现：

  • 当用户不再看这个页面或页面不可见，requestAnimationFrame 是不会运行，React 需要借用这个函数即使在后台状态也要继续完成，所以需要找到替代方案能保证任务做完，用 setTimeout 来实现
  • 作为调度函数，最关心的是所有任务，所以会给这些任务安排优先级，React 这边安排了 5个优先级，从立即可以执行到有空闲执行，另外这些任务都有过期时间，这些任务的存储肯定有一个队列，把这些队列排到队列里，然后等待 requestIdleCallback 有空闲时去执行，底层实现是双向环形链表