• 现代浏览器的呈现引擎的工作流程介绍

    呈现引擎是浏览器的核心
    服务器君一共花费 18.797 ms 进行了 4 次数据库查询,努力地为您提供了这个页面。
    广告很萌的

    呈现引擎

    在前面一小节,我们谈到了浏览器的结构组件,其中谈到了呈现引擎

    呈现引擎负责显示请求的内容。如果请求的内容是 HTML,它就负责解析 HTML 和 CSS 内容,并将解析后的内容显示在屏幕上。

    现代浏览器,比如Firefox、Chrome 浏览器和 Safari,是基于两种呈现引擎构建的。Firefox 使用的是 Gecko,这是 Mozilla 公司“自制”的呈现引擎。而 Safari 和 Chrome 浏览器使用的都是 Webkit。

    Webkit 是一种开放源代码呈现引擎,起初用于 Linux 平台,随后由 Apple 公司进行修改,从而支持苹果机和 Windows。

    呈现引擎的主流程

    呈现引擎一开始会从网络层获取请求文档的内容,内容的大小一般限制在 8000 个块以内。

    然后进行如下所示的基本流程:

    呈现引擎的基本流程

    呈现引擎将开始解析 HTML 文档,并将各标记逐个转化成“内容树”上的 DOM 节点。同时也会解析外部 CSS 文件以及样式元素中的样式数据。HTML 中这些带有视觉指令的样式信息将用于创建另一个树结构:呈现树。

    呈现树包含多个带有视觉属性(如颜色和尺寸)的矩形。这些矩形的排列顺序就是它们将在屏幕上显示的顺序。

    呈现树构建完毕之后,进入“布局”处理阶段,也就是为每个节点分配一个应出现在屏幕上的确切坐标。下一个阶段是绘制 - 呈现引擎会遍历呈现树,由用户界面后端层将每个节点绘制出来。

    需要着重指出的是,这是一个渐进的过程。为达到更好的用户体验,呈现引擎会力求尽快将内容显示在屏幕上。它不必等到整个 HTML 文档解析完毕之后,就会开始构建呈现树和设置布局。在不断接收和处理来自网络的其余内容的同时,呈现引擎会将部分内容解析并显示出来。

    呈现引擎流程工作图

    也许上面的文字不好理解,看看图就清晰多了:

    Webkit 主流程
    Mozilla 的 Gecko 呈现引擎主流程

    虽然 Webkit 和 Gecko 使用的术语略有不同,但整体流程是基本相同的。

    • Gecko 将视觉格式化元素组成的树称为“框架树”。每个元素都是一个框架。
    • Webkit 使用的术语是“呈现树”,它由“呈现对象”组成。

    对于元素的放置,Webkit 使用的术语是“布局”,而 Gecko 称之为“重排”。

    对于连接 DOM 节点和可视化信息从而创建呈现树的过程,Webkit 使用的术语是“附加”。有一个细微的非语义差别,就是 Gecko 在 HTML 与 DOM 树之间还有一个称为“内容槽”的层,用于生成 DOM 元素。我们会逐一论述流程中的每一部分。

更多 推荐条目

Welcome to NowaMagic Academy!

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

本章最新发布
随机专题
  1. [Python程序设计] urls.py设置技巧 8 个条目
  2. [移动开发] 从代码角度去认识 Handler 4 个条目
  3. [Python程序设计] Tornado源码解析 23 个条目
  4. [PHP程序设计] httpd.conf设置相关 3 个条目
  5. [移动开发] Android布局基本知识 3 个条目
  6. [PHP程序设计] PHP数组探索 4 个条目
  7. [Linux操作系统] CentOS上使用EPEL Repository 2 个条目
  8. [数据库技术] SQL基础语法 1 个条目
  9. [软件工程与项目管理] 开始使用Git 3 个条目
  10. [软件工程与项目管理] 浏览器的HTML解析器 8 个条目
  11. [PHP程序设计] PHP扩展模块安装 1 个条目
  12. [C语言程序设计] 结构体基本知识 1 个条目
窗口 -- [博客]