Javascript读书笔记-defer和async的区别

defer和async的区别

浏览器同步加载js脚本,当渲染引擎遇到script标签时就会停止渲染。当脚本执行完毕后继续渲染。 如果引入外部脚本并且外部脚本特别大,很容易造成浏览器长时间无响应且用户体验差。 由此出现了两种异步加载js的方式defer和async：

1. defer

渲染引擎遇到此行立即下载外部脚本,但要等到dom结构完全生成之后(以及其他脚本执行完成)之后再执行

2. async

渲染引擎遇到此行立即下载外部脚本,下载完后渲染引擎就会停止渲染立即执行这个文件。待执行结束,再继续渲染。

3.总结

defer是先渲染再执行

如果有多个defer脚本,则按照出现顺序加载

async是先执行再渲染

如果有多个sync脚本,下载完成即可执行

转载于:https://juejin.im/post/5b1938dc5188257d4215405f