有过计算机图形基础知识的人都知道,渲染流程其实很复杂,在计算机底层 CPU,GPU 在不同的时刻需要各自进行不同的计算。

对于前端开发者来说,虽不用像专业计算机图形学领域的人一样对其中的每一个步骤都理解掌握,但若能做到对于浏览器的渲染有一个清晰的认识,必然会对理解web性能优化有很大的帮助。

对于前端开发者来说,从以下5个方面进行浏览器的渲染优化:

1. Javascript

  • requestAnimationFrame:
    告诉浏览器您希望执行动画并请求浏览器调用指定的函数以在下次重绘之前更新动画
  • Web Workers:
    为资源密集型JavaScript代码创建新的线程

2. 样式计算(Style Calculation)

  • css property styles:
    通过查询https://csstriggers.com了解各个css属性都会渲染的流程产生什么样的影响
  • selector matching:
    选择器的解析也会对渲染性能产生较大的影响。选择器的选择越“精确”,则解析所耗费的性能越大。所以尽量使用类选择器(class selector)也是提升性能的一种方法。

3. 布局的创建(Layout Creation)

  • layout thrashing:
    一个主要的性能瓶颈是布局颠簸。当在JavaScript中进行与样式更改交错的几何值请求并导致浏览器重排布局时,会发生这种情况。
    这样,当快速连续几次完成时,会导致强制同步布局(forced synchronous layout)。
  • forced synchronous layouts:
    强制同步布局

4. 屏幕像素的绘制(Painting of Screen Pixel)

  • multiple surface(layers):
    当浏览器开始填充屏幕像素时发生绘画。这涉及在屏幕上绘制所有视觉元素。这是在多个表面上完成的,称为图层。
    大量的绘制会导致严重的性能问题,尤其是在页面滚动的时候。
  • chrome dev tools:
    chrome开发者工具中的Rendering可以清楚的查看当前页面哪些部分正在被绘制(painting)

5. 渲染图层的合并(Layer Composition)

  • will-change: transform:
    当浏览器必须绘制彼此重叠的页面元素并且彼此存在于同一层中时,会出现由于绘制而导致的性能瓶颈。要解决此问题,所涉及的元素必须存在于单独的层中。
    下面的css代码可以开启浏览器的此功能:

    1
    2
    3
    <element_to_promote> {
    will-change: transform / opacity / ...; // 将要发生的动画变化类型
    }
  • chrome dev tools:
    chrome开发者工具中的Layers可以清楚的查看当前页面的图层(layer)层叠关系

本文参考 Browser Rendering Optimizations for Frontend Development