文章来自：https://www.toutiao.com/article/7159540386376155655/?app=news_article×tamp=1666970295&use_new_style=1&req_id=20221028231814010141069013005BBE7D&group_id=7159540386376155655&tt_from=mobile_qq&utm_source=mobile_qq&utm_medium=toutiao_android&utm_campaign=client_share&share_token=0df59534-ee6f-44a8-b6c0-420c0cb3681c&source=m_redirect

【经过我个人实践试验】：头部head里的外部加载JS代码，不要加这个defer属性

# ————————————————————————————
在面试的时候，经常会遇到一道经典的面试题：

如何优化网页加载速度？

常规的回答中总会有一条：

把 css 文件放在页面顶部，把 js 文件放在页面底部。

那么，为什么要把 js 文件放在页面的最底部呢？



浏览器的解析规则是：如果遇到 script 标签，则暂停构建 DOM，转而开始执行 script 标签，如果是外部 script，那么浏览器还需要一直等待其「下载」并「执行」后，再继续解析后面的 HTML。


如果请求并执行「vue.global.js」需要 3 秒，「vue-router.global.js」需要 2 秒，那么页面中的 Hello ~，则至少需要 5 秒以上才会展示出来。





可以看到，script 标签会阻塞浏览器解析 HTML，如果把 script 都放在 head 中，在网络不佳的情况下，就会导致页面长期处于白屏状态。

在很久以前，一般都是将这些外联脚本，放在 body 标签的最后面，确保先解析展示 body 中的内容，然后再一个个请求执行这些外联脚本。

那有没有其他更优雅的解决方案呢？

答案是肯定的，现在 script 标签新增了 2 个属性：defer 和 async，就是为了解决此类问题，提升页面性能的。