您的位置：首页 > 常用工具 > JS完美收官之——js加载时间线

JS完美收官之——js加载时间线

类别：常用工具更新时间：2023-04-29 11:01:25

34
人气值
19
已收藏
16
正在玩

官方下载 ()

无广告安全小编亲测

简介推荐34相关

JS完美收官之——js加载时间线

生活大于技术

链接每一位开发者，让编程更有趣！

JS完美收官之——js加载时间线

知识点来自独一教育CEO——程哥全包式教学

什么是js加载时间线？

当浏览器开始运行一个页面时，首先会初始化js函数。 js在执行功能的时候，记录了浏览器按顺序做的一系列事情js页面加载完成后执行，也就是一个执行顺序，谁先于谁，谁先于谁。

js时间轴的主要步骤：【开始创建对象-->完成解析文档-->完成加载并执行文档】

1.创建一个对象，开始解析网页。这个阶段。 =''。

代码验证：

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

结果：

JS完美收官之——js加载时间线

2、遇到link外部css，创建一个线程，进行异步加载，继续解析文档。

3.当遇到外部js且没有设置async和defer时，浏览器同步加载并阻塞，等待js加载完成并执行脚本，然后继续解析文档。

4、遇到外部js，设置了async和defer，浏览器创建线程异步加载，继续解析文档。（异步禁止使用.write()）

⚠️ 注意：具有异步属性的脚本在脚本加载后立即执行。 defer属性脚本要等到dom解析完成后才会执行。

⚠️ 注意：（异步禁止使用.write()，因为当你整个文档解析的差不多了，再调用.write()，之前的所有文档流都会被清空，替换成里面的文档，异步禁止除外,并且当所有内容都加载完毕后，.write()的使用也是禁止的，即任何情况下都不要使用.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>

结果：

JS完美收官之——js加载时间线

之后再次验证

代码验证：

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

结果：

JS完美收官之——js加载时间线

5、遇到img等（带src），先正常解析dom结构，然后浏览器异步加载src，继续解析。看标签直接生成dom树，不用等img加载scr。

6. 解析文档时（创建，未加载，加载前解析），. = ''。

代码验证：

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

结果：

JS完美收官之——js加载时间线

7. 文档解析完成后，所有带defer的脚本都会依次执行。（注意它不同于async，但是也禁止使用.write()）；

8、文档解析完成后，对象触发事件，这也标志着程序执行从同步脚本执行阶段向事件驱动阶段转变。

代码验证：

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

结果：

JS完美收官之——js加载时间线

⚠️注意：需要注意的是，事件比较特殊，必须绑定才能使用，绑定是没有用的。

里面有个$().ready((){ })方法，就是在解析dom的时候执行的部分。

//当dom解析完就执行的部分$(document).ready(function(){  //这里面写着主函数体})

这个ready方法在面试中经常被问到，ready和.ready有什么区别。

区别：区别在于ready方法是fast和.slow，因为ready是在解析完DOM之后执行的，.是在之后执行的。 ready方法的底层原理是基于。成为和事件

9、当所有async脚本加载执行完毕js页面加载完成后执行，加载img等（所有页面执行加载完成后），. = '', 对象触发加载事件。

10. 从此以后，在异步响应中处理用户输入、网络事件等。

展开内容

精彩推荐 +