适用场景

在框架的时代下，web原生的页面生命周期相关知识经常会被开发遗忘，前不久项目中引入sdk时需要在onload之前引入sdk，就将页面生命周期重新复习了一下。

相关概念

async和defer

在 HTML 中，

defer 属性用于异步加载 JavaScript 文件，但要等到 HTML 页面完全渲染完毕后再执行 JavaScript 代码。也就是说，这些脚本的执行会被推迟到文档完全被解析和显示之后。多个有 defer 属性的脚本会按照它们在文档中出现的顺序依次执行，不会阻塞 HTML 文档的解析和渲染。

async 属性也用于异步加载 JavaScript 文件，但是与 defer 不同，async 属性指示浏览器在下载 JavaScript 文件时不需要等待 HTML 文档的解析和渲染，而是立即下载和执行 JavaScript 代码。多个有 async 属性的脚本的执行顺序不能保证，执行顺序与下载完成的先后顺序有关。

总的来说，defer 属性用于确保脚本按照它们在文档中的顺序执行，并在文档解析完毕后执行，而 async 属性用于立即下载和执行脚本，而不会阻止 HTML 文档的解析和渲染。在选择使用 defer 或 async 属性时，需要考虑代码的执行顺序和依赖关系，以确保代码的正确性。

在加载和执行脚本时，可以使用async和defer来控制脚本的行为。它们在不同的场景下有不同的适用性：

async：当你希望立即开始下载脚本，并且下载完成后立即执行脚本时，可以使用async属性。这种方式不会阻塞页面的渲染和其他资源的加载。适用于那些不依赖于其他脚本或文档结构的独立脚本。

htmlCopy code

<script async src="script.js"></script>

defer：当你希望延迟脚本的执行，直到文档完全解析和渲染完成后再执行，可以使用defer属性。脚本的下载也会在后台进行，不会阻塞页面的渲染。适用于那些需要访问和操作文档结构的脚本。

htmlCopy code

<script defer src="script.js"></script>

需要注意的是，async和defer只对外部脚本（通过src属性引入的脚本）起作用，对于内联脚本（在<script>标签中直接编写的脚本），不会应用这些属性。

load和# DOMContentLoaded

DOMContentLoaded —— 浏览器已完全加载 HTML，并构建了 DOM 树，但像 <img> 和样式表之类的外部资源可能尚未加载完成。
load —— 浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。

外部样式表不会影响 DOM，因此 DOMContentLoaded 不会等待它们。

浏览器解析

解析的意思是将一个元素通过一定的方式转换成另一种形式。比如 html 的解析。首先要明确，html 下载到浏览器的表现形式就是包含字符串的文件。浏览器将 html 文件里面的字符串读取到内存中，按照 html 规则，对字符串进行取词编译，将字符串转化成另一种易于表达的数据结构。我们看下一段代码：

遇到 script 标签时，首先阻塞后续内容的解析，同时检查该script是否已经下载下来，如果已下载，便执行代码。
遇到 link 标签时，不会阻塞后续内容的解析（比如 DOM 构建），检查 link 资源是否已下载，如果已下载，则构建 cssom。
遇到 DOM 标签时，执行 DOM 构建，将该 DOM 元素添加到文档树中。
有一点要注意的是，在 body 中第一个 script 资源下载完成之前，浏览器会进行首次渲染，将该 script 标签前面的 DOM 树和 CSSOM 合并成一棵 Render 树，渲染到页面中。这是页面从白屏到首次渲染的时间节点，比较关键。

有一点要注意的是，在 body 中第一个 script 资源下载完成之前，浏览器会进行首次渲染，将该 script 标签前面的 DOM 树和 CSSOM 合并成一棵 Render 树，渲染到页面中。这是页面从白屏到首次渲染的时间节点，比较关键。
有一点要注意的是，在 body 中第一个 script 资源下载完成之前，浏览器会进行首次渲染，将该 script 标签前面的 DOM 树和 CSSOM 合并成一棵 Render 树，渲染到页面中。这是页面从白屏到首次渲染的时间节点，比较关键。

sample

性能统计

– connectStart：HTTP（TCP）开始建立连接的时间。如果是持久连接，则和 fetchStart 的时间相等，注意，如果在传输层发生了错误且重新建立连接，这里显示的是新建立连接的开始时间。

connectEnd: 完成建立连接的时间。
domComplete：DOM 树解析完成，并且资源准备就绪的时间，Document.readyState 变为 complete，并将抛出 readystatechange 相关事件。
domContentLoadedEventEnd：DOM 解析完成后，网页内资源加载完成的时间（如 JS、css 加载执行完毕）。
domContentLoadedEventStart：DOM 解析完成后，网页内资源加载开始的时间在 DOMContentLoaded 事件抛出前发生。
loadEventStart：load 事件触发，也即 load 回调函数开始执行的时间。注意：如果没有绑定 load 事件，值为 0。
loadEventEnd：load 事件的回调函数执行完毕的时间。