Milica Mihajlija
如果某个第三方脚本降低了网页加载速度，您可以通过以下两种方式提高性能：
- 如果它无法为您的网站带来明确价值，请将其移除。
- 优化加载流程。
本文介绍了如何使用以下技术优化第三方脚本的加载过程：
- 对
<script>标记使用async或defer属性 - 与必需的源建立早期连接
- 延迟加载
- 优化第三方脚本的提取方式
使用 async 或 defer
由于同步脚本会延迟 DOM 构建和渲染，因此除非脚本必须在网页渲染之前运行，否则您应始终异步加载第三方脚本。
async 和 defer 属性会告知浏览器，它可以在后台加载脚本时继续解析 HTML，然后在脚本加载后执行该脚本。这样，脚本下载不会阻塞 DOM 构建或页面呈现，让用户可以在所有脚本都加载完毕之前看到页面。
<script async src="script.js">
<script defer src="script.js">
async 和 defer 属性的区别在于浏览器执行脚本的时间。
async
具有 async 属性的脚本会在下载完成后、窗口的 load 事件之前，在有机会时执行。这意味着，async 脚本可能不会按其在 HTML 中的显示顺序运行。这也意味着，如果在解析器仍在运行时下载完成，则可以中断 DOM 构建。
async 的脚本仍可能会阻止 HTML 解析。defer
具有 defer 属性的脚本会在 HTML 解析完全完成之后，但在 DOMContentLoaded 事件之前执行。defer 可确保脚本按照其在 HTML 中的显示顺序运行，并且不会阻塞解析器。
defer 的脚本会等到浏览器完成解析 HTML 后再运行。- 如果您希望脚本在加载过程中尽早运行，请使用
async。 - 对重要性较低的资源（例如折叠线下方的视频播放器）使用
defer。
使用这些属性可以显著加快网页加载速度。例如，Telegraph 推迟了所有脚本的加载时间，包括广告和分析脚本，平均缩短了广告加载时间 4 秒。
尽早建立与必需源的连接
通过尽早与重要的第三方来源建立连接，您可以节省 100-500 毫秒的时间。
此时，两个 <link> 类型 preconnect 和 dns-prefetch 可以派上用场：
preconnect
<link rel="preconnect"> 会告知浏览器您的网页想要与其他来源建立连接，并且您希望该过程尽快开始。当浏览器从预连接的来源请求资源时，下载会立即开始。
<link rel="preconnect" href="https://cdn.example.com">