从基本结构我们也可以看出，浏览器的重头戏其实就是渲染引擎（也叫排版引擎），很多页面兼容性问题的根源可以说从这个来。360不管浏览器的HTML5跑分有多高（http://html5test.com/），无论UI和交互有多么不同，核心还是一样的。好吧，让我们深入渲染引擎，仔细看看。渲染引擎（renderingengine）简单描述了渲染引擎的职责，从字面意思看，它负责渲染从服务器返回并展示给最终用户的HTML、XML或IMAGES等资源。通过浏览器插件（插件或浏览器扩展）技术，还可以显示其他文档格式的资源，如PDF。后面的文章会解释这项技术。本章重点介绍渲染引擎的主要功能，即通过渲染引擎显示CSS样式的HTML和图像结果。前面提到过，firefox、chrome、safari都包含两种渲染引擎。火狐浏览器用的是gecko，safari和chrome（后来opera跟进）用的是webkit。Webkit是一个开源的渲染引擎，最初只能在linux平台上使用，苹果后来对其源代码进行了扩展和修改，使其可以在mac和windows平台上运行，后起之秀chrome对其进行了一系列的扩展和提升，使其越来越成为标准和流行的渲染网页引擎。webkit的详细介绍见http://webkit.org/。基本渲染流程用户请求的资源通过浏览器的网络层到达渲染引擎后，渲染工作就开始了。一个文档的每次渲染通常不会超过8K数据块，基本的渲染流程如下图所示：渲染引擎??首先解析HTML文档并将其转化为DOM树，这是第一步。接下来无论是内联样式、轮廓样式还是内嵌CSS样式，都会被解析，渲染DOM树的另一棵树——渲染树（rendertree）。rendertree包含colors,size等显示属性的Rectangles，这些rectangle的排列顺序与显示顺序一致。然后就是对渲染树的每个节点进行布局处理，确定其在屏幕上的显示位置。***就是遍历渲染树，使用上一章提到的UI后端层绘制每个节点。以上步骤是循序渐进的过程。为了改善用户体验，渲染引擎试图尽快将结果显示给最终用户。它不会等到所有HTML都被解析后才创建和布置渲染树。在从网络层获取文档内容的同时，会先显示接收到的部分内容。不同渲染引擎的具体渲染流程上面只是介绍了渲染引擎的大致处理流程。不同的渲染引擎具体步骤可能不同。我们以常见的webkit和gecko为例。首先是webkit的详细渲染过程：Firefox等浏览器的gecko渲染过程：从上面两张图可以看出，虽然两者使用的“技术术语”不同，但是从图中可以看出渲染两者的流程可以说是大同小异，也正是在这里我们可以统一的把具体的流程分开。接下来的四章会根据四种主要的渲染流程进行更详细的讲解。原文链接：http://www.cnblogs.com/luluping/archive/2013/04/05/3000461.html
