浏览器渲染的过程

时间 2019-12-06

标签浏览器渲染过程栏目浏览器繁體版

原文原文链接

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

webkit浏览器的渲染过程
html

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

从图上能够看出来咱们熟知的Reflow的说法源于ff,webkit这个过程称之为layout(计算布局),意思大概差很少吧。算法

浏览器的工做大体流程
shell

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

几个值得关注的点：spa

render tree不彻底包含dom tree的内容，head或者display:none的元素不会出如今render tree中
reflow/layout
reflow/layout一定会repaint但repaint不必定会reflow/layout
css rule tree的生成过程
Repaint——屏幕的一部分要重画，好比某个CSS的背景色变了。可是元素的几何尺寸没有变。
Reflow——意味着元件的几何尺寸变了，咱们须要从新验证并计算Render Tree。是Render Tree的一部分或所有发生了变化。这就是Reflow，或是Layout。（HTML使用的是flow based layout，也就是流式布局，因此，若是某元件的几何尺寸发生了变化，须要从新布局，也就叫reflow）reflow 会从<html>这个root frame开始递归往下，依次计算全部的结点几何尺寸和位置，在reflow过程当中，可能会增长一些frame，好比一个文本字符串必需被包装起来。

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