浏览器渲染的过程

lifesimple

在讨论页面渲染性能的时候,经常会听到这几个词“重绘” “回流” “重排”。
回流和重排都是 Reflow的不同翻译(叫法)
重绘对应Repaint,重新绘制的意思。

webkit浏览器的渲染过程

Gecko(firefox)浏览器的渲染过程

从图上可以看出来我们熟知的Reflow的说法源于ff,webkit这个过程称之为layout(计算布局),意思大概差不多吧。

浏览器的工作大致流程

从这个过程中可以了解到浏览器渲染主要有这么几步

  1. 解析HTML/XHTML/SVG 生成DOM tree,解析CSS生成CSS rule tree,解析script脚本

  2. 浏览器引擎通过DOM tree和css rule tree来构造render tree

  3. 调用系统的GUI绘图

几个值得关注的点:

  1. render tree不完全包含dom tree的内容,head或者display:none的元素不会出现在render tree中

  2. reflow/layout

  3. reflow/layout必定会repaintrepaint不一定会reflow/layout

  4. css rule tree的生成过程

  5. Repaint——屏幕的一部分要重画,比如某个CSS的背景色变了。但是元素的几何尺寸没有变。
    Reflow——意味着元件的几何尺寸变了,我们需要重新验证并计算Render Tree。是Render Tree的一部分或全部发生了变化。这就是Reflow,或是Layout。(HTML使用的是flow based layout,也就是流式布局,所以,如果某元件的几何尺寸发生了变化,需要重新布局,也就叫reflow)reflow 会从<html>这个root frame开始递归往下,依次计算所有的结点几何尺寸和位置,在reflow过程中,可能会增加一些frame,比如一个文本字符串必需被包装起来。

参考:
how browsers work
浏览器渲染原理简介

如果对这块知识感兴趣的话,建议去读下how browsers work这篇文章,比较长,讲的很细致,比如Gecko和webkit在渲染上的一些差异,生成树(dom tree/css render tree)的一些具体算法什么的。

阅读 2.4k

2017开始的技术笔记
写好代码做好事,新的一年要学习,学习,再学习!

好好学习

816 声望
21 粉丝
0 条评论

好好学习

816 声望
21 粉丝
文章目录
宣传栏