资讯专栏INFORMATION COLUMN

script 标签的 defer 与 async

AWang / 2308人阅读

摘要:各自的特点延迟脚本立即下载。规范要求脚本按照它们出现的先后顺序执行,并且会在事件触发前执行。建议异步脚本不要在加载期间修改时不支持可选表示包含要执行代码的外部文件。特殊操作同时使用和。浏览器会忽视属性按照执行。

各自的特点

defer:延迟脚本

立即下载。不影响其他操作,如下载其他资源,HTML解析。

延迟执行。将延迟到整个页面都解析完毕后再运行,也就是到浏览器遇到标签后再执行。

理论按顺序执行,实际不是。HTML5 规范要求脚本按照它们出现的先后顺序执行,并且会在 DOMContentLoaded 事件触发前执行。但是,在现实中,延迟脚本并不一定会按照顺序执行,也不一定会在 DOMContentLoaded 事件触发前执行。(《JavaScript高级程序设计》(第三版))

最好只包含一个延迟脚本。

IE<=9时支持但会有bug

async: 异步脚本

立即下载。不影响其他操作,如下载其他资源,HTML解析。

立即执行。下载完既执行,暂停HTML解析。

不确定顺序执行。一定会在页面的 load 事件前执行,但不确定在 DOMContentLoaded 事件触发前后执行。

建议异步脚本不要在加载期间修改DOM

IE<=9时不支持

src : 可选表示包含要执行代码的外部文件。

外部JavaScript文件的.js扩展名不是必需的,因为浏览器不会检查包含JavaScript的文件的扩展名。如果不使用.js扩展名,请确保服务器能返回正确的MIME类型。

带有src属性的

结论

日常开发中就都放在底部。

对于完全独立的脚本来才去使用async。例如:Google Analytics

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/104786.html

相关文章

  • Script标签和脚本执行顺序 - 文档加载 - 面向浏览器编程

    摘要:相关脚本会立即下载并执行。从上面两个例子,可以充分了解到标签的柱塞式执行。表示该标签并不柱塞,也不同步执行。属性带有属性的脚本,同样会推迟脚本的执行,并且不会阻止文档解析。同时,带有的脚本彼此之间,能保证其执行顺序。 原文: http://pij.robinqu.me/Browser_Scripting/Document_Loading/ScriptTag.html 源...

    cangck_X 评论0 收藏0
  • 拒绝js阻塞—deferasync作用和区别分析

    摘要:阻塞原理浏览器内核可以分成两部分渲染引擎或者和引擎。等引擎运行完毕,浏览器又会把控制权还给渲染引擎,继续和的构建。执行时,解析暂停。从加载完成立即执行来看,模式执行顺序与写的顺序无关,不保证执行顺序。 js阻塞原理 浏览器内核可以分成两部分:渲染引擎(Layout Engine 或者 Rendering Engine)和 JS 引擎。早期渲染引擎和 JS 引擎并没有十分明确的区分,但随...

    wuaiqiu 评论0 收藏0
  • 重新认识script标签

    摘要:尽管脚本的下载过程中不会相互影响,但页面仍然要等到所有代码下载并完成执行才能继续。 defer和asnyc(只对外部文件有效) defer 在页面完成解析时执行代码,这个属性表明脚本在执行时不会影响页面的构造,在元素中设置这个属性相当于告诉浏览器立即下载但延迟执行 async 相对于页面其他部分异步执行脚本,一般的script标签都是会阻塞页面执行的,没有加上async属性的标签...

    Magicer 评论0 收藏0
  • 高性能JavaScript学习笔记-执行加载

    摘要:虽然会有阻塞但还是有几招可以减少对性能的影响的。下载资源是异步的但是执行代码的时候仍是同步的同样会造成阻塞。缺点文件必须与所请求页面处于同一个域这种情况下文件不能从下载不适合大型的应用。 浏览器在处理HTML页面渲染和JavaScript脚本执行的时候是单一进程的,所以在当浏览器在渲染HTML遇到了标签会先去执行标签内的代码(如果是使用src属性加载的外链文件,则先下载再执行),在这个...

    fou7 评论0 收藏0
  • 带你玩转prefetch, preload, dns-prefetch,deferasync

    摘要:紧接着发现,于是又停了,浏览器下载并执行完,继续。,发现,遂将中文字展示了出来。的执行时间是在所有元素解析完成之后,事件触发之前。的执行时间是在当前脚本下载完成后,所以多个是执行顺序是不固定的。至此,完美的结构出炉了。 现代浏览器性能优化-JS篇 众所周知,JS的加载和执行会阻塞浏览器渲染,所以目前业界普遍推荐把script放到之前,以解决js执行时找不到dom等问题。但随着现代浏览器...

    godiscoder 评论0 收藏0
  • 带你玩转prefetch, preload, dns-prefetch,deferasync

    摘要:紧接着发现,于是又停了,浏览器下载并执行完,继续。,发现,遂将中文字展示了出来。的执行时间是在所有元素解析完成之后,事件触发之前。的执行时间是在当前脚本下载完成后,所以多个是执行顺序是不固定的。至此,完美的结构出炉了。 现代浏览器性能优化-JS篇 众所周知,JS的加载和执行会阻塞浏览器渲染,所以目前业界普遍推荐把script放到之前,以解决js执行时找不到dom等问题。但随着现代浏览器...

    lewif 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<