我对JS延迟异步脚本的思考

关于延迟脚本的思考带有async和defer属性的脚本，相信大家都有所耳闻，但是它们真正的执行细节是怎样的呢？很少有文章认真研究它，可能有些人不注意细节，但实际上真正的技术工作和项目对性能要求极高，所以细节非常重要。它需要最近几个月不断的试验和自我尝试。一直在研究一些技术，比如linux、操作系统、算法等，希望能一直学到今年年底。小红书第四版出来后，我也花了很多时间看。对于延时脚本，我也做了实验，写了这篇总结。什么是延迟脚本？通过document.createElement('script')创建且不指定script.async=false的script标签，带有async和defer等属性，默认为异步defer脚本（必须是非内联脚本），如下：<！DOCTYPEhtml>以上7个脚本文件，其中common以非异步开头delayscript，其余指定延迟脚本的模式，分为async和defer两种。将document.createElement创建的标签插入默认的async模式开始实验。我一共写了2个async和2个defer标签，其他都是普通的。标签。其中async1.js有4000行代码，其他的只是一个console.log。第一个实验结果：再次刷新页面（注意我禁用了浏览器浏览器缓存），结果是：再次刷新，发现异步执行的时机和顺序不定。原因是：async告诉浏览器你不用等它下载解析完再加载页面，也不需要等它执行完再执行其他的Script，俗称异步执行脚本看下载执行时序和打印结果对比打印结果：对应的下载执行时序从上面可以看出下载时序async和normal模式是一样的并行下载，只是最后下载的是defer（http1.1有对并发数的限制，但这不是并发限制。当我删除commonreference时，发现defer总是最后一个下载）async和defer的两种模式，区别是：async告诉浏览器，它不会操作dom，你不必等到它被下载并解析后才加载页面，也不必等到它执行完再执行其他脚本，俗称异步执行脚本。多个异步不能保证它们的执行顺序。比如async1和async2不能按顺序执行defer是会解析到标签结束后执行，俗称脚本的延迟执行，多个defer可以按顺序执行，例如defer1而defer2解析到script标签后可以按顺序执行（其实顺序是不保证的），async直接下载解析到script标签，defer和上次下载一样：多个async或者defertags其实并不能保证顺序执行不会阻塞其他script标签内容的解析和页面渲染，它们都会在浏览器显示load事件之前执行，但是不保证是在load事件之前还是之后执行DomContentLoad事件。defer可能不会在async之后执行。从我的实验结果和书中对它们的分析可以看出，多个异步脚本的执行顺序受脚本文件大小的影响。在网络传输因素的特殊情况下，当所有的脚本文件都很小时，大概率结果是稳定的。注意异步延时脚本的执行顺序并不稳定，尽量只有一个异步延时脚本。你应该考虑使用什么场景而不是滥用它并写在最后的论文上。如果你想知道这一点，你必须自己去做。我可能写得不对。如果大家有问题或者更好的答案，可以参与下面的讨论，我一直认为有争议和反对的声音是好事。另外，如果觉得写的好对你有帮助，可以帮忙点击观看/点赞/关注。关注前端高峰公众号并回复：加群，即可入群领取3800G免费前端学习视频资源