理解html中script标签的defer与async属性

html中script标签的defer与async属性

经常会在一些地方看到一些 < script > 标签带上了defer和async,总是搞不清楚两者的具体区别,于是想记录下来。
从单词语义上来,defer代表延迟,async代表异步。那么我们就有一个基本的概念了。然后我们慢慢分析。

  • defer是html4.0中定义的,该属性使得浏览器能延迟脚本的执行,等文档完成解析完成后会按照他们在文档出现顺序再去下载解析。也就是说defer属性的< script >就类似于将< script >放在body的效果。

  • async是HTML5新增的属性,IE10和浏览器都是支持该属性的。该属性的作用是让脚本能异步加载,也就是说当浏览器遇到async属性的< script >时浏览器加载css一样是异步加载的。

如果没有defer和async

< script > 标签如果没有带上defer 或 async属性的话,浏览器会立即加载并执行标签内的脚本,意思大概是不等待后续载入的文档元素,读到这个< script > 标签就加载并执行。

如果有defer

defer的意思是延迟,也就是说延迟执行,除了这一点,加载的过程是异步的。那么就很好解释了,当遇到


                    
                    

你可能感兴趣的:(WEB前端,html)