浏览器渲染原理及流程

时间 2019-12-04

原文原文链接

渲染引擎简介

目前经常使用的浏览器：
Firefox . chrome . safari 是基于两种渲染引擎构建的，Firefox使用Geoko,是Mozilla自主研发的渲染引擎，Safari和Chrome都使用webkit.html

渲染主流程

概念解释
DOM Tree:浏览器将HTML解析成树形的数据结构.
CSS Rule Tree:浏览器将CSS解析在树形的数据结构.
Render Tree:DOM和CSSOM(CSS Object Model:CSS对象模型)合并后生成Render Tree.
layout:有了Render Tree，浏览器已经能知道网页中有哪些节点，各个节点的CSS的定义以及他们的从属关系，从而去计算出每一个节点的屏幕中的位置.
painting:按照算出来的规则，经过显卡，把内容画到屏幕上.
reflow(回流):当浏览器发现某个部分发生了点变化影响了布局，须要倒回去从新渲染，称此为回退的过程，叫reflow.reflow会从<html>这个root frame开始递归往下，依次计算全部的结点几何尺寸和位置。feflow几乎是没法避免的.
例如：树状目录的折叠，展开，实质上是元素的显示与隐藏等，都将引发浏览器的reflow，
鼠标划过，点击，只要这些行为引发了页面上的某些元素的占位面积，定位方式，边距等属性的变化，都会引发它的内部，周围甚至整个页面的从新渲染。
repaint(重绘):改变某个元素的背景色，文字颜色，边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，可是元素的几何尺寸没有变.web

注意点：
1.display:none的节点不会被加入Render Tree,而visibility:hidden则会，因此若是某个节点最开始是不显示的，设为display:none是最好的
2.display:none会触发reflow，而visibility:hidden只会触发repaint,由于位置没有发生变化.
3.有些状况下，好比修改了元素的样式，浏览器不会马上reflow和repaint一次，而是会把这样的操做积攒一批，而后作一次reflow，这又叫异步reflow或增量异步reflow,可是有些状况，如resize窗口，改变了页面默认的字体等，对于这些操做，浏览器会立刻进行reflowchrome

主流程
渲染引擎首先经过网络得到所请求文档的内容，一般以8K分块的方式完成。基本流程为：
解析HTML以构建DOM树 -> 解析CSS构建CSSOM -> 将DOM树与CSSOM树合并，构建Render树 -> 布局render树 -> 绘制render树后端

来看看webkit的流程：浏览器

接下来是Gecko的流程：
Gecko里把格式化好的可视元素称作“桢树”（Frame tree），每个元素就是一个桢，webkit使用的是渲染树的术语，渲染树由渲染对象组成，webkit里使用layout表示元素的布局，Gecko则称为reflow。webkit使用attachment来连接DOM节点与可视化信息以构建渲染树。一个非语义上的小差异就是Gecko在HTML与DOM树之间有一个附加的层，称做"content sink",是建立DOM对象的工厂.
网络

虽然Webkit与Gecko使用的术语略微不一样，可是这个过程是基本相同的，以下：
1.浏览器会将HTML解析成一个DOM树，DOM树构建过程是一个深度遍历过程，当前节点的全部子节点都构建好后才会去构建当前节点的下一个兄弟节点.
2.将CSS解析成CSS Rule Tree.
3.根据DOM和CSSOM来构造Render Tree,Render tree不等于DOM Tree,由于像Header或display:none的东西没有必要放在渲染树中.
4.有了Render Tree,浏览器已经能知道网页中有哪些节点，各个节点的CSS定义以及他们的从属关系，下一步操做称之为layout，顾名思义就是计算出每一个节点在屏幕中的位置.
5.下一步就是绘制，即遍历render树，并使用UI后端层绘制每一个节点。
注意：上述这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽量早的将内容呈现到屏幕上，并不会等到全部的html都解析完成以后再去构建和布局render树。它是解析完一部份内容就显示一部份内容，同时，可能还在经过网络下载其他内容.数据结构

此文章参考此连接异步