浏览器的渲染机制与底层结构

[wuyuanlijie]

浏览器的结构

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

各大浏览的内核分类：

• Trident内核：IE
• Gecko内核：FireFox
• Webkit内核：Chrome、Safari

关键渲染路径

概念：是指与当前用户操作有关的内容。例如用户刚刚打开一个页面，首屏就显示当前用户的操作有关的内容，具体就是浏览器收到HTML、CSS和JS等资源并对其进行处理从而渲染出Web页面。

• 优化关键渲染路径

输入网址到页面的呈现

• DNS查询
• TCP连接
• HTTP请求即响应
• 服务器响应
• 客户端渲染（浏览器渲染）

浏览器对内容的渲染流程

1. 处理HTML标记并构建DOM树
2. 处理CSS标记并构建CSSOM树
3. 将DOM与CSSOM合并为一个渲染树render tree
4. 根据渲染树来布局，以计算每个节点的几何信息
5. 将各个节点绘制到屏幕上去

阻塞渲染

谈论资源的阻塞的时候，现代的浏览器总是并行加载资源。例如，当HTML解析器（HTML Parser）被脚本阻塞的时候，解析器虽然会停止构建DOM，但仍会识别脚本后面的资源，并进行预加载。

由于以两点：

1. 默认情况下，CSS 被视为阻塞渲染的资源，这意味着浏览器将不会渲染任何已处理的内容，直至 CSSOM 构建完毕。
2. JavaScript 不仅可以读取和修改 DOM 属性，还可以读取和修改 CSSOM 属性。

存在阻塞的 CSS 资源时，浏览器会延迟 JavaScript 的执行和 DOM 构建。另外：

• 当浏览器遇到一个 script 标记时，DOM 构建将暂停，直至脚本完成执行。
• JavaScript 可以查询和修改 DOM 与 CSSOM。
• CSSOM 构建时，JavaScript 执行将暂停，直至 CSSOM 就绪。

所以，script 标签的位置很重要。实际使用时，可以遵循下面两个原则：

• CSS 优先：引入顺序上，CSS 资源先于 JavaScript 资源。
• JavaScript 应尽量少影响 DOM 的构建。