2023-03-03 script标签 defer async

1. script元素和页面解析的关系

  1. 浏览器在解析HTML的过程中,遇到了script元素是不能继续构建DOM树的;

    • 首先下载JavaScript代码,并且执行JavaScript的脚本;

    • 到JavaScript脚本执行结束后,才会继续解析HTML,构建DOM树;

  2. 因为JavaScript的作用之一就是操作DOM,并且可以修改DOM;

    • 如果我们等到DOM树构建完成并且渲染再执行JavaScript,会造成严重的回流和重绘,影响页面的性能;

    • 所以会在遇到script元素时,优先下载和执行JavaScript代码,再继续构建DOM树;

2. defer属性

  1. defer 属性告诉浏览器不要等待脚本下载,而继续解析HTML,构建DOM Tree

  2. 是不会阻塞DOM Tree的构建过程;

  3. 如果脚本提前下载好了,它会等待DOM Tree构建完成,在DOMContentLoaded事件之前先执行defer中的代码;

  4. 多个带defer的脚本是可以保持正确的顺序执行的。

  5. defer可以提高页面的性能,并且推荐放到head元素中;

注意:defer仅适用于外部脚本,对于script默认内容会被忽略。

3. async属性

  1. 浏览器不会因 async 脚本而阻塞
  2. async脚本不能保证顺序,它是独立下载、独立运行,不会等待其他脚本;

4. 总结

1. defer通常用于需要在文档解析后操作DOM的JavaScript代码,并且对多个script文件有顺序要求的;

2. async通常用于独立的脚本,对其他脚本,甚至DOM没有依赖的;

1

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容