浏览器的渲染过程

in javascript前端HTMLcss浏览器 with 0 comment

浏览器渲染过程

render

  1. 解析HTML为DOM tree,DOM tree里面包含所有的dom元素标签。把所有的样式解析成样式结构体
  2. DOM tree和样式结构体组合后构建成render tree(渲染树)
  3. 根据生成的渲染树进行回流(Layout),得到节点的几何信息(位置,大小)
  4. Painting(重绘):根据渲染树以及回流得到的几何信息,得到节点的绝对像素
  5. Display(显示):将像素发送到GPU,展示在页面上

DOM树里面包含了所有的页面里存在的标签,渲染树里只有body里的内容,没有head节点和display为none的节点,渲染树的每个节点都有自己的样式信息(style)

render

回流(也叫重排)

简单来说,当布局发生改变的了就会触发回流

一些css样式会触发回流,比如display: none,当我们把一个原本显示的元素的样式的display设置为none的时候就会触发回流,且设置为none之后,在渲染树里是没有这个元素的节点的,只会在DOM tree里面有

js在访问元素的下列属性的时候会触发回流来返回相应的值

重绘

简单来说,当dom元素的外观发生改变了就会触发重绘,比如修改了元素的颜色。

回流一定会导致重绘,重绘不一定会导致回流

Responses