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

    更深入的理解
    服务器君一共花费 162.301 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. [Python程序设计] Tornado源码解析 23 个条目
  2. [移动开发] Android SQLite增删查改实例(数据:魔弹之王) 2 个条目
  3. [移动开发] Layout_weight属性解析 5 个条目
  4. [JavaScript程序设计] 关于HTTP Keep-Alive 6 个条目
  5. [软件工程与项目管理] 浏览器的HTML解析器 8 个条目
  6. [数据结构] 散列表(哈希表) 13 个条目
  7. [软件工程与项目管理] 浏览器初步介绍 8 个条目
  8. [智力开发与知识管理] 超越整体性学习 5 个条目
  9. [软件工程与项目管理] 浏览器的CSS解析 7 个条目
  10. [数据库技术] MySQL常用自带函数 3 个条目
  11. [移动开发] Android Studio里的Gradle 3 个条目
  12. [Python程序设计] Django 入门知识浅介 10 个条目
窗口 -- [博客]