本文深入探讨了HTML中script标签的async与defer属性，解析两者如何优化脚本加载，不影响DOM渲染，及它们在执行顺序上的关键差异。
script标签用于加载脚本与执行脚本，在前端开发中可以说是很重要的。
但是若是直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载执行的过程中，会阻塞后续的DOM渲染。
解决出现在同一个文件中，可以在页面中引用各种的第三方脚本，如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。 所以script提供了两种方式来解决上述问题，async和defer，这两个属性使得script都不会阻塞DOM的渲染。
但既然会存在两个属性，那么就说明，这两个属性之间肯定是有差异的。
下面简述一下这两者的区别：
defer：
script标签设置了该属性，则浏览器会异步的下载该文件并且不会影响到后续DOM的渲染；
如果有多个设置了defer的script标签存在，则会按照顺序执行所有的script；
总而言之，defer的作用就是让脚本在文档完全呈现出之后执行，延迟脚本总是按照他们的顺序执行，这种情况下一般 把脚本放在页面最后，即<body>中。
async：
async的设置，会使得script脚本异步的加载并在允许的情况下执行 async的执行，并不会按着script在页面中的顺序来执行，而是谁先加载完谁执行。、
总而言之，async 属性就是可以表示当前脚本不必等待其他脚本，不阻塞文档呈现。会在需要的时候加载，不按照 页面顺序执行
扫一扫
1696
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
