【译】深入了解现代web浏览器（三）渲染进程内部工作

渲染进程的内部工作

这是我们了解浏览器如何工作4篇博客的第3篇。之前，我们介绍了 多进程架构 和 导航流程。在本文中，我们将研究渲染进程内部发生了什么。

渲染器进程涉及web优化的许多方面。由于渲染进程内部发生了很多事情，因此本文只是概述。如果你想更加深入，“web基础知识的性能优化部分”有更多的资源。

渲染进程处理web内容

渲染进程负责处理tab选项卡内发生的所有事情。在一个渲染进程中，主进程处理你发送给用户的大多数代码。如果有时候你使用web worker 或者 service worker，你的部分 javascript 由woker线程处理。排版和光栅线程也在渲染进程内部运行，以便高效，流畅的渲染页面。

渲染进程的核心工作是将html、css和javascript转换为可以与用户交互的web页面。

renderer.png

解析

DOM构造

当渲染进程接收到导航提交的信息，并且开始接收html数据，主线程开始解析文本字符（html），并且将其转换为文档对象模型（DOM）。

DOM是一个浏览器对页面的内部表示，也是web开发者可以通过javascript与之交互的数据结构和API。

解析一个HTML文档到DOM是通过HTML标准来定义的。你可能注意到将HTML放到浏览器从来没有抛出过错误。例如，缺少闭合 **

**是一个合法的HTML。错误的标记例如 **Hi! I'm Chrome! **(b标签在i标签之前关闭)，它被看成是 Hi! I'm Chrome!。这是因为HTML规范定义了如何优雅的处理这些错误。如果你关心这些事情是如何完成的，你可以阅读HTML规范中“错误处理和解析中奇怪的例子”一节。

子资源加载

一个网站通常会使用额外的资源，例如图片、css和javascript。这些文件需要从网络或者缓存中加载。主进程可以 在解析构建DOM的时候一个接一个的请求他们，但为了加快速度，“预加载扫描”会同时运行。如果在HTML里面有一些像img和link的内容，预加载会查看HTML解析生成的token，并且在浏览器进程中发送网络请求。

dom.png

javascript会阻塞解析

当HTML解析发现一个script标签，它停止解析HTML文档，并且去加载，解析，并且执行javascript代码。为什么？因为javascript可以改变文档的形状，使用document.write()可以改变整个的DOM结构（解析模型概述在HTML定义里有一个好的绘图）。这是HTML解析为什么在恢复HTML文档解析之前等待javascript执行。如果你像深入了解javascript执行发生了什么，V8团队关于此的讨论在这。

提示浏览器如何加载资源

web开发者有很多种方式可以发送提示给浏览器按序加载资源。如果你的javascript没有使用document.write()，你可以添加 async 和 defer 属性给