共计 3201 个字符，预计需要花费 9 分钟才能阅读完成。
什么是 js 加载时间线？
浏览器在开始运行一个页面的时候，首先它会初始化 js 功能，当 js 发挥它的功能时候，记录了一系列浏览器按照顺序做的事情，也就是一个执行顺序，谁在谁之前发生，谁在谁之后发生。
js 时间线主要步骤：[创建 document 对象开始——> 文档解析完——> 文档加载完并执行完]
1. 创建 Document 对象，开始解析 web 页面。这个阶段 document.readyState = ‘loading’.
代码验证：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js 加载时间线测试 </title>
</head>
<body>
<script type="text/javascript">
console.log(document.readyState);
</script>
</body>
</html>执行结果：
2.遇到 link 外部 css，创建线程，进行异步加载，并继续解析文档。
3.遇到 script 外部 js，并且没有设置 async、defer，浏览器同步加载，并阻塞，等待 js 加载完成并执行该脚本，然后继续解析文档。
4.遇到 script 外部 js，并且设置有 async、defer，浏览器创建线程异步加载，并继续解析文档。（异步禁止使用 document.write()）
⚠️ 注意：**async 属性的脚本，脚本加载完成后立即执行。defer 属性脚本要等到 dom 解析完成后再执行。
⚠️ 注意：（异步禁止使用 document.write()，因为当你整个文档解析到差不多，再调用 document.write()，会把之前所有的文档流都清空，用它里面的文档代替，除了异步禁止，而且当内容全部加载完毕后也要禁止使用 document.write()，也就是 window.onload，document.write 任何情况下都不要用，其实也没啥用）
代码验证：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js 加载时间线测试 </title>
</head>
<body>
<div style="width: 100px;height: 100px;background-color: red;"></div>
<script type="text/javascript">
document.write('hello world')
</script>
</body>
</html>执行结果：
在 window.onload 后再次验证
代码验证：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js 加载时间线测试 </title>
</head>
<body>
<div style="width: 100px;height: 100px;background-color: red;"></div>
<script type="text/javascript">
window.onload = function(){document.write('hello world')
}
</script>
</body>
</html>执行结果：
5.遇到 img 等（带有 src），先正常解析 dom 结构，然后浏览器异步加载 src，并继续解析文档。看到标签直接生产 dom 树，不用等着 img 加载完 scr。
6.当文档解析完成（domTree 建立完毕，不是加载完毕，解析在加载之前），document.readyState = ‘interactive’。
代码验证：
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js 加载时间线测试 </title>
</head>
<body>
<script type="text/javascript">
//document 创建时候的状态
console.log(document.readyState);
// 当 dom 解析完成后的状态（dom 树建立完成后）document.onreadystatechange = function () {console.log(document.readyState);
}
</script>
</body>
</html>
执行结果：
7.文档解析完成后，所有设置有 defer 的脚本会按照顺序执行。（注意与 async 的不同, 但同样禁止使用 document.write()）;
8. 文档解析完成后，document 对象触发 DOMContentLoaded 事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。
代码验证：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js 加载时间线测试 </title>
</head>
<body>
<script type="text/javascript">
//document 创建时候的状态
console.log(document.readyState);
// 当 dom 解析完成后的状态（dom 树建立完成后）document.onreadystatechange = function () {console.log(document.readyState);
}
// 这里要注意 DOMContentLoaded 比较特殊，必须绑定在 addEventListener 上好使
document.addEventListener('DOMContentLoaded',function(){console.log('来呀！快活呀！');
},false)
</script>
</body>
</html>执行结果：
⚠️ 注意：** 我们要注意的是 DOMContentLoaded 事件比较特殊，它必须绑定在 addEventListener 上好使，用 onDOMContentLoaded 绑定没用.
在 jquery 中有一个 $(document).ready(function(){}) 方法，这个方法就是当 dom 解析完就执行的部分。
// 当 dom 解析完就执行的部分
$(document).ready(function(){// 这里面写着主函数体})这个 ready 方法经常会在面试中问到，ready 和 window.onload 的区别？
区别：区别就是 ready 方法快，window.onload 慢，因为 ready 是 dom 解析完就执行，而 window.onload 则是加载完再执行。ready 方法的底层原理就是依据 document.readyState 变成 interactive 和DOMContentLoaded 事件
9.当所有 async 的脚本加载完成并执行后、img 等加载完成后（页面所有的都执行加载完之后），document.readyState = ‘complete’，window 对象触发 load 事件。
10.从此，以异步响应方式处理用户输入、网络事件等。
『好啦，以上呢就给大家的分享啦，欢迎大家留言，谢谢支持~』
