深入了解现代网络浏览器(第 3 部分)

深入了解现代网络浏览器(第 3 部分)

  • 渲染器进程的内部工作
  • 渲染器进程处理 Web 内容
  • 解析
    • DOM的构建
    • 子资源加载
    • JavaScript 可以阻止解析
  • 提示浏览器如何加载资源
  • 样式计算
  • 布局
  • 绘制
    • 更新渲染管道成本高昂
  • 合成
    • 如何绘制页面?
    • 什么是合成
    • 分层
    • 主线程的光栅和合成
  • 结语

翻译自深入了解现代网络浏览器(第 3 部分)

渲染器进程的内部工作

这是 4 部分博客系列中的第 3 部分,着眼于浏览器的工作原理。之前,我们介绍了 多进程架构 和 导航流程。在这篇文章中,我们将看看渲染器进程内部发生了什么。

渲染器过程涉及 Web 性能的许多方面。由于渲染器进程内部发生了很多事情,这篇文章只是一个概述。如果您想深入挖掘, Web Fundamentals 的性能部分 有更多资源。

渲染器进程处理 Web 内容

渲染器进程负责选项卡内发生的所有事情。在渲染器进程中,主线程处理您发送给用户的大部分代码。如果您使用 Web Worker 或 Service Worker,有时您的 JavaScript 的某些部分由工作线程处理。合成器和光栅线程也在渲染器进程内部运行,以高效、流畅地渲染页面。

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

深入了解现代网络浏览器(第 3 部分)_第1张图片

解析

DOM的构建

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

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

将 HTML 文档解析为 DOM 由 HTML 标准定义。您可能已经注意到,将 HTML 提供给浏览器永远不会引发错误。例如,缺少结束

标记是一个有效的 HTML。像(b 标签在 i 标签之前关闭)这样的错误标记 Hi! I'm Chrome!被视为您编写了 Hi! I'm Chrome!. 这是因为 HTML 规范旨在优雅地处理这些错误。如果您对这些事情是如何完成的感到好奇,您可以阅读HTML 规范的“ 解析器中的错误处理和奇怪案例简介”部分。

子资源加载

网站通常使用图像、CSS 和 JavaScript 等外部资源。这些文件需要从网络或缓存中加载。主线程可以在解析构建DOM的过程中找到它们时一一请求,但为了加快速度,“预加载扫描器”是并发运行的。如果 HTML 文档中有类似的东西,预加载扫描器会查看 HTML 解析器生成的令牌,并向浏览器进程中的网络线程发送请求。

深入了解现代网络浏览器(第 3 部分)_第2张图片

JavaScript 可以阻止解析

当 HTML 解析器找到一个

提示浏览器如何加载资源

Web 开发人员可以通过多种方式向浏览器发送提示,以便更好地加载资源。如果您的 JavaScript 不使用document.write(),您可以添加asyncdefer属性到

你可能感兴趣的:(浏览器,网络,javascript,前端)