script的三种加载方式

原创 啦啦啦123 译文 script 75阅读 24 天前 举报
script三种加载方式

一、不带任何属性

当浏览器解析到script标签时,浏览器会停止解析其后的内容,而优先下载脚本文件,并执行其中的代码,是个同步阻塞的过程。

而如果想要异步执行script,则可以给其加上async或defer属性。

二、async属性

async属性会在HTML解析期间异步下载文件,并在完成下载后暂停HTML解析器去执行script中的代码。

三、defer属性

defer属性在HTML解析期间异步下载文件,并且只在HTML解析完成后才执行它。

那么这三种方式各在什么情况下使用呢?

通常来说,尽可能使用async,然后是defer,最后不使用属性。
并遵循以下规则:

  1. 如果脚本之间有依赖关系不要用async,因为多个async脚本下载与解析的顺序是不一定的。
  2. 如果脚本很小并且异步脚本依赖该脚本,则不加属性。
兼容性

1、Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持 async 属性。
2、所有主流浏览器都支持 defer 属性。

参考链接

https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复