关键渲染路径优化：CSS, JS与首次加载策略-优快云博客

本文链接：https://blog.youkuaiyun.com/AnitaSun/article/details/121777542

概述

优化关键渲染路径能够让浏览器尽可能快地绘制网页
如果要尽快提供首次绘制，那么早些响应 domContentLoaded 事件
如果存在CSS资源
- 当不存在media属性时：domContentLoaded 事件需要等待 CSSOM 和 DOM 构建完成
- 存在media属性时：根据属性值判断在特定条件下等待 CSSOM 和 DOM 构建完成；一般情况下 DOM 构建完成相应 domContentLoaded
如果存在js资源
- 当不存在async属性时：domContentLoaded 事件需要等待js执行完毕，js执行需要等待CSSOM 构建完成，但不需要等待DOM 构建完成，如果js中出现使用未解析的DOM的情况的话，直接报错
- 当存在async属性时：domContentLoaded 事件不需要等待js执行完毕
在解析HTML文档过程中，按照顺序进行解析，如果遇到资源，告诉浏览器主进程去下载。

有关js中async和defer问题：
async：不会延迟domContentLoaded的响应时间，在 CSSOM 和 DOM 构建完成之后就会相应domContentLoaded
defer：延迟脚本的执行，在 document.onload之后执行
js download 时机：和普通资源一样，HTML解析到它就开始下载，下载之后就执行（如果不加 defer）

HTML 页面资源下载顺序

HTML + img

<!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>

在这里插入图片描述

DOMContentLoaded：蓝线【DOM 文档构建完毕】
当HTML内容可用后，浏览器会解析字节，将它们转换成令牌，然后构建DOM树
document.onload：红线【所有资源都下载完毕】
并非所有资源都对快速提供首次绘制具有关键作用，当我们谈论关键渲染路径时，通常谈论的是 HTML 标记、CSS 和 JavaScript。图像不会阻止页面的首次渲染。

HTML + CSS + js

<!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>

添加 JavaScript 和 CSS 之前
添加 JavaScript 和 CSS 之后
要想构建渲染树，DOM 和 CSSOM 缺一不可
Javascript 解析会阻止DOMContentLoaded事件的响应，Javascript 要想解析，必须等待CSSOM构建完成之后
如果用内联脚本替换外部脚本

onload 和 domContentLoaded 时间实际上没有变化

添加 async 关键字

<!DOCTYPE html>
<html>
  <head>
    <title>Critical Path: Measure Async</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 async src="timing.js"></script>
  </body>
</html>

解析 HTML 之后不久即会触发 domContentLoaded 事件；浏览器已得知不要阻止 JavaScript，并且由于没有其他阻止解析器的脚本，CSSOM 构建也可同步进行了

同时内联CSS和Javascript

<!DOCTYPE html>
<html>
  <head>
    <title>Critical Path: Measure Inlined</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <style>
      p { font-weight: bold }
      span { color: red }
      p span { display: none }
      img { float: right }
    </style>
  </head>
  <body>
    <p>Hello <span>web performance</span> students!</p>
    <div><img src="awesome-photo.jpg"></div>
    <script>
      var span = document.getElementsByTagName('span')[0];
      span.textContent = 'interactive'; // change DOM text content
      span.style.display = 'inline';  // change CSSOM property
      // create a new element, style it, and append it to the DOM
      var loadTime = document.createElement('div');
      loadTime.textContent = 'You loaded this page on: ' + new Date();
      loadTime.style.color = 'blue';
      document.body.appendChild(loadTime);
    </script>
  </body>
</html>

domContentLoaded 时间与前一示例中的时间实际上相同；只不过没有将 JavaScript 标记为异步，而是同时将 CSS 和 JS 内联到网页本身。这会使 HTML 页面显著增大，但好处是浏览器无需等待获取任何外部资源，网页已经内置了所有资源