文档介绍：We b前端性能优化
浏览器漬染过程
I渲染过程
渲染引擎开始解析HTML/SVG/XHTML,并将标签转化为dom tree中的dom节点。接着, 它解析外部CSS文件及style标签中的样式信息生成rule tree。dom tree和rule t ree结合生成render tree。
Render tree由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。
Render tree构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。再下一步就是绘制，即遍历render tree,并使用UI后端层绘制每个节点。
值得注意的是，这个过程是逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的
html都解析完成之后再去构建
同时，可能还
和布局render tree。它是解析完一部分内容就显示一部分内容,
在通过网络下载其余内容。
渲染过程 -

网页被加载给html解释器变为一系列的词语
解析器根据词语构建节点node,形成DOM树
渲染过程 -

字节
字符
语义块
startTag: html
startTag: head
endTag： head
startTag : body
startTag : span
Hello World!!
endTag： span
endTag: body
endTag: html
Hello world! !
DOM
3C 62 6F 64 79 3E 48 65 6C 6C 6F 2C 20 3C 73 70 61 6E 3E 77 6F 72 6C 64 21 3C2F73 70 61 6E 3E3C 2F62 6F64 79 3E
<html><head></headxbody><span>Hello World!</span>v/bodyx/htm卜
渲染过程一

与DOM树的构建基本相同，都是要经过
字节 Bytes—字符 Characters—语义块 Tokens f 节点 Nodes—Ob jectmodel 这个过程。但值得注意的是，CSS是一种渲染阻塞资源(render blocking resource),它需要完全被解析完毕后才能进入生成渲染树的环节。
I渲染过程
三•脚本下载解析执行 script标签每次出现都会霸道的让页面等待脚本的解析和执行，同样，当使用 script的src属性加载页面时，浏览器必须先花时间下载外链文件中的代码，然后解析并执行。在这个过程中，页面渲染和用户交互是完全被阻塞的。
浏览器之所以产生这样的行为，是因为当前HTML页面无从知晓JS的动作：JS可能会向document里添加内容、引入其它元素、甚至关闭标签
所以浏览器会先（下载和）执行JS代码，然后才解析和渲染页面。
渲染过程 -
构建render tree
DOM树从根节点开始遍历可见节点（script, meta., head等除外， visibility:hidden;opacity:0这种仍占据空间的节点除外），浏览器会创建 RenderObj ect对象，该对象保存了为绘制DOM节点所必须的各种信息，例如样式布局信息，经过浏览器处理后RenderObject对象知道如何绘制自己。
RenderObject对象构成一颗基于DOM树的新树，为了布局计算和渲染等机制建立的一种新的内部表示。如果DOM树中添加了新的节点，浏览器也需要创建相应的 RenderObject 对象。