三张图搞懂defer跟async

  1. 脚本没有defer跟async，浏览器会加载并执行该脚本，会阻塞后续文档的执行
  2. 加了defer的js，浏览器会加载该js，不会影响后续文档的执行，等文档全部加载完，再执行该js

  3. 加了async的js，浏览器加载js，不会影响后续文档的执行，但是加载完js，执行的时候会影响后续文档的执行


    image.png

不加defer跟async的js


image.png

加了defer的js


image.png

加了async的js


image.png
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 简述async和defer
    defer和async是script标签的两个属性，用于在不阻塞页面文档解析的前提下，控制脚本的下载和执行。先了解...
    小囧兔阅读 632评论 1赞 2
  • JS中关于async和defer作用与区别
    没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下...
    饥人谷_Shirley阅读 967评论 0赞 0
  • async和defer
    async和defer 没有defer或者async，浏览器会立刻加载并执行脚本，“立即”指的是在渲染该scrip...
    mianmiani阅读 214评论 0赞 0
  • script标签中 async 和 defer 的区别
    浏览器在解析 HTML 的时候，如果遇到一个没有任何属性的script标签，就会暂停解析，先发送网络请求获取该 J...
    又重重复了阅读 1,537评论 0赞 0
  • async和defer
    加载异步 没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 scrip...
    饥人谷_tanfei阅读 207评论 0赞 0