web性能优化基础篇之 HTML 解析

牛牛_lz
359 阅读2分钟

这是我参与11月更文挑战的第8天，活动详情查看：2021最后一次更文挑战

浏览器的组成

浏览器是由外壳、浏览器引擎、渲染引擎、JS引擎、网络等组成。

  • 外壳：用户可以看到的界面，包括地址栏、后退/前进按钮、书签目录等。
  • 浏览器引擎：可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器中各个部分之间相互通信的核心。
  • 渲染引擎：解析DOM文档和CSS规则并将内容排版到浏览器中显示有样式的界面，常说的浏览器内核主要指的就是渲染引擎。
  • 网络：用来完成网络调用或资源下载的模块。
  • JS引擎：用来解释执行JS脚本的模块，如 V8 引擎、JavaScriptCore。

HTML解析过程

一个示例，一段 HTML 代码，index.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        console.log('hello world')
    </script>
    <style type="text/css">
      a:visited{
        color: red;
      }
    </style>
</head>
<body>
    <h1>Hello world.</h1>
    <script src="jquery.min.js"></script>
</body>
</html>

HTML解析的流程是：下载HTML → 解析HTML → 构建DOM树 → 下载css → 解析css → 构建css树 → 下载js → 执行js

image.png

在此过程中 html 的解析会被 js 的下载和执行阻塞。css的下载和解析会阻塞 js 的执行，因为在 js 中可能会读取 css 的属性值。

在浏览器解析传入的html代码的时候，当执行到script这个标签的时候，就会发送一个http请求，下载JS代码，并且这个时候html会被阻塞，下载之后，JS代码会被执行，这个时候html线程仍被阻塞，直到JS代码执行完毕才会继续执行html代码。（因为我们在解析js的时候，有可能会对html的DOM产生影响，可能会有 document.write. 这意味着，在当前 JS 加载和执行完成前，后续所有资源的下载有可能是没必要的。这是 JS 阻塞后续资源下载的根本原因。

最后说一句

如果这篇文章对您有所帮助，或者有所启发的话，帮忙关注一下，您的支持是我坚持写作最大的动力，多谢支持。

avatar
文章
阅读
粉丝