如何巧妙运用defer和async标签优化网页加载性能？

本文共计1653个文字，预计阅读时间需要7分钟。

`script` 标签用于加载和执行脚本，是前端开发中不可或缺的标签。它可以直接嵌入 HTML 文档中，按照出现的顺序加载并执行脚本。在脚本加载执行过程中，会阻塞后续的页面内容渲染。

script标签用于加载脚本与执行脚本，在前端开发中可以说是非常重要的标签了。
直接使用script脚本的话，html会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的DOM渲染。

普通script:

• 文档解析的过程中，如果遇到script脚本,停止页面的解析渲染,下载script脚本。
• 如果是多个script脚本, 近似于同时并行下载script脚本。(虽然说是遇到script脚本, 就停止后面标签的解析渲染; 但chrome做了优化, 遇到script脚本, 会快速的查看后边有没有需要下载其他资源的, 一起并行下载, 为了节省一部分下载的时间。)
• 不论script脚本哪个先下载好, 都按照html中的先后顺序依此执行。 即如果后面的script脚本先下载好, 要等前面的script脚本下载好并执行后, 才能执行。
• 执行script脚本时, 也是停止页面的解析渲染。
• 执行完script脚本, 继续页面的解析渲染。
• 执行完script脚本和页面解析渲染完, 才会依此触发DOMContentLoaded, loaded事件

普通script总结:

• 1.普通script的下载和执行都阻塞页面的解析渲染。