浏览器解析器从上至下进行解析,遇到script标签,解析停止,直至脚本加载执行完毕。

在html中插入script的方法:外部脚本,内嵌脚本

script属性:
async(异步脚本):可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或 等待加载其他脚本。一定会在页面的 load 事件前执行,但可能会在 DOMContentLoaded 事件触发之前或之 后执行。
defer(延迟脚本):可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有 效。延迟到</html>再加载,当含有两个defer的script标签,理论上会按照顺序加载,先于DOMContentLoaded事件,实际上有可能会乱序(不靠谱),也不一定会先于DOMContentLoaded事件。


蓝色线代表网络读取,红色线代表执行时间,这俩都是针对脚本的;绿色线代表 HTML 解析。
async和defer
共同点:net阶段都是异步的。只适用于外部脚本。
不同点:执行阶段不同。
async更适合它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的,最典型的例子:Google Analytics

浏览器在遇到<body>标签时才开始呈现内容

其他大佬关于这块内容写的文章

网站为什么 JS 调用尽量放到网页底部? https://www.zhihu.com/questio...
JavaScript 的性能优化:加载和执行
https://www.ibm.com/developer...
JavaScript 启动性能瓶颈分析与解决方案 https://zhuanlan.zhihu.com/p/...
Effective前端7:加快页面打开速度 https://zhuanlan.zhihu.com/p/...
《浏览器的工作原理:新式网络浏览器幕后揭秘》https://www.html5rocks.com/zh...


阿升
555 声望19 粉丝