亲宝软件园·资讯

展开

script标签中的defer和async使用技巧说明

藏锋de刃 人气:0

script标签用于加载脚本与执行脚本,在前端开发中可以说是非常重要的标签了。
直接使用script脚本的话,html会按照顺序来加载并执行脚本,在脚本加载&执行的过程中,会阻塞后续的DOM渲染。

image

普通script:

image

普通script总结:

image

defer:

defer 总结:

defer推荐使用场景:

如果你的脚本代码依赖于页面中的DOM元素(文档是否解析完毕),或者被其他脚本文件依赖。

例:

image

async:

async总结:

async推荐使用场景:

如果你的脚本并不关心页面中的DOM元素(文档是否解析完毕),并且也不会产生其他脚本需要的数据。

例:

1. 百度统计和Google Analytics

image

image

普通script, defer, async同时存在页面中:

由于4,5这两点, 所以async脚本执行与普通script, defer脚本无关, 那个时间点都有可能执行。

注意:defer,async只对外联script脚本文件有效, 内联script脚本设置无效。

加载全部内容

相关教程
猜你喜欢
用户评论