揭开关键渲染路径：深入研究网页加载
#javascript #html #css #网络开发人员

ð当您访问网站时，您希望它可以快速加载并无缝显示内容。在幕后，浏览器经历了一个复杂的过程，称为关键渲染路径（CRP）来实现这一目标。了解CRP的工作原理对于Web开发人员和设计人员优化网页加载时间至关重要。在此博客中，我们将剖析CRP，讨论各种元素，例如常规/异步属性，dom，cssom，cssom，渲染树，布局和油漆，html和css的增量和非销售解析以及多个渲染树层到特殊标签。

关键的渲染路径（CRP）揭示了ð§

Critical Rendering Path

解析HTML和CSSð§©

网页的旅程始于HTML和CSS文件的解析。当浏览器遇到HTML文档时，它开始从上到下解析它。但是，它可以归类为两种类型：增量和非收入解析。 ð

  • 增量HTML解析：浏览器通过识别和解析块中的 html 来实现这一目标，而不是等待整个文档被解析。 ð
  • 非收入CSS解析：浏览器识别并等待要下载的整个 css 文件，然后解析该文件。一个好的做法是将大型CSS文件分为多个较小的文件，以便在某种程度上可以实现增量解析。

构建DOM和CSOMð

当解析HTML和CSS时，浏览器构建了两个必需结构：DOM和CSSOM。 ð¢

  • dom（文档对象模型）：
    DOM
    DOM代表网页及其内容的层次结构，从而允许JavaScript访问和操纵元素。在解析过程中，浏览器会创建一个DOM树，这是渲染内容的基础。 ð²

  • CSSOM（CSS对象模型）：
    CSSOM
    CSOM代表网页的样式和布局信息。正确渲染页面至关重要。解析CSS时，浏览器会创建一个CSSOM，后来与DOM合并以产生渲染树。 ð -

渲染树建筑ð

Render Tree

渲染树是CRP中的关键步骤，因为它确定了屏幕上显示的内容。它是DOM和CSSOM的组合，但它排除了不打算渲染的元素，例如隐藏或屏幕外元素。该优化的树用于执行布局和油漆操作。 ð

多个渲染树层ð

一些HTML标签和CSS属性引入了多个渲染树层。例如：ðïm

  • iframe ：iframes创建单独的浏览上下文，从本质上嵌入了主页中的另一个网页。每个iframe都会生成自己的渲染树层。这允许在iFrame中隔离内容和独立的滚动和交互。 ð
  • 对象：对象元素用于嵌入外部资源，例如多媒体文件或交互式内容。像iFrame一样，它可以引入自己的渲染树层。 ð¥
  • 嵌入：类似于对象元素，嵌入用于嵌入外部内容，例如多媒体文件。它还创建了自己的渲染树层。 ðº
  • 视频：视频元素用于将视频内容嵌入网页中。它创建一个单独的渲染树层来管理视频播放和控件。这允许无缝的视频渲染和互动。 ð�
  • 音频：与视频元素类似，音频元素用于嵌入音频内容，并生成自己的渲染树层用于音频播放和控件。 ðµ
  • 画布：帆布元素为JavaScript提供了绘制表面，以渲染图形和动画。它为动态渲染操作创建了独特的渲染树层。 ð
  • svg ：可扩展的向量图形（SVG）元素（例如圆，rect和路径）在用于基于向量的图形和动画时生成自己的渲染树层。 ð¼ïß
  • 数学：使用MathML（数学标记语言）渲染数学方程式和公式。它为数学内容创建特定的渲染层。
  • iframe ：尽管前面提到，但值得重申，iframe通常用于嵌入外部内容并始终创建自己的独立渲染树层。 ð

这些元素将复杂性引入了网页渲染，并且Web开发人员在设计和优化网页时需要考虑其行为。仔细处理这些元素可以带来更好的性能和用户体验。 ðð¥！

布局和油漆ð¼ïm

  • 布局：
    Layout
    构造渲染树后，浏览器计算每个元素的布局，确定其在屏幕上的位置和大小。布局可以是资源密集型操作，应通过避免进行布局的JavaScript代码来最小化。 ð

  • 油漆：
    Paint
    一旦计算了布局，浏览器就可以在屏幕上绘制像素，将颜色，图像和样式应用于适当的位置。此过程也称为栅格化。 ð -

同步，异步和递延属性ð

Synchronous vs Async vs Defer

html 脚本元素通常包含影响JavaScript加载和执行的属性等属性。

  • 同步： 
<script src='./script.js'>

没有异步或递延属性的脚本块阻止HTML解析过程并立即执行。如果将脚本放在文档的头部，这可能会导致页面渲染较慢。 ð

  • 异步： 
<script src='./script.js' async>

带有异步属性的脚本是异步加载的，而HTML解析仍在继续。他们在下载后立即执行，这可能导致脚本执行订单，并可能引起问题。 ð

  • 延期： 
<script src='./script.js' defer>

带有延期属性的脚本也不同步加载，但是在HTML解析完成后，它们以其出现在文档中的顺序执行。这通常会带来更平滑的用户体验。 ð°

结论ð

了解关键渲染路径对于优化网页加载性能至关重要。通过理解常规/异步/递送属性的影响，DOM，CSSOM，渲染树，布局和涂料操作，增量解析，非收入解析以及由于特殊标签而存在多个渲染树层提高用户体验和页面加载时间的决策。在竞争激烈的数字景观中，掌握CRP是创建快速响应迅速的Web应用程序所必须的。 ðð