主流的Webkit内核浏览器（Safiri）和Gecko内核浏览器（FireFox）在渲染引擎的具体步骤上有些不同，但是大致的原理如下图：
1.浏览器把获取到的HTML代码解析成1个DOM树，HTML中的每个tag都是DOM树中的1个节点，根节点就是我们常用的document对象。DOM树里包含了所有HTML标签，包括display:none隐藏，还有用JS动态添加的元素等。
2.浏览器把CSS样式解析成样式解析成样式结构体CSSDOM树，解析过程中去掉浏览器不能识别的样式，比如IE浏览器去掉-moz开头的样式，而FF浏览器去掉_开头的样式等。
3.DOM树和CSSDOM树组合构建渲染树（render tree），此时的render tree和DOM相似，但事实上有很大的区别。render tree能识别样式。render tree里面的每一个节点都有自己的样式，因此，像标签这些不用于渲染的节点，不会被包含于render tree中。render tree中每一个节点都可以称作盒子（Box）。
值得注意的是，display: none； 和 visible： hidden；虽然很像，但是前者不会被包含在render tree中，因为它是不占空间而且不可见的，后者虽然不可见，但是占用空间，会影响布局（layout），所以包含在数中。
4.一旦render tree构建完毕，浏览器就可以根据render tree来绘制页面了。
参考
[1] http://blog.csdn.net/luckygll/article/details/7432713
[2] http://www.css88.com/archives/4996
[3] http://blog.csdn.net/dojiangv/article/details/51794535