[译] 现代浏览器内部揭秘(第三部分)

  • 原文地址:Inside look at modern web browser (part 3)
  • 原文作者:Mariko Kosaka
  • 译文出自:掘金翻译计划
  • 本文永久链接:github.com/xitu/gold-m…
  • 译者:ssshooter
  • 校对者:ThomasWhyne, CoolRice

渲染进程的内部机制

这是关于浏览器工作原理博客系列四部分中的第三部分。之前,我们介绍了多进程架构和导航流。在这篇文章中,我们将一探渲染进程的内部机制。

渲染进程涉及 Web 性能的许多方面。由于渲染进程的流程太复杂,因此本文只进行概述。如果你想深入了解,可以在 the Performance section of Web Fundamentals 找到相关资源。

渲染进程处理网站内容

渲染进程负责标签页内发生的所有事情。在渲染进程中,主线程处理服务器发送到用户的大部分代码。如果你使用 web worker 或 service worker,部分 JavaScript 将由工作线程处理。合成和光栅线程也在渲染进程内运行,以高效,流畅地呈现页面。

渲染进程的核心工作是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页。

图 1:渲染进程内部包含主线程、工作线程、合成线程和光栅线程

解析(Parsing)

DOM 的构建

当渲染进程收到导航的提交消息并开始接收 HTML 数据时,主线程开始解析文本字符串(HTML)并将其转换为文档对象模型(DOM)。

DOM 是一个页面在浏览器内部表现,也是 Web 开发人员可以通过 JavaScript 与之交互的数据结构和 API。

将 HTML 到 DOM 的解析由 HTML Standard 规定。你可能已经注意到,将 HTML 提供给浏览器这一过程从不会引发错误。像 Hi! I'm Chrome! 这样的错误标记,会被理解为 Hi! I'm Chrome!,这是因为 HTML 规范会优雅地处理这些错误。如果你好奇这是如何做到的,可以阅读 An introduction to error handling and strange cases in the parser 的 HTML 规范部分。

子资源加载

网站通常使用图像、CSS 和 JavaScript 等外部资源,这些文件需要从网络或缓存加载。在解析构建 DOM 时,主线程按处理顺序逐个请求它们,但为了加快速度,“预加载扫描器(preload scanner)”会同时运行。如果 HTML 文档中有 之类的内容,则预加载扫描器会查看由 HTML 解析器生成的标记,并在浏览器进程中向网络线程发送请求。

图 2:主线程解析 HTML 并构建 DOM 树

JavaScript 阻塞解析

当 HTML 解析器遇到

你可能感兴趣的:(javascript,后端,区块链)