【转载】WEB前端底层知识之浏览器是如何工作的(2)渲染引擎

上一章简要说明了一下浏览器机制的相关知识&＃xff0c;从基础架构上我们也可以看到浏览器的重头戏其实在于渲染引擎(又称排版引擎)&＃xff0c;很多页面兼容性问题的根源可以说也皆来源于此。360浏览器HTML5跑分再高&＃xff08;http://html5test.com/&＃xff09;&＃xff0c;UI与交互再怎么不一样&＃xff0c;内核还是一样的。好了&＃xff0c;那我们深入到渲染引擎内部仔细看一下吧。

　　渲染引擎&＃xff08;the rendering engine&＃xff09;简述

　　渲染引擎的职责&＃xff0c;正如字面上的意思就是负责从服务器端返回的HTML&＃xff0c;XML&＃xff0c;或者IMAGES等资源的渲染工作并显示给最终用户。通过浏览器插件&＃xff08;plug-in or browser extension&＃xff09;技术&＃xff0c;它也能显示一些其他文档格式的资源&＃xff0c;如PDF&＃xff0c;后期的文章会针对这种技术进行一下说明&＃xff0c;本章重点描述渲染引擎的首要功能&＃xff0c;即通过渲染引擎显示出经过CSS样式化的HTML和图片结果。

　　前面已经介绍过&＃xff0c;firefox,chrome,safari 包括了两种渲染引擎&＃xff0c;火狐浏览器使用gecko&＃xff0c;safari跟chrome&＃xff08;后来opera跟进&＃xff09;使用webkit. Webkit是一个开源的渲染引擎&＃xff0c;起初只能用于linux平台&＃xff0c;后来苹果公司apple对其源代码进行了扩展改造&＃xff0c;使其能运行与mac跟windows平台&＃xff0c;后起之秀chrome对其有进行了一些列扩充与推广&＃xff0c;使其越来越成为标准流行的渲染网页引擎&＃xff0c;webkit详细介绍可参见 http://webkit.org/。

　　基本渲染过程

　　用户请求的资源通过浏览器的网络层到达渲染引擎后&＃xff0c;渲染工作开始。每次渲染文档通常不会超过8K的数据块&＃xff0c;其中基础的渲染过程如下图所示:       

　　渲染引擎首先解析HTML文档&＃xff0c;转换为一棵DOM树&＃xff0c;此为第一步。接下来不管是内联式&＃xff0c;外联式还是嵌入式引入的CSS样式也会被解析&＃xff0c;渲染出另外一棵用于渲染DOM树的树-渲染树(render tree) &＃xff0c;渲染树包含带有颜色&＃xff0c;尺寸等显示属性的矩形&＃xff0c;这些矩形的顺序与显示顺序一致。然后就是对渲染树的每个节点进行布局处理&＃xff0c;确定其在屏幕上的显示位置。最后就是遍历渲染树并用上一章提到的&＃xff35;&＃xff29;后端层将每一个节点绘制出来。

　　以上步骤是一个渐进的过程&＃xff0c;为了提高用户体验&＃xff0c;渲染引擎试图尽可能快的把结果显示给最终用户。它不会等到所有&＃xff28;&＃xff34;&＃xff2d;&＃xff2c;都被解析完才创建并布局渲染树。它会在从网络层获取文档内容的同时把已经接收到的局部内容先展示出来。

　　不同渲染引擎具体不同的渲染流程

　　上面只是介绍了渲染引擎一般的处理流程&＃xff0c;针对不同的渲染引擎具体步骤可能有所不同&＃xff0c;就拿常见的webkit跟gecko来说吧。

　　首先是webkit的详细渲染流程:

　　火狐等浏览器的gecko渲染流程:

 　　从上面两幅图可以看出&＃xff0c;尽管两者使用了不同的“专业术语”&＃xff0c;但是从图上可以看出&＃xff0c;两者的渲染过程可谓大同小异&＃xff0c;正是于此&＃xff0c;我们可以再把具体的过程统一分离出来&＃xff0c;接下来的四章会根据四个主要渲染过程进行一下较为细致的说明。

      【转载地址】http://www.cnblogs.com/mirror/archive/2013/03/30/2990753.html