前端性能优化五：浏览器渲染过程

js 复制代码

输入地址 -> DNS寻址 -> 建立TCP链接 -> 发送HTTP请求 -> 服务器端处理请求 -> 服务器端返回响应HTTP包 -> 断开tcp连接

js 复制代码

①. 浏览器有一个渲染引擎,用来渲染窗口所展示的内容:
    a. 默认情况下,渲染引擎可以显示html、xml文档及图片.
    b. 借助插件(一种浏览器扩展)显示其它类型数据,如PDF阅读器插件显示PDF格式.

②. 种类:
    a. Firefox  =>  Mozilla
    b. Safari、Chrome  =>  webkit

js 复制代码

①. Parsing HTML to construct the DOM tree:
    a. 浏览器解析HTML,构建DOM Tree(Parse HTML).
    b. 将html解析成树形的数据结构.

②. 浏览器解析CSS,构建CSSOM(CSS Object Model)Tree:
    a. 将css解析成树形的数据结构.

③. JavaScript:
    a. js会通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.
    b. 浏览器将DOM Tree和CSSOM Tree合成渲染树(Render Tree).

④. 布局(Layout):
    a. 布局render树,根据生成的Render Tree,浏览器知道网页中有哪些节点、各个节点的CSS定义以及从属关系.
    b. 进行回流,以计算每个节点的几何信息(屏幕中位置、大小、字体样式等):
       (1). 各个节点的css定义和以及它们的从属关系.
    c. 解析position、font-size、font-color、特殊的属性.

⑤. 绘制(Painting):
    a. 绘制render树,根据渲染树和回流得到的几何信息,得到每个节点的绝对像素.

⑥. 展示(Display):
    a. 按照计算出来的规则,将像素发送给图形处理器(GPU),展示在页面上.

⑦. reflow(回流):
    a. 当浏览器发现某个部分发生了点变化影响了布局,需要倒回去重新渲染.
    b. reflow会从<html>这个root frame开始递归往下,依次计算所有的结点几何尺寸和位置.
    c. 只要有行为引起了页面上某些元素的占位面积、定位方式、边距的变化,都会引起它内部、周围甚至整个页面的重新渲染.

⑧. repaint(重绘):
    a. 改变某个元素的背景色、文字颜色、边框颜色等不影响它周围或内部布局的属性时,屏幕的一部分要重画.
    b. 但是元素的几何尺寸没有变.

js 复制代码

①. 树状目录的折叠、展开:
    a. 实质上是元素的显示与隐藏等,都将引起浏览器的reflow.

js 复制代码

①. css样式解析到显示至浏览器屏幕上就发生在③④⑤⑥步.

②. 解析过程:
    a. 浏览器不是一获取到css样式就立马开始解析.
    b. 而是根据css样式的书写顺序将之按照DOM树的结构分布render样式,完成第③步.
    c. 再开始遍历每个树结点的css样式进行解析.
    d. 此时的css样式的遍历顺序完全是按照之前的书写顺序.
    e. 在解析过程中,一旦浏览器发现某个元素的定位变化影响布局,则需要倒回去重新渲染.

③. 如按照如下书写书序:
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    a. 当浏览器解析到position的时,突然发现该元素是绝对定位元素,需要脱离文档流.
    b. 而之前是按照普通元素进行解析的.
    c. 所以,需要重新渲染,解除该元素在文档中所占位置.
    d. 由于该元素的占位发生变化,其它元素也可能会受到它回流的影响而重新排位.
    e. 最终导致④步骤花费的时间太久而影响到⑤步骤的显示.

js 复制代码

a.render树的结构不等同于DOM树的结构，一些设置display:none的节点不会被放在render树中，但会在dom树中。

前端性能优化五：浏览器渲染过程

1. 渲染引擎:

1. 渲染过程: