工作已经快10多年了，却没有认真了解过浏览器的渲染机制。每次看见觉得自己懂得。但是要让自己复述一遍，这么也复述不出来。写文章的好处就是，然自己记得更牢固。即使是照着书本再打一遍，也许这就是为什么小学时候，老师老是让我妈抄书的原因吧。
来说说浏览器的渲染机制。这篇文章紧接上一篇APP的5大部件。
总体来说，浏览器的渲染是单层渲染，一个HTML页面由很多标签组成。
首先浏览器对标签进行解析（parse），
解析完成后会生成一个DOM数，这个DOM数，大家应该都比较清楚，在DOM树中会根据标签生成对应的元素（element）
然后浏览器会对DOM树进行布局（layout），布局过程会对整个DOM树进行遍历，这个过程就会结合元素的类型和代码中的CSS央视，生成一颗（layout）树。这个layout树上的节点就是一个个块（block），每一个block有自己的宽、高、样式、位置和颜色等属性。
接下来就是要对layout树进行渲染（render），渲染过程会把layout树上的节点，创建为内存里的buffer，
然后在画到一张image上，再将这张image贴到屏幕上，这样就可以看到浏览器渲染出的界面了。
英文解释：
parse（解析）
render（中文着色的意思）
在计算机领域，缓冲器指的是缓冲寄存器，它分输入缓冲器和输出缓冲器两种。前者的作用是将外设送来的数据暂时存放，以便处理器将它取走;后者的作用是用来暂时存放处理器送往外设的数据。有了数控缓冲器，就可以使高速工作的CPU与慢速工作的外设起协调和缓冲作用，实现数据传送的同步。由于缓冲器接在数据总线上，故必须具有三态输出功能。
总结：关于去抄写这篇文章的目的，我觉得了解原理后，学习起前端来会更加的容易。
閱讀更多 產品經理Jack 的文章
