美文网首页饥人谷技术博客
简述网页的渲染机制

简述网页的渲染机制

作者: 莱昂纳德刚 | 来源:发表于2017-06-26 17:16 被阅读0次

    浏览器的主要功能

    浏览器的主要功能就是向服务器发出请求,在浏览器窗口中展示您选择的网络资源。这里所说的资源一般是指 HTML 文档,也可以是 PDF、图片或其他的类型。资源的位置由用户使用 URI(统一资源标示符)指定。

    浏览器的主要组件

    img
    1. 用户界面 - 包括地址栏、前进/后退按钮、书签菜单等。除了浏览器主窗口显示的您请求的页面外,其他显示的各个部分都属于用户界面。
    2. 浏览器引擎 - 在用户界面和呈现引擎之间传送指令。
    3. 呈现引擎 - 负责显示请求的内容。如果请求的内容是 HTML,它就负责解析 HTML 和 CSS 内容,并将解析后的内容显示在屏幕上。
    4. 网络 - 用于网络调用,比如 HTTP 请求。其接口与平台无关,并为所有平台提供底层实现。
    5. 用户界面后端 - 用于绘制基本的窗口小部件,比如组合框和窗口。其公开了与平台无关的通用接口,而在底层使用操作系统的用户界面方法。
    6. JavaScript 解释器。用于解析和执行 JavaScript 代码。
    7. 数据存储。这是持久层。浏览器需要在硬盘上保存各种数据,例如 Cookie。新的 HTML 规范 (HTML5) 定义了“网络数据库”,这是一个完整(但是轻便)的浏览器内数据库。

    浏览器工作流程

    img

    由图中可以发现:

    1)解析:

    • 解析HTML/SVG/XHTML,Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。
    • 解析CSS,解析CSS会产生CSS规则树。
    • 解析Javascript,脚本,主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.

    2)解析完成后,浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。注意:

    • 渲染器对应于DOM元素,但关系不是一对一的。非可视化DOM元素将不会插入到渲染树中。
    • CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。
    • 然后,计算每个Frame(也就是每个Element)的位置,这又叫layout和reflow过程。

    img

    3)最后通过调用操作系统Native GUI的API绘制。

    相关文章

      网友评论

        本文标题:简述网页的渲染机制

        本文链接:https://www.haomeiwen.com/subject/qzfbwttx.html