script标签应该放在 HTML 中的什么位置？总结分享

几年前，经验丰富的程序员总是要求我们把script的标记放在页面的底部。

显然浏览器现在有了更好的兼容性方法。在这篇文章中，我将向您介绍 script 的新的 async 和 defer 特性，并讨论 script 应该更好地定位在哪里。

页面加载方式

在讨论标签应该放在页面的什么位置之前，我们先看看当页面加载标签时会发生什么？

当浏览器加载带有 标签的网页时，会发生以下情况：

1. 获取html页面（例如index.html）
开始解析 HTML
2. 解析器遇到指向外部脚本的链接
3. 浏览器请求脚本文件和解析器块并停止解析页面上的其他 HTML
4. 一段时间后，脚本将被下载并随后启动
5. 解析器将继续解析 HTML 文档的其余部分

步骤 4 会导致糟糕的用户体验，您的网站将基本上停止加载并变得无响应，直到您下载所有脚本。

如果您的脚本文件很大，对用户体验的影响可能是致命的。

为什么会出现这种情况？

每个脚本都可以使用 document.write() 或其他 DOM 操作插入自己的 HTML。这意味着解析器必须等到脚本下载并执行后才能安全地解析文档的其余部分。该脚本可以将自己的 HTML 插入到文档中。

然而，大多数 JavaScript 开发人员在加载文档时不再处理 DOM。相反，他们会等到文档加载后再进行任何编辑。例如：

    
        我的页面
        
    
    
欢迎回来，用户
    


// my-script.js
document.addEventListener("DOMContentLoaded", function() {
    // 当 DOM 准备好时，即当文档被解析时，该函数运行
    document.getElementById("用户问候语").textContent = "欢迎回来巴特";
});

因为你的浏览器在下载并运行之前不知道my-script.js没有修改文档，所以解析器遇到script后就会停止解析。

旧解决方案

处理这个问题的旧方法是将 标签放在 的末尾，因为这可以确保解析器不会阻塞到最后。

这种方法有其自身的问题：浏览器在解析整个文档之前无法开始下载脚本。对于具有大型脚本和样式表的大型站点，尽快下载脚本的能力对于性能非常重要。如果您的网站在 2 秒内未加载，人们就会转到另一个网站。

在最佳解决方案中，浏览器在解析文档的其余部分时尽快开始下载脚本。

现代化解决方案

如今的浏览器支持脚本的异步和延迟属性。这些属性告诉浏览器在下载脚本时可以安全地继续解析。

异步

具有 async 属性的脚本是异步执行的。这意味着脚本将在下载后立即运行，而不会阻塞浏览器。
这意味着脚本 2 可以在脚本 1 之前下载并运行。

根据https://codeqd.com/zb_users/upload/2023/09/

推迟

具有snooze 属性的脚本按顺序执行（即先执行脚本1，然后执行脚本2）。它也不会阻止浏览器。

与异步脚本不同，延迟脚本仅在整个文档加载后才执行。

根据https://codeqd.com/zb_users/upload/2023/09/ 98.06% 至少部分支持。

有关浏览器兼容性的重要说明：IE