新手帮助当前位置:星鸿娱乐 > 新手帮助 > >

星鸿娱乐JS中script标签defer和async属性的区别详解

  

[script标签,defer和async]JS中script标签defer和async属性的区别详解

  

向html页面中插入javascript代码的主要方法就是通过script标签。其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件。由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染,对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟,为了避免这个问题,建议把全部的js引用放在标签之前。

  
  

  

  script标签存在两个属性,defer和async,因此script标签的使用分为三种情况:  
  

  

  1.

  
  
  

  

   没有defer或async属性,浏览器会立即加载并执行相应的脚本。也就是说在渲染script标签之后的文档之前,不等待星鸿娱乐平台后续加载的文档元素,读到就开始加载和执行,此举会阻塞后续文档的加载;  
  

  

  2.  
  

  

   有了async属性,表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的,即异步执行;  
  

  

  3.  
  

  

有了defer属性,加载后续文档的过程和js脚本的加载(此时仅加载不执行)是并行进行的(异步),js脚本的执行需要等到文档所有元素解析完成之后,DOMContentLoaded事件触发执行之前。

  
  

  

  下图可以直观的看出三者之间的区别:  
  

  

  

  

  其中蓝色代表js脚本网络加载时间,红色代表js脚本执行时间,绿色代表html解析。

  
  

  

  从图中我们可以明确一下几点:  
  
  

  

  1.defer和async在网络加载过程是一致的,都是异步执行的;  
  

  

  2.两者的区别在于脚本加载完成之后何时执行,可以看出defer更符合大多数场景对应用脚本加载和执行的要求;  
  

  

  3.如果存在多个有defer属性的脚本,那么它们是按照加载顺序执行脚本的;而对于async,它的加载和执行是紧紧挨着的,无论声明顺序如何,只要加载完成就立刻执行,它对于应用脚本用处不大,因为它完全不考虑依赖。

  
  

  

小结:  

  

defer 和 async 的共同点是都是可以并行加载JS文件,不会阻塞页面的加载,不同点是 defer的加载完成之后,JS会等待整个页面全部加载完成了再执行,而async是加载完成之后,会马上执行JS,所以假如对JS的执行有严格顺序的话,那么建议用 defer加载。

  

  

  

(责任编辑:admin)

上一篇:老生常谈js-react组件生命周期

下一篇:没有了

推荐内容

客户服务热线

010-400-12345

在线客服