阅读 46

前端学习-浅析浏览器渲染

浏览器渲染

浏览器渲染过程

  1. 根据已有的HTML元素构建一颗HTML树,即我们经常说的DOM(Document Object Model,文档对象模型);
  2. 在HTML树的基础,根据HTML元素对应的CSS构建一颗CSS树;
  3. 将HTML树和CSS树合并构建成一颗渲染树(render tree);
  4. Layout。根据文档流、盒模型、元素大小和位置渲染Layout布局;
  5. Paint。接下来把颜色相关部分,例如边框颜色、文字颜色、阴影、背景色等绘制出来;
  6. Compose。根据层叠关系合并,展示画面。

三棵树的图片

样式更新后的重新渲染

在日常工作中,我们可能会经常使用js代码来修改样式。然而根据第一部分浏览器渲染过程的描述,很容易可以了解到修改元素位置和背景颜色的渲染速度不一样,前者需要多走一布,layout的渲染,而后者完成颜色相关的绘制就行。下面列出所有样式更新方式的渲染过程。

三种渲染方式

由于css属性众多,我们很难一个个去试验修改不同的属性的渲染过程会是怎么样的,但是好消息是,有大佬已经完成了相关的工作。可以通过下面的网站很容易查找到不同属性更新后的渲染过程。

不同元素更新后的渲染方式

而css动画优化的主要思路就是根据上面浏览器的渲染过程,在实现需求的同时,使用合适的CSS属性和JS api。例如使用requestAnimationFrame代替setTimeout或setInterval方法来实现动画。在这些优化方面,可以多去看一些浏览器开发者的文章进行汇总。下面是Geogle团队提出的优化文章地址。

Geogle团队动画优化文章

文章分类
前端
文章标签