Loading... # [JavaScript的异步加载](https://blog.csdn.net/m0_55527208/article/details/130235183) ## js的异步加载 JavaScript是单线程执行，即代码会一行一行自上而下执行，正常来讲，浏览器是同步加载js代码的，但是一旦遇到网速不好，或者加载的js代码文件过大，容易造成页面阻塞，整个网站将等待js加载而不进行后续的渲染工作，影响交互体验。 如：HTML元素按照其页面出现顺序渲染，此时js获取DOM对象，若DOM结构还没有加载完成，就会获取到空对象。 ```html <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script type="text/javascript"> const ul = document.querySelector('ul') console.log(ul) // null const li = document.createElement('li') li.innerHTML = '123' ul.appendChild(li) // Uncaught TypeError: Cannot read properties of null (reading 'appendChild') </script> </head> <body> <ul></ul> </body> ``` > **这是因为js是一行一行代码执行，js加载执行在DOM结构之前，故为null。解决：通常把< script >放在后面DOM结构后面。** **js异步加载** 就是 **等页面加载完成之后再加载js文件** 。有助于提高页面故加载速度。 ## js异步加载的三种方式 ### ①defer异步加载 #### 特点：需要等到dom文档全部解析完才会被执行，ie特有 ```js <script type = 'text/javascript' src = tools.js' defer = 'defer'></script> <script type = 'text/javascript' src = tools.js' defer ></script> ``` ### ②async异步加载 #### 特点：加载完就执行，async只能加载外部脚本，不能把js写在script标签里面 ```html <script type = 'text/javascript' src = 'tools.js' async="async"></script> ``` ### ③动态创建script标签 ```hs //tools.js function test() { console.log('hello world') } ``` //在页面中引入tools.js，并执行里面的方法 ```html <script script type = 'text/javascript'> const script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'tools.js'; document.head.appendChild(script); test () // Uncaught ReferenceError: test is not defined </script> ``` #### 问题 当程序执行至 test（） 时，前面的 script.src="tools.js" 还没加载完毕。 #### 解决 ##### ①设置在1秒之后执行，即等js下载完后再执行 ```html <script script type = 'text/javascript'> var script = doccumrnt.createElement('script'); script.type = 'text/javascript'; script.src = 'tools.js'; document.head.appendChild(script); setInterval(function(){ test (); },1000) </script> ``` ②监听是否加载完毕 ```html // 兼容性好，但不适用于ie <script script type = 'text/javascript'> const script = doccumrnt.createElement('script'); script.type = 'text/javascript'; script.src = 'tools.js'; script.onload = function (){ test(); } document.head.appendChild(script); </script> // 适用于ie <script script type = 'text/javascript'> const script = doccumrnt.createElement('script'); script.type = 'text/javascript'; script.src = 'tools.js'; script.onreadystatechange = function(){ if(script.readyState == 'complete || script.readyState == 'loaded'){ test(); } } </script> ```html ##### 兼容性写法 ```html <body> <script type='text/javascript'> function scriptLoad(url, callback) { const script = document.createElement('script'); script.type = 'text/javascript'; if (script.readyState) { script.onreadystatechange = function() { if (script.readyState == 'complete' || script.readyState == 'loaded') { callback(); } } } else { script.onload = function() { callback(); } } script.src = url; // 防止出现网速太快造成事件监听不到变化 document.head.appendChild(script); } scriptLoad('index.js', test) // Uncaught ReferenceError: test is not defined </script> </body> ```html 报错原因：页面用到 test（）时， script.src 还没有加载。解决：将 test,js 写成对象形式 ```html //tools.js // function test() { // console.log('hello world') // } const tools = { test: function() { console.log('hello world') } } <body> <script type='text/javascript'> function scriptLoad(url, callback) { const script = document.createElement('script'); script.type = 'text/javascript'; if (script.readyState) { script.onreadystatechange = function() { if (script.readyState == 'complete' || script.readyState == 'loaded') { tools[callback]() } } } else { script.onload = function() { tools[callback]() } } script.src = url; // 防止出现网速太快造成事件监听不到变化 document.head.appendChild(script); } scriptLoad('index.js', 'test') </script> </body> ``` 有时候为了将DOM文档解析完之后执行js代码，便将js写在DOM文档结构之后，但是这样写不够美观。解决：监听页面是否加载完成 ```js window.addEventListener('load',function(){.....}); // 1、页面所有的东西加载并且执行完之后才执行的方法，假如页面其中任何一个src的资源没被加载，该onload事件便无法执行。运行效率慢 document.addEventListener('DOMContentLoaded',function(){.....},false); // 2、当纯 HTML 被完全加载以及解析时，事件会被触发，而不必等待样式表，图片或者子框架完成加载。 效率较高 在你的脚本有机会运行前，DOMContentLoaded可能就已经被触发。所以在决定添加一个事件监听器前最好先检查一下。只能用addEventListener来监听时间是否触发 function doSomething() { console.info('DOM loaded'); } if (document.readyState === 'loading') { // 此时加载尚未完成 document.addEventListener('DOMContentLoaded', doSomething); } else { // 此时`DOMContentLoaded` 已经被触发 doSomething(); } ``` ## 了解js加载时间线 浏览器在开始运行一个页面时，会初始化js功能，当js开始作用时，记录了一系列浏览器按照顺序做的事情，也就是一个执行顺序。 js时间线： 1、创建Document对象，开始解析web页面，解析HTML元素和文本内容后，添加Element对象和Text节点到文档中，这个节点document.readyState="loading" 2、遇到 link 外部 css，创建线程，进行异步加载，并继续解析文档。 3、遇到 script 外部 js，并且没有设置 async、defer，浏览器同步加载，并阻塞，等待 js 加载完成并执行该脚本，然后继续解析文档。 4、遇到 script 外部 js，并且设置有 async、defer，浏览器创建线程异步加载，并继续解析文档。（异步禁止使用 document.write()） 注意： 1、async 属性的脚本，脚本加载完成后立即执行。defer属性脚本要等到dom解析完成后再执行。 2、异步禁止使用 document.write()：因为整个文档解析到差不多，再调用document.write()，会把之前所有的文档流都清空，用它里面的文档代替。除了异步禁止，而且当内容全部加载完毕后也要禁止使用document.write()，也就是window.onload。 5、遇到 img 等（带有 src），先正常解析 dom 结构，然后浏览器异步加载 src，并继续解析文档。看到标签直接生产 dom 树，不用等着 img 加载完 src。 6、当文档解析完成（domTree 建立完毕，不是加载完毕，解析在加载之前），document.readyState = 'interactive'。 7、文档解析完成后，所有设置有 defer 的脚本会按照顺序执行。（注意与 async 的不同,但同样禁止使用 document.write()）; 8、文档解析完成后，document 对象触发 DOMContentLoaded 事件，这也标志着程序执行从同步脚本执行阶段，转化为事件驱动阶段。 9、当所有 async 的脚本加载完成并执行后、img 等加载完成后（页面所有的都执行加载完之后），document.readyState = 'complete'，window 对象触发 load 事件。 10、从此，以异步响应方式处理用户输入、网络事件等。 最后修改：2023 年 08 月 28 日 © 允许规范转载 赞 如果觉得我的文章对你有用，请随意赞赏
1 条评论
你的文章充满了欢乐，让人忍不住一笑。 http://www.55baobei.com/6AjWgz4hBQ.html