大家好，我是半夏👴，一个刚刚开始写文的沙雕程序员.如果喜欢我的文章，可以关注➕ 点赞 👍 加我微信：frontendpicker，一起学习交流前端，成为更优秀的工程师～关注公众号：搞前端的半夏,了解更多前端知识! 点我探索新世界！

前言

在开始学习之前，最好了解过一些Html的基础知识。因为这一章节介绍的是script标签，如果你还不了解少么是标签，还需要去了解html的基础知识。

script 标签

在 HTML 中，JavaScript 代码通常插入在<script>和</script>标签之间。

<script> 
// 这里是你的 JS 代码
</script>

您可以在 HTML 文档中放置任意数量的脚本。脚本可以放在<body>，或<head>HTML 页面的部分，或两者中。

在Html文档中可以编写任意多的script标签，编写任意多的js代码。script标签可以放在<body>，或<head>中。

放在body和head的区别

这样做的原因是 HTML 从上到下加载。头部首先加载，然后是身体，然后是身体内部的所有东西。如果我们将 JavaScript 放在 head 部分，整个 JavaScript 将在加载任何 HTML 之前加载，这可能会导致一些问题：

如果JavaScript 中有代码会在 JavaScript 代码加载时立即更改 HTML，那么实际上还没有任何可用的 HTML 元素对其产生影响，因此看起来 JavaScript 代码似乎不起作用，而您可能会出错。
如果有很多 JavaScript，它会明显减慢页面的加载速度，因为它会在加载任何 HTML 之前加载所有 JavaScript。

当您将 JavaScript 放在 HTML 正文的底部时，它会在任何 JavaScript 加载之前让 HTML 有时间加载，这可以防止错误并加快网站响应时间。

让我们通过一个例子来了解更多（不要担心我使用的语法，你只需要了解我们想要做什么）。

放在head中

新建test.html

编写代码

有如下的代码,代码的逻辑是，将文本的颜色设置为绿色。

<html>
  <head>
    <script>
      document.querySelector("#demo").style.color = "green";
    </script>
  </head>
  <body>
    <p id="demo">改变颜色</p>
  </body>
</html>

运行

在浏览器中运行test.html。效果如下：字体的颜色并没有变成绿色。

这里我们可以重新验证上文说的：脚本在p标签之前加载了。在加载脚本的时候，是无法找到p标签的，最终导致无法改变颜色。

放在body中

现在让我们尝试相反的方法，在 body 的底部：

<html>
  <head>
  </head>
  <body>
    <p id="demo">改变颜色</p>
    <script>
      document.querySelector("#demo").style.color = "green";
    </script>
  </body>
</html>

还有一件事：虽然最好将 JavaScript 包含在 HTML 的末尾<body>，但将 JavaScript 放在<head>HTML 的中并不总是会导致错误。

外部 JavaScript

JavaScript 也可用于外部文件。JavaScript 文件的文件扩展名为“.js”。要使用外部脚本，请将脚本文件的名称放在脚本标记的 src 属性中。

| <script  src="myScript.js"></script>

外部 JavaScript 的优点：

将 JavaScript 代码放在外部 js 文件中比内联脚本有一些优势：

分离 HTML 和 JavaScript 代码将有助于更轻松地管理代码库。
设计人员可以与编码人员并行工作而不会发生代码冲突。
适用于现代源代码版本控制系统，例如 GIT。这意味着这些文件中的每一个都将维护一个历史记录，并且可以由多个程序员签入、签出。
代码和 HTML 都易于阅读。
外部 JavaScript 文件由浏览器缓存，可以加快页面加载时间。
许多流行的 JavaScript 包都托管在内容交付网络 (cdn) 上，您可以使用src 中的 URL 简单地指向它们*，*从而避免将 js 文件复制到本地文件夹。

script标签到底放在哪里

以下是浏览器加载带有<script>标签的网站时发生的情况：

获取 HTML 页面（例如index.html）
开始解析 HTML
解析器遇到<script>引用外部脚本文件的标记。
浏览器请求脚本文件。同时，解析器会阻止并停止解析页面上的其他 HTML。
一段时间后，脚本被下载并随后执行。
解析器继续解析 HTML 文档的其余部分。

第 4 步会导致糟糕的用户体验。在下载所有脚本之前，网站基本上会停止加载。用户此时就需要等待网站加载。

为什么会发生这种情况？

任何脚本都可以通过document.write()或其他 DOM 操作插入自己的 HTML 。这意味着解析器必须等到脚本下载并执行后才能安全地解析文档的其余部分。毕竟，脚本可以在文档中插入自己的 HTML。

然而，大多数JavaScript开发人员不再操作DOM ，而该文件是加载。相反，他们会等到文档被加载后再修改它。例如：

<!-- index.html -->
<html>
    <head>
        <title>My Page</title>
        <script src="my-script.js"></script>
    </head>
    <body>
        <div id="user-greeting">script标签</div>
    </body>
</html>

JavaScript：

// my-script.js
document.addEventListener("DOMContentLoaded", function() {
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

因为您的浏览器不知道my-script.js在下载和执行之前不会修改文档，所以解析器停止解析。

过时的推荐

解决这个问题的旧方法是将<script>标签放在 . 的底部<body>，因为这样可以确保解析器直到最后才被阻塞。

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

现代解决方案：异步和延迟

异步async

<script src="path/to/script1.js" async></script>
<script src="path/to/script2.js" async></script>

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

根据http://caniuse.com/#feat=script-async，97.78% 的浏览器都支持这个。

延迟defer

<script src="path/to/script1.js" defer></script>
<script src="path/to/script2.js" defer></script>

具有 defer 属性的脚本按顺序执行（即第一个脚本 1，然后是脚本 2）。这也不会阻止浏览器。

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

根据http://caniuse.com/#feat=script-defer，97.79% 的浏览器都支持这个。98.06% 至少部分支持它。

【零基础学JS -3】深入剖析script标签

前言