网页css js 抓取助手(什么是HTML？渲染网页的步骤机制及优化方法 )

　　网页css js 抓取助手(什么是HTML？渲染网页的步骤机制及优化方法

)

　　我的想法：如果我要构建快速可靠的网站，我需要真正了解浏览器如何在每一步呈现页面，以便在开发过程中优化每一步。这个 文章 是我对端到端流程的高级学习总结。

　　好吧，事不宜迟，让我们开始吧。这个过程可以分为以下几个主要阶段：

　　开始解析 HTML 获取外部资源 解析 CSS 并构建 CSSOM 执行 JavaScript 合并 DOM 和 CSSOM 构建渲染树 计算布局并绘制 1.开始解析 HTML

　　当浏览器通过网络接收到页面的 HTML 数据时，它会立即设置解析器以将 HTML 转换为文档对象模型 (DOM)。

　　文档对象模型 (DOM) 是 HTML 和 XML 文档的编程接口。它提供了文档的结构化表示，并定义了从程序访问该结构以更改文档的结构、样式和内容的方法。DOM 将文档解析为节点和对象（收录属性和方法的对象）的结构化集合。简而言之，它将网页与脚本或编程语言联系起来。

　　解析过程的第一步是将 HTML 分解并表示为开始标记、结束标记及其内容标记，然后可以构造 DOM。

　　2. 获取外部资源

　　当解析器遇到外部资源（例如 CSS 或 JavaScript 文件）时，解析器将提取这些文件。解析器在加载 CSS 文件时继续运行，此时页面被阻止呈现，直到资源被加载和解析（稍后会详细介绍）。

　　JavaScript 文件略有不同 - 默认情况下，解析器会在加载 JS 文件然后解析它们时阻止解析 HTML。可以向脚本标签添加两个属性来缓解这种情况：延迟和异步。两者都允许解析器在后台加载 JavaScript 文件时继续运行，但它们的做法不同。稍后会详细介绍，但总的来说：

　　defer 意味着文件的执行将被延迟，直到文档解析完成。如果多个文件具有 defer 属性，它们将按照页面放置的顺序依次执行。

　　async 表示文件一加载就执行，可能是在解析过程中，也可能是在解析过程之后，所以不保证异步脚本的执行顺序。

　　预加载资源

　　元素的 rel 属性的属性值 preload 允许你在 HTML 页面的元素内部编写一些声明性的资源获取请求，这可以指示页面加载后立即需要哪些资源。

　　对于这样一个立即需要的资源，您可能希望在页面加载生命周期的早期开始获取它，在浏览器的主要呈现机制参与之前预加载它。这种机制可以让资源更早地加载和可用，并且不太可能阻塞页面的初始渲染，从而提高性能。

　　3.解析 CSS 并构建 CSSOM

　　你可能知道 DOM 很长时间了，但你可能对 CSSOM（CSS 对象模型）的了解较少，反正我也没听过几次。

　　CSS 对象模型 (CSSOM) 是所有 CSS 选择器和每个选择器的关联属性的映射，以树的形式存在，具有树的根节点、兄弟姐妹、后代、孩子和其他关系。CSSOM 与文档对象模型 (DOM) 非常相似。两者都是关键渲染路径的一部分，必须采取一系列步骤才能正确渲染 网站。

　　CSSOM 与 DOM 一起构建渲染树，浏览器依次使用它来布局和绘制网页。

　　与 HTML 文件和 DOM 类似，当 CSS 文件被加载时，它们必须被解析并转换成一棵树——这次是 CSSOM。它描述了页面上的所有 CSS 选择器、它们的层次结构和属性。

　　CSSOM 与 DOM 的不同之处在于它不能增量构建，因为 CSS 规则由于其特殊性而可以在不同的点上相互覆盖。这就是 CSS 渲染阻塞的原因，因为浏览器无法知道每个元素在屏幕上的位置，直到所有 CSS 被解析并构建 CSSOM。

　　4.执行 JavaScript

　　不同的浏览器有不同的 JS 引擎来执行这个任务。从计算机资源的角度来看，解析 JS 可能是一个昂贵的过程，比其他类型的资源更昂贵，因此优化它对于良好的性能非常重要。

　　加载事件

　　当加载的 JS 和 DOM 完全解析并准备好时，会发生 emitdocument.DOMContentLoaded 事件。对于需要访问 DOM 的任何脚本，例如以某种方式执行操作或侦听用户交互事件，在执行脚本之前等待此事件是一种很好的做法。

document.addEventListener(

'DOMContentLoaded',

(event) => {

// 这里面可以安全地访问DOM了

});

　　window.load 事件在所有其他内容（例如异步 JavaScript、图像等）完成加载后触发。

window.addEventListener(

'load',

(event) => {

// 页面现已完全加载

});

　　5.合并DOM和CSSOM构建渲染树

　　渲染树是 DOM 和 CSSOM 的组合，表示将渲染到页面上的所有内容。这并不一定意味着渲染树中的所有节点都将被可视化渲染，例如将收录 opacity: 0 或 visibility: hidden 并且仍然可以被屏幕阅读器读取的样式的节点等，而 display: none 不包括任何内容。此外，诸如此类不收录任何视觉信息的标签将始终被忽略。

　　和 JS 引擎一样，不同的浏览器有不同的渲染引擎。

　　6. 计算布局并绘制

　　现在我们有了完整的渲染树，浏览器知道要渲染什么，但不知道在哪里。因此，必须计算页面的布局（即每个节点的位置和大小）。渲染引擎从顶部一直向下遍历渲染树，计算应该显示每个节点的坐标。

　　完成后，最后一步是获取布局信息并将像素绘制到屏幕上。