非阻塞加载脚本

最新推荐文章于 2025-08-08 17:07:36 发布

原创最新推荐文章于 2025-08-08 17:07:36 发布 · 99 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

本文详细介绍了HTML5中script标签的async与defer属性的作用及区别，并提供了兼容性解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.HTML5实现了script的async属性，这个新的属性可以让js在浏览器中以非阻塞的模式加载，另外script还有一个defer属性，这个属性目前所有浏览器都已实现（除了firefox和chrome的早期版本），IE这方面做得好，从一开始就支持些属性。

 
       1: //async <!--CRLF--> 
       2: <script async src="dquery.js" async></script> 
       1:   
        <!--CRLF--> 
       2: //defer 
        <!--CRLF--> 
       3: <script async src="dquery.js" defer> 
        <!--CRLF--></script> <!--CRLF-->
   

2.async和defer的区别：

带有async或者defer的script都会立刻下载并不阻塞页面解析,而且都提供一个可选的onload事件处理, 在script下载完成后调用,用于做一些和此script相关的初始化工作。它的不同之处在于async一旦下载完成就立即执行（在window.onload事件之前），不确保执行的顺序，而defer能确保js是在按照其在页面中的顺序执行（在DOMContentLoaded事件之前）。

3.为了解决浏览器兼容问题可以使用下面的代码进行处理

 
       1: function lazyload() { <!--CRLF--> 
       2:      var elem = document.createElement("script"); <!--CRLF--> 
       3:      elem.type = "text/javascript"; <!--CRLF--> 
       4:      elem.async = true; <!--CRLF--> 
       5:      elem.src = "js/dquery.js?v=11"; //对应的JS文件  <!--CRLF--> 
       6:      document.body.appendChild(elem); <!--CRLF--> 
       7:  } <!--CRLF--> 
       8:    <!--CRLF--> 
       9:  if (window.addEventListener) { <!--CRLF--> 
      10:      window.addEventListener("load", lazyload, false); <!--CRLF--> 
      11:  } else if (window.attachEvent) { <!--CRLF--> 
      12:      window.attachEvent("onload", lazyload); <!--CRLF--> 
      13:  } else { <!--CRLF--> 
      14:      window.onload = lazyload;} <!--CRLF-->
   