关键的渲染路径
#html #browser #rendering

网站有两个重要方面：

  1. 速度
  2. 看

即使对于经验丰富的Web开发人员，提高网站的页面渲染速度也容易做起来难。要到达那里，我们必须理解“关键渲染路径”一词的含义，以了解我们如何减少它并提高页面呈现的速度。

什么是关键渲染路径？

工程师是指创建网页初始视图所需的代码和资源作为“关键渲染路径”。我们将其标记为“关键”，因为这样做会导致“死亡的白屏”，直到所有必要的页面元素呈现并使其可见为止。网页的“初始视图”也被称为“折叠上方”信息。一系列相当复杂的互动可以构成关键的渲染路径。如果我们了解它们如何影响彼此，我们可以决定如何以最佳方式组织零件。

我为什么要关心？

  1. 优化关键的渲染路径可以使浏览器尽快绘制页面：更快的页面转化为更高的参与度，查看更多页面和改进的转换。”
  2. 为了最大程度地减少访客花费查看空白屏幕的时间，我们需要优化哪些资源已加载以及按什么顺序进行。

关键渲染路径的主要组成部分

  1. 网络开销（Web服务器响应时间） ：请记住，单元网络始终具有更长的“延迟”（也称为往返时间）比其他类型的网络。

  2. html代码： 没有文档对象模型并完全下载的html，我们根本无法呈现网页。外部链接。在新的标签中打开。 （DOM）浏览器正在创建的树。这些事件发生后，渲染就可以开始。

  3. css ：还必须创建DOM并应用于CSSOM，即CSS语言自己的对象模型。渲染过程被CSSOM构建阶段停止。

  4. webfonts ：这些是必须下载的字体才能在页面上使用它们。

  5. javaScript： javaScript可能是代码中最具破坏性的组件，因为它可以与HTML和CSS进行交互。除非采取其他措施，否则浏览器会在下载和运行JavaScript时停止渲染。

图像即使它们是网站上最重的部分，也不需要特殊的手，因为它们不是DOM树的一部分。

考虑以下内容：
我们没有考虑到

获取资源的时间
  1. 缓存或
  2. 网络。

考虑以下内容：

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Critical Path: No Style</title>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg" /></div>
  </body>
</html>

Check It Out

没有任何CSS或JavaScript，我们将从简单的HTML代码和单个图像开始。让我们通过在Chrome DevTools中打开网络时间表来检查生成的资源瀑布：

WaterFall for the html

过程：

  1. HTML文件的预测下载时间为340毫秒。
  2. 请注意，蓝线的固体部分表示收到第一个响应字节后完成下载所需的时间字节。
  3. 由于HTML下载太小（4K），因此检索整个文件仅需要一个往返。—
  4. 因此，必须获取HTML内容，大约需要340ms，其中一半在网络上等待，另一个在服务器上等待。
  5. 浏览器解析字节，将它们转换为令牌，并在提供HTML内容后立即创建DOM树。
  6. DevTools在底部（595ms）轻松地报告了DOMContentLoaded事件的时间，这也与蓝色的垂直线相匹配。在这种情况下，浏览器需要浏览器组装DOM树的时间，只有几毫秒的时间由HTML下载末端和蓝色垂直线（Domcontentloaded）之间的空间显示。
  7. 如前所述，“很棒的照片”不会阻止domContentLoad事件。

在谈论CRP时，我们只谈论HTML标记，CSS和JavaScript的加载机制。

Content Load Time

现在在混音中添加JavaScript和CSS 

<!DOCTYPE html>
<html>
  <head>
    <title>Critical Path: Measure Script</title>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link href="style.css" rel="stylesheet" />
  </head>
  <body onload="measureCRP()">
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg" /></div>
    <script src="timing.js"></script>
  </body>
</html>

Check it out

Time span with CSS and Javascript

外部CSS和JavaScript文件通过两个请求增加了我们的瀑布，浏览器大约在同一时间发送了所有请求。但是，观察到Domcontentload和Onload事件之间的间隔现在要短得多。

这是为什么？

  1. 与我们的普通html示例相反，我们还需要获取和解析CSS文件以创建CSSOM，并且为了创建渲染树而需要DOM和CSSOM。
    2. 。
  2. domcontentloaded事件被延迟，直到CSS文件下载并进行解析，因为该页面还包含一个解析器封锁JavaScript文件。因为JavaScript可能会查询CSSOM，所以我们必须延迟JavaScript执行，直到下载CSS文件为止。

让我们讨论如果在下一篇文章中使用内联脚本代替我们的外部脚本会发生什么。