JS之旅——js加载时间线漫谈
2023-11-12 12:51:58
一、浏览器与JS加载时间线
当浏览器开始运行一个页面时，它首先会初始化JS功能。在此过程中，浏览器按照顺序执行一系列操作，形成了一个JS加载时间线。这个时间线记录了谁在谁之前发生，谁在谁之后发生。
- 创建Document对象，开始解析web页面
此阶段，document.readyState = 'loading'。浏览器开始解析HTML代码，构建DOM树。
- 加载并解析CSS样式表
此阶段，document.readyState仍然为'loading'。浏览器会加载并解析CSS样式表，为DOM树中的元素应用样式。
- DOMContentLoaded事件触发
此阶段，document.readyState变为'interactive'。DOMContentLoaded事件触发，表示DOM树已构建完成，但页面中的资源（例如图片、脚本）可能尚未完全加载。
- 加载并执行JS脚本
此阶段，document.readyState仍为'interactive'。浏览器开始加载并执行JS脚本。
- onload事件触发
此阶段，document.readyState变为'complete'。onload事件触发，表示页面中的所有资源都已加载完成，页面可以正常显示和运行。
二、JS加载时间线详解
1. 创建Document对象，开始解析web页面
当浏览器开始加载一个页面时，它首先会创建一个Document对象。Document对象是页面中所有元素的容器。它包含了页面中的HTML代码、CSS样式表和JS脚本。
浏览器会开始解析HTML代码，构建DOM树。DOM树是一个层次结构，它表示页面中元素之间的关系。DOM树的根节点是元素。
2. 加载并解析CSS样式表
在构建DOM树的同时，浏览器也会加载并解析CSS样式表。CSS样式表包含了页面中元素的样式信息。
浏览器会将CSS样式表中的样式应用到DOM树中的元素上。这样，元素就会按照样式表中的规定显示出来。
3. DOMContentLoaded事件触发
当DOM树构建完成，但页面中的资源（例如图片、脚本）可能尚未完全加载时，DOMContentLoaded事件就会触发。
DOMContentLoaded事件是一个非常重要的事件。它标志着页面已经可以正常运行了。开发者可以利用这个事件来做一些事情，比如初始化页面中的JS脚本。
4. 加载并执行JS脚本
DOMContentLoaded事件触发后，浏览器就开始加载并执行JS脚本。JS脚本可以改变页面的内容和行为。
JS脚本的执行顺序是由脚本在HTML代码中的出现顺序决定的。先出现的脚本先执行，后出现的脚本后执行。
5. onload事件触发
当页面中的所有资源都已加载完成，页面可以正常显示和运行时，onload事件就会触发。
onload事件是一个非常重要的事件。它标志着页面已经完全加载完成。开发者可以利用这个事件来做一些事情，比如显示页面中的内容。
三、优化JS加载时间线
为了优化JS加载时间线，我们可以做以下几件事：
- 减少JS脚本的数量
JS脚本的数量越多，加载时间就越长。因此，我们应该尽量减少JS脚本的数量。
- 合并JS脚本
我们可以将多个JS脚本合并成一个脚本。这样，浏览器只需要加载一个脚本，就可以执行所有的JS代码。
- 使用CDN加载JS脚本
CDN可以帮助我们提高JS脚本的加载速度。CDN是一种分布式网络，它可以将JS脚本缓存到离用户最近的服务器上。这样，当用户加载JS脚本时，就可以从最近的服务器上加载，从而减少加载时间。
- 使用异步加载JS脚本
我们可以使用异步加载JS脚本。异步加载是指浏览器在加载页面时，不会等待JS脚本加载完成。这样，就可以提高页面的加载速度。
- 使用defer加载JS脚本
我们可以使用defer加载JS脚本。defer加载是指浏览器在加载页面时，会等待JS脚本加载完成，但不会执行JS脚本。这样，就可以提高页面的加载速度。
