页面渲染深入解析
基本渲染过程 用户请求的资源通过浏览器的网络层到达渲染引擎后，渲染工作开始。每次渲染文档通常不会超过8K的数据块，其中基础的渲染过程如下图所示: 第一步： 渲染引擎首先解析HTML文档，转换为一棵DOM树； 第二步：接下来不管是内联式，外联式还是嵌入式引入的CSS样式也会被解析，渲染出另 外一棵用于渲染DOM树的树-渲染树(render tree) ，渲染树包含带有颜色，尺寸等显示属性的矩形，这些矩形的顺序与显示顺序一致； 第三步：然后就是对渲染树的每个节点进行布局处理，确定其在屏幕上的显示位置； 第四步： 就是遍历渲染树并用ＵＩ后端层将每一个节点绘制出来。 以上步骤是一个渐进的过程，为了提高用户体验，渲染引擎试图尽可能快的把结果显示给最终用户。它不会等到所有ＨＴＭＬ都被解析完才创建并布局渲染树。它会在从网络层获取文档内容的同时把已经接收到的局部内容先展示出来。 不同渲染引擎具体不同的渲染流程 上面只是介绍了渲染引擎一般的处理流程，针对不同的渲染引擎具体步骤可能有所不同，就拿常见的webkit跟gecko来说吧。 首先是webkit的详细渲染流程: 火狐等浏览器的gecko渲染流程: 从上面两幅图可以看出，尽管两者使用了不同的“专业术语”，但是从图上可以看出，两者的渲染过程可谓大同小异，正是于此，我们可以再把具体的过程统一分离出来。 优化css部分 那么如何写出高效的css代码呢