H5的渲染流程笔记

作者：JiajiaAz 
来源：CSDN 
原文：https://blog.csdn.net/qq_32657025/article/details/79569213

浏览器页面渲染流程

浏览器从HTTP服务器获取html文档，到呈现页面给用户，会经过以下几个步骤：

1、解析文档构建DOM树

浏览器的解析内容可以分为三个部分：

• HTML/XHTML/SVG：解析这三种文件后，会生成DOM树（DOM Tree）
• CSS：解析样式表，生成CSS规则树（CSS Rule Tree）
• JavaScript：解析脚本，通过DOM API和CSSOM API操作DOM Tree和CSS Rule Tree，与用户进行交互。

2、构建渲染树

解析文档完成后，浏览器引擎会将 CSS Rule Tree 附着到DOM Tree 上，并根据DOM Tree 和 CSS Rule Tree构造 Rendering Tree（渲染树）。

3、布局与绘制渲染树

解析渲染树属性，计算每一个渲染树节点的位置和大小，此过程被称为reflow。最后调用操作系统的Native GUI API完成绘制（repain）。注意：

渲染树的节点，在Gecko中称为frame，而在webkit中称为renderer；
reflow和repaint是两个不同的概念，其区别会在后文进行探讨。

4.小知识

reflow（回流）
DOM结构中的各个元素都有自己的盒子模型，浏览器根据各样式计算元素的尺寸和位置，构建渲染树的过程称之为reflow。当渲染树节点的尺寸，布局，隐藏属性发生改变时，会触发reflow操作，重新构建Render Tree。每个页面在第一次加载的时候，会发生一次回流。 
完成回流后，浏览器会重新绘制受影响的部分到屏幕中，因此，回流必定会导致重绘。

repain（重绘）
当各种盒子的位置、大小以及其他属性，例如颜色、字体大小等都确定下来后，浏览器便把这些元素都按照各自的特性进行绘制，于是页面的内容出现了，这个过程称之为repaint。

5.Canvas介绍

Canvas是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素。Canvas相当于一块画布，提供API能够在画布上绘制图形，Canvas一般用来绘制2D图形。绘制的过程不用reflow只需要repain。

6.Webgl介绍

WebGL（全写Web Graphics Library）是一种3D绘图协议，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起。WebGL可以为HTML5 Canvas提供硬件3D加速渲染。

Egret或者Laya都可以开启Canvas或者WebGl模式。