• 复述一下浏览器呈现引擎的基本工作流

    更深入的理解
    服务器君一共花费 7.640 ms 进行了 3 次数据库查询,努力地为您提供了这个页面。
    广告很萌的

    前面小节我们介绍了浏览器呈现引擎的主流程,并给出流程图。

    因为这个过程很重要,这里再对这个流程复述一次:

    1. 解析HTML构建DOM树:

    这里解析三个东西:HTML/SVG/XHTML,CSS及javascript。解析CSS会产生CSS规则树,解析javascript主要是通过DOM API和CSSOM API来操作DOM Tree和CSS。

    2. Rule Tree渲染树构建:

    解析完成后,浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。不过,Rendering Tree 渲染树并不等同于DOM树,因为一些像Header或display:none的东西就没必要放在渲染树中了。CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。

    3. 渲染树布局:

    计算每个element确切的显示位置,也就是layout和reflow的过程。

    4. 绘制渲染树:

    通过调用操作系统Native GUI的API绘制将每一个节点绘制出来。

    看起来步骤繁琐,但是为了更好的用户体验,浏览器会尽可能快的把内容显示出来,并不会等到所有的HTML解析完后才创建并布局渲染树,它会在处理后续内容的同时把处理过的局部内容先展示出来。

    一些题外话:关于现在的渲染引擎

    Firefox, Safari两种浏览器构建于两种渲染引擎之上:Firefox使用Gecko —— Mozilla自家的渲染引擎;Safari 和 Chrome 都使用 Webkit,而Chrome现在从开源的Webkit上分叉出自己的开源浏览器引擎Blink,Opera宣布跟随Google Chrome的脚步,将弃用自家的Presto引擎,支持Blink引擎,而IE使用的是Trident内核。不过众多国内主流浏览器使用的双引擎一般都是Webkit和Trident两种内核。

更多 推荐条目

Welcome to NowaMagic Academy!

现代魔法 推荐于 2013-02-27 10:23   

本章最新发布
随机专题
  1. [软件工程与项目管理] 浏览器的CSS解析 7 个条目
  2. [移动开发] Android布局中的一些常用控件 2 个条目
  3. [运维管理] 防火墙原理与应用 5 个条目
  4. [计算机算法] 从双端队列引出的卡特兰数 3 个条目
  5. [计算机算法] 两数交换的各种算法细节 2 个条目
  6. [软件工程与项目管理] 开始了解Git 5 个条目
  7. [PHP程序设计] 编程范式初探 3 个条目
  8. [计算机算法] TAOCP与算法 12 个条目
  9. [Linux操作系统] 基本 Linux Shell 命令 2 个条目
  10. [Linux操作系统] CentOS上使用EPEL Repository 2 个条目
  11. [数据库技术] MySQL常用自带函数 3 个条目
  12. [数据库技术] MySQL中英文混合排序 4 个条目
窗口 -- [八点]