第2篇：吃透<script>与<noscript>标签吃透两个标签的核心用途、`<script>`标签的两种使用方式+`

大家好，我是橘朵~ 上一篇我们说的是JS的基础定义、三大组成（ECMAScript、DOM、BOM），对JS有了初步认知。这一篇我们进入实操第一步——JS代码怎么嵌入网页？核心就是两个标签：<script>和<noscript>。

这两个标签是JS入门的“敲门砖”，后续我们写的所有JS代码，几乎都离不开它们；而且新手最容易在这两个标签上踩坑（比如忘记写标签、混淆async和defer、放错标签位置）。

适合人群：零基础前端新手、刚入门JS，不知道怎么嵌入代码的开发者；

阅读收获：吃透两个标签的核心用途、<script>标签的两种使用方式+async/defer区别+放置位置技巧、<noscript>兜底用法，能独立完成JS代码的基础嵌入。

1. 先搞懂核心：为什么需要这两个标签？

上一篇我们知道，ECMAScript是JS的核心语法，DOM能让JS操作网页元素，但有个关键问题：我们写好的JS代码（ECMAScript语法），不能直接放在HTML页面里运行——就像我们写好的稿子，需要一个“文件夹”装起来，才能被别人看到；而<script>和<noscript>标签，就是JS代码的“载体”和“兜底方案”。

<script> 标签：JS代码的“核心载体”，用来嵌入、引入JS代码，告诉浏览器“这里是JS代码，快执行它”；

<noscript> 标签：JS的“兜底保障”，当浏览器不支持JS、或用户禁用JS时，显示提示内容，避免页面空白。

没有<script>标签，浏览器根本认不出这是JS代码，只会当普通文本忽略——新手一定要记住，<script>标签是JS代码运行的“前提”。

2. 重点吃透`<script>`标签：JS代码的“核心载体”

HTML 中的 <script>标签是网页添加动态行为和交互功能的主要工具，<script>允许嵌入或引用JavaScript代码。<script>标签是我们最常用、最核心的标签，几乎所有JS代码，都要靠它来嵌入或引入。下面从“核心用途、两种使用方式、async/defer属性（新手必懂）、放置位置”四个方面来讲一讲<script>标签。

2.1 核心用途

简单说，<script>标签的作用就一个：给JS代码“找个家”，告诉浏览器“这里面/这里引入的是JS代码，请你识别并运行它” 。它就像一个专门装JS代码的“容器”，把JS代码和HTML代码区分开，让浏览器能精准找到JS，执行对应的交互逻辑。

举个最基础的例子：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>script标签基础实例</title>
</head>
<body>
    <!-- 没有script标签，JS代码无法运行 -->
    <!-- 有script标签，浏览器会执行里面的JS代码 -->
    <script>
        // 弹出提示框
        alert("JS代码运行成功啦！");
        // 控制台打印内容（调试常用，按F12打开控制台查看）
        console.log("这是第一个带script标签的JS代码");
    </script>
</body>
</html>

把这段代码保存为.html文件，用浏览器打开，会弹出提示框，打开控制台（F12）能看到打印的内容；如果删掉<script>和</script>标签，再打开页面，没有任何反应——这就是<script>标签的核心作用。

2.2 `<script>`元素的用法

<script>有两种使用方式：内联式(JS代码写在标签内部)，外部引用（JS代码写在单独的.js文件里，通过标签引入）。两种方式日常开发都常用，下面就来讲一讲他们的区别、用法和适用场景。

2.2.1 内联式： JS代码写在 `<script>`标签内部

适用场景：代码量少、逻辑简单的交互（比如弹出提示框、简单的变量测试、单个按钮的点击事件），不用单独创建JS文件，直接写在HTML里，方便快捷、不用切换文件。

<script>中的代码会从上到下解释，在<script>元素中的代码被计算完成之前，页面的其余内容不会被加载，也不会被显示。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内联式script示例</title>
</head>
<body>
    <h3>点击按钮查看提示</h3>
    &lt;button id="btn"&gt;点击我&lt;/button&gt;

    <!-- 内联式：script标签内部写JS代码，放在按钮后面 -->
    <script>
        // 获取按钮元素（呼应上一篇的DOM知识点）
        let btn = document.getElementById("btn");
        // 给按钮绑定点击事件
        btn.onclick = function() {
            alert("你点击了按钮，内联JS执行成功！");
            // 修改按钮文字（DOM操作）
            btn.innerText = "已点击";
        };
    </script>
</body>
</html>

内联式虽然方便，但不能写太多代码——如果代码量超过10行（比如多个按钮、复杂的表单校验），建议用外部引用方式；否则HTML页面会变得杂乱，后续修改、维护起来特别麻烦。

2.2.2 外部引用：引入单独的JS文件（日常开发主流）

适用场景：代码量多、逻辑复杂的项目，把JS代码单独放在.js后缀的文件里，和HTML文件分离，方便维护、复用（比如多个HTML页面，都能引用同一个JS文件，不用重复写代码），这也是我平时开发中最常用的方式。

与解释行内代码一样，在解释外部 JavaScript 文件时，页面也会阻塞，阻塞时间也包含下载文件的时间。

简单示例：通过 src属性引用外部的 .js文件

<script src="example.js"></script>

实战案例：

第一步：创建单独的JS文件（命名为index.js，建议和HTML文件放在同一个文件夹，方便引用，不用写复杂路径），写入JS代码：

// index.js 文件（外部JS文件，专门放JS代码）
// 注释要写清楚，方便后续维护（新手养成习惯）
// 1. 获取按钮元素
let btn = document.getElementById("btn");
// 2. 给按钮绑定点击事件
btn.onclick = function() {
    alert("这是外部引用的JS代码，执行成功！");
    // 修改按钮样式（补充DOM操作，呼应上一篇）
    btn.style.backgroundColor = "lightblue";
    btn.style.color = "white";
};
// 3. 控制台打印，确认JS文件引入成功
console.log("外部JS文件引入成功，可正常执行！");

第二步：在HTML文件中，用<script>标签的src属性，引入这个JS文件：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外部引用script示例</title>
</head>
<body>
    <h3>点击按钮查看外部JS效果</h3>
    <button id="btn">点击我</button>

<!-- 外部引用：通过src属性引入JS文件，路径要写对 -->
    <script src="index.js"></script>
</body>
</html>

新手避坑：

使用了src 属性的<script>标签不应该再在<script>和</script>标签中再包含其他 JavaScript 代码。如果行内代码和src属性同时存在，浏览器会忽略行内代码，只下载并执行src属性中的脚本文件。

比如下面这个错误示例，内部的alert永远不会执行：

<!-- 错误示例：外部引用+内部写代码，内部代码无效 -->
<script src="index.js">
    alert("我是内部代码，不会执行！"); // 无效，会被忽略
</script>

2.3 核心属性：async和defer（区别是重点）

一张表格了解<script>标签的属性：

属性	说明
src	指定外部脚本文件的URL。
type	指定脚本语言的内容类型(MIME类型)。如果省略 `type` 属性，浏览器会默认将其值视为 `text/javascript`。如果值为`module`，代码会被当成ES6模块处理，这时代码中可允许使用`import`和`export`关键字。
async	异步加载(只对外部脚本有效) 。浏览器会立即开始下载脚本，但不会阻止其他页面动作，比如下载资源或等待其他脚本加载，即并行下载脚本，下载完成后立即暂停HTML解析并执行该脚本。多个`async`脚本不保证能按照它们出现的次序执行。
defer	延迟执行(只对外部脚本有效)，最好只包含一个`defer`脚本。表示浏览器会并行下载脚本，`defer`脚本会延迟到HTML文档完全被解析和显示之后再按顺序执行，通常在`DOMContentLoaded`事件之前执行 ****。
integrity	子资源完整性(SRI)校验。比对接收到的资源的哈希值和指定的加密签名是否匹配，如果不匹配，则页面会报错，脚本不会执行。这个属性可以用于确保内容分发网络（CDN）不会被篡改而提供恶意内容。
crossorigin	配置相关跨域请求的CORS（跨源资源共享）设置，经常用于处理跨域脚本的错误日志记录。默认不使用CORS。属性值"anonymous" 配置文件请求不必设置凭据标志。属性值“use-credentials"设置凭据标志，意味着出站请求会包含凭据。
nomodule	布尔值，用于在不支持ES6模块的旧浏览器中提供回退脚本。

async和defer这两个属性是新手最容易混淆、也最容易忽略的点，也是面试高频考点。它们只适用于“外部引用” 的<script>标签（内联式用不了），作用是“控制JS代码的加载和执行顺序”，避免JS代码加载阻塞页面渲染（比如页面还没加载完，JS代码先执行，导致获取不到DOM元素，报错）。

不用深究底层原理，新手先懂用法即可。

2.3.1 无async/defer（默认情况）

JS代码会“同步加载、同步执行”。

缺点：如果JS文件很大（比如引用第三方库），加载时间长，页面可能会卡住、空白，用户体验极差。

实战示例，感受下卡顿：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>无async/defer示例（卡顿）</title><!-- 引用一个较大的JS库（模拟大文件），无任何属性 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
</head>
<body>
    <h3>页面加载中...（无async/defer，会卡顿）</h3>
    <p>如果页面空白时间长，就是JS加载阻塞了渲染</p>
</body>
</html>

2.3.2 async属性：“异步加载，加载完立即执行”

async属性只适用于外部脚本，浏览器加载页面时，会“一边加载JS文件，一边渲染页面”（不阻塞页面渲染、不阻塞其他资源加载），等JS文件加载完成后，立即执行JS代码（不管页面有没有渲染完）。

适用场景： async属性并不保证能按照它们出现的次序执行，所以JS代码之间要没有依赖关系（比如单独的统计代码、广告代码、不操作DOM的工具函数），不需要等其他JS文件或页面渲染完成，加载完就执行即可。

实战示例：对比无属性，感受不卡顿

<!DOCTYPE html>  
<html>  
 <head>  
 <title>Example HTML Page</title>  
 <!-- 引用大文件，加async，不阻塞页面渲染 -->
    < script  async  src = "https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js" "></ script > 
 </head>  
 <body>  
     <h3>页面正常加载（async属性，不卡顿）</h3>
    <p>页面先渲染，JS加载完成后再执行</p> 
 </body>  
</html>

2.3.3 defer属性：“异步加载，页面渲染完再执行”（日常开发主流）

defer 属性只对外部脚本文件才有效。这是 HTML5 中明确规定的，所以支持 HTML5 的浏览器会忽略行内脚本的 defer 属性。浏览器加载页面时，也是“一边加载JS文件，一边渲染页面”（不阻塞页面、不阻塞其他资源），但会等整个页面渲染完成后，再执行JS代码；而且如果引入多个带defer的JS文件，会按引入顺序执行（这是和async最大的区别）。

适用场景：JS代码需要操作页面元素（比如获取按钮、修改文字、操作DOM），依赖页面渲染完成——这也是我平时开发中最常用的属性（80%的外部JS引用都会加defer），能完美避免“获取不到DOM元素”的报错。

实战示例：操作DOM，不报错

<!-- defer属性：异步加载，页面渲染完再执行，操作DOM不报错 -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>defer属性示例（操作DOM）</title&gt;
    <!-- 加defer，即使放在head里，操作DOM也不报错 -->
    <script src="index.js" defer></script>
</head>
<body>
    <button id="btn">点击我</button>
</body>
</html>

对应的index.js文件：

// index.js 文件
let btn = document.getElementById("btn");
btn.onclick = function() {
    alert("defer属性，操作DOM不报错！");
};
console.log("页面渲染完成后，我才会执行");

虽然HTML5规范中要求脚本按顺序执行，但实际上，推迟执行的脚本不一定按顺序执行或在DOMContentLoaded事件之后执行，所以建议最好只对一个脚本设置**defer**属性。

早期的浏览器可能不支持defer属性，还是把要推迟执行的脚本放在页面底部比较好。

2.3.4 async和defer核心区别（新手必记）

这是新手最容易混淆的点，用一个对比表格，把“加载方式、执行时机、执行顺序、适用场景”都列清楚：

属性	加载行为	执行时机	执行顺序	对 DOMContentLoaded 的影响	适用场景
无属性(默认)	同步加载(阻塞页面渲染)	JS加载完立即执行	按引入顺序执行	必须等待所有同步脚本执行完成才触发	JS文件极小（几行代码），无依赖、不操作DOM
async	异步加载(不阻塞)	JS加载完立即执行(不管页面)	不按引入顺序（谁先加载完谁先执行）	不阻塞触发，但可能在事件前后执行	无依赖的独立JS（统计、广告代码）
defer	异步加载(不阻塞)	DOM渲染完再执行	按引入顺序执行	等待其执行完成才触发（但比同步脚本更晚）	操作DOM、有依赖的JS（日常开发主流）

补充：如果有两个JS文件，A依赖B（比如A要用B里的函数），用async的话，可能A先加载完执行，导致报错；用defer的话，按引入顺序（先B后A）执行，就不会报错——这就是defer在日常开发中更常用的原因。

优先异步加载：使用 async 或 defer 属性避免阻塞渲染。

script.async = true; // 异步加载，不阻塞页面

2. 错误处理与重试：监听 onerror 事件并实现重试机制：

script.onerror = () => {
  console.error('加载失败，尝试重试...');
  setTimeout(() => loadScript(url), 2000);
};

3. 缓存策略：添加时间戳或版本号避免缓存旧脚本：

script.src = `${url}?v=${Date.now()}`;

4. 结合现代工具链： 使用 Webpack 的动态导入（Dynamic Import）或 ES Modules 实现标准化动态加载

import('module.js').then(module => {
  module.init();
});

推荐使用场景：按需加载、模块化架构、性能敏感型页面。
不推荐场景：简单页面、无明确性能需求的小型项目。
关键权衡：在灵活性与维护成本之间取得平衡，优先使用框架（如 Vue/React）的官方动态加载方案

2.3.5 扩展： `load 事件与 DOMContentLoaded 的区别？`

页面执行顺序：DOM 树解析完成->DOMContentLoaded->所有资源(图片、js、css等)加载完成-> load 。可以发现，**DOMContentLoaded更早，而load**更晚。

从性能优化角度建议：

优先使用 DOMContentLoaded ：尽早执行 DOM 操作(比如表单验证、动态绑定事件等)，减少用户等待时间。
避免同步脚本阻塞解析 ：和<style>不同，<script>默认阻塞DOM的解析，所以使用 async 或 defer 加载脚本，能减少对 DOMContentLoaded 的延迟。
按需使用 load ：仅在必须操作完整资源时使用，避免不必要的性能损耗。

// 监听 DOMContentLoaded
document.addEventListener("DOMContentLoaded", () => {
  console.log("DOM 已就绪，可操作元素");
});

// 监听 load
window.addEventListener("load", () => {
  console.log("所有资源加载完成");
});

2.4 动态加载脚本

使用DOM API，通过向DOM中动态添加script元素同样可以加载指定的脚本。以这种方式创建的<script>元素是以异步方式加载的，相当于添加了async属性。

let script = document.createElement('script'); 
script.src = 'gibberish.js'; 
script.async = false; //不是所有浏览器都支持 async 属性。如果要统一动态脚本的加载行为，可以明确设置成同步加载
document.head.appendChild(script);

以这种方式获取的资源对浏览器预加载器是不可见的，这会严重影响它们在资源获取队列中的优先级，可能会严重影响性能。要想让预加载器知道这些动态请求文件的存在，可以在文档头部显式声明它们：

<link rel="preload" href="gibberish.js">

2.5 `<script>`标签的放置位置

除了async/defer属性，<script>标签的放置位置也很关键，直接影响JS代码的执行效果，还会导致“获取不到DOM元素”的报错——这是新手最常踩的坑之一。给大家讲清三个常见放置位置的区别、用法。

2.5.1 放在标签内（不推荐）

过去，所有的<scirpt>元素都放在页面的<head>标签中，目的是把外部CSS文件和JavaScript文件集中在一起。

JavaScript解析阻塞资源，会暂停 DOM 构建和渲染。上面这种做法也就意味着必须等到所有 JavaScript代码都下载、解析和解释完成之后，才能开始渲染(浏览器解析到<body>标签时开始渲染)页面，这就会导致页面渲染明显延迟，这个过程中浏览器窗口会处于空白。

默认情况（无async/defer）：JS代码会在页面渲染前执行，如果JS代码需要操作页面元素（比如获取按钮），会因为元素还没渲染出来（DOM树没构建完成），导致代码报错。

错误示例：

<html>
<head>
    <meta charset="UTF-8">
    <title>script放在head里（报错）</title>
    <!-- 无async/defer，放在head里，操作DOM会报错 -->
    <script>
        // 报错：无法获取null（按钮还没渲染）
        let btn = document.getElementById("btn");
        btn.onclick = function() {
            alert("点击成功");
        };
    </script>
</head>
<body>
    <button id="btn">点击我</button>
</body>
</html>

如果一定要放在head里(比如引用第三方库)，必须加defer属性( 确保页面渲染完再执行JS)。

<html>
<head>
    <meta charset="UTF-8">
    <title>script放在head里（加defer）</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js" defer></script>
</head>
<body>
    <button id="btn">点击我</button>
</body>
</html>

2.5.2 放在`<body>`标签末尾（推荐，新手首选）

这是最推荐的方式，不用加任何async/defer属性，JS代码会在页面所有元素渲染完成后执行（DOM树构建完成），既能避免“获取不到DOM元素”的报错，又不阻塞页面渲染，用户会感觉页面加载的更快，兼容性最好——我平时开发，大部分JS标签都会放在body末尾。

示例：

<!DOCTYPE html>  
<html>  
 <head>  
 <title>Example HTML Page</title>  
 </head>  
  <body>
    <h3>推荐：script放在body末尾</h3>
    <button id="btn">点击我</button>
    <p id="text">等待JS修改内容</p>

    <!-- 放在body末尾，所有元素已渲染，DOM树构建完成，操作DOM不报错 -->
    <script>
        let btn = document.getElementById("btn");
        let text = document.getElementById("text");
        
        btn.onclick = function() {
            text.innerText = "JS代码执行成功，内容已修改！";
            text.style.color = "red";
            alert("操作DOM不报错，新手首选方式");
        };
    </script>
</body>
</html>

2.5.3 放在`<body>`标签内（中间位置，按需使用）

放在页面元素之后、其他元素之前，比如在一个按钮后面、另一个按钮前面，这种情况下，JS代码可以操作前面已经渲染的元素，但会阻塞后面元素的渲染——适合需要在页面渲染过程中执行的JS代码（比如动态生成前面的元素、根据前面的元素状态修改内容），新手不常用，了解即可，避免误用导致页面阻塞。

示例：

<body>
    <h3>script放在body中间</h3>
    <button id="btn1">按钮1</button>

    <!-- 放在按钮1之后，能操作按钮1，但会阻塞按钮2的渲染 -->
    <script>
        let btn1 = document.getElementById("btn1");
        btn1.onclick = function() {
            alert("能操作前面的按钮1");
            btn1.style.backgroundColor = "lightblue";
        };
        // 模拟耗时操作（2秒），会阻塞后面的按钮2渲染，页面会先显示按钮1，2秒后才显示按钮2
        setTimeout(function() {}, 2000);
    </script>

    <button id="btn2">按钮2（会被阻塞渲染）</button>
</body>

2.5.4 扩展：CSS的位置？

页面资源的加载顺序：HTML → CSS（头部） → DOM 构建 → Script（底部或异步）。

与JavaScrip不同，CSS 是渲染阻塞资源，但不会阻塞 DOM 树构建（仅阻塞渲染树生成）。浏览器需要等到 CSS 解析完成才能绘制页面，所以需要尽早加载。

因此，把CSS放在中是最推荐的做法。

避免渲染阻塞：浏览器在解析 HTML 时优先加载 CSS，确保页面内容首次渲染（FCP）时已应用正确样式，避免布局抖动（Layout Shift）。
并行加载优化：现代浏览器支持并行下载 CSS 和解析 DOM，减少整体加载时间。
样式优先级控制：<head> 中的 CSS 优先级高于 <body> 中的内联样式，确保样式一致性。

这里有一个误区，会认为“将 <style> 放在 .vue 文件底部会导致样式加载延迟”。

在 .vue 文件中，构建工具会提取所有样式并注入 <head>，因此最终加载顺序与文件内位置无关，建议按标准的代码顺序：<template> -><script> -> <style>。

2.6 行内代码与外部文件

尽可能把 JavaScript 代码放在外部文件中。推荐使用外部文件主要有2个理由：

可维护性。JavaScript 代码如果分散到很多页面，会导致维护困难。而用一个目录保存所有 JavaScript 文件，更容易维护，这样可以独立于 HTML页面来编辑代码。
缓存。浏览器会根据特定的设置缓存所有外部链接的 JavaScript 文件，如果两个页面都用到同一个JavaScript文件，这个文件只需下载一次，页面的加载会更快。

3 吃透`<noscript>`标签：JS的“兜底方案”

<noscript>标签相对简单，用途单一，主要做“兜底”，虽然现在大部分浏览器都支持JS，用户也很少禁用JS，但这个标签是JS基础知识点，也是前端面试可能会问的点，而且能提升页面兼容性和用户体验，新手建议掌握，不用写复杂代码，简单套用模板即可。

3.1 核心用途

当浏览器不支持JavaScript（比如非常古老的浏览器，如IE6以下，现在很少见，但仍有极少数用户在使用），或者用户手动禁用了JavaScript（比如为了安全，禁用浏览器的JS功能；或者部分企业内网，禁止运行JS），标签里的内容，就会在这种情况下显示出来，提示用户开启JS功能或更换浏览器，避免用户困惑，提升页面兼容性。

补充说明：现在大部分浏览器（Chrome、Edge、Firefox、Safari等）都默认支持JS，用户也很少会手动禁用JS，但作为前端开发者，我们要考虑到所有异常情况，加上<noscript>标签，是一种规范、严谨的开发习惯，也能体现我们的专业性。而且这个标签用法简单，不用写复杂逻辑，新手很容易掌握。

3.2 实战案例

<noscript>元素可以包含任何可以出现在中的HTML元素，

当出现下面这两种情况时，浏览器会显示的内容：

浏览器不支持脚本；
浏览器对脚本的支持被关闭。

正常情况下执行JS，不显示noscript内容；JS无法执行时，显示提示内容：

<!DOCTYPE html> 
<html> 
 <head> 
    <meta charset="UTF-8">
    <title>noscript标签示例（兜底）</title>
 </head> 
 <body> 
 <!-- 正常情况：浏览器支持JS、未禁用，执行JS代码，不显示noscript内容 -->
    <script>
        alert("JS代码运行成功，noscript内容不会显示！");
        console.log("JS正常执行，noscript标签隐藏");
    </script>

    <!-- 兜底提示：JS无法执行时（不支持、被禁用），显示这段内容，引导用户 -->
    <noscript>
        <h3 style="color: red;">温馨提示</h3>
        <p>您的浏览器不支持JavaScript，或已禁用JavaScript功能！</p>
        <p>请开启JS功能（按F12→设置→调试器→启用JavaScript），或更换最新版浏览器（Chrome、Edge等），再访问本页面~</p>
        <p>开启JS后，才能正常使用页面所有交互功能哦！</p>
    </noscript>
 </body> 
</html>

可以手动禁用浏览器的JS功能，刷新页面，就能看到里的提示内容：

打开上面的HTML文件，正常情况下会弹出“JS代码运行成功，noscript内容不会显示！”的提示框，关闭提示框后，看不到noscript里的内容；
按F12键，打开浏览器开发者工具（如果按F12没反应，可右键页面→检查，打开开发者工具）；
点击开发者工具右上角的“设置”按钮（齿轮图标，一般在右上角，和关闭按钮相邻）；
在左侧菜单中，找到“调试器”（部分浏览器叫“Debugger”），勾选“禁用JavaScript”（英文叫“Disable JavaScript”）；
刷新当前页面，此时JS被禁用，
测试完成后，一定要取消勾选“禁用JavaScript”，恢复JS功能

4 结尾总结

这篇文章讲了JS入门必懂的两个核心标签。

总结一下核心要点：

<script>标签：JS代码的“载体”，有内联式（少量代码）和外部引用（大量代码，主流）两种方式；
async和defer：都是异步加载（不阻塞页面），async加载完立即执行（无顺序），defer页面渲染完执行（有顺序），日常开发优先用defer；
<script>标签优先放在body末尾，新手不用纠结其他位置，能避开大部分报错；
<noscript>标签：兜底方案，JS无法执行时显示提示，提升页面兼容性；

下一篇文章，正式进入JS语法的核心学习——JavaScript的语言规则！

第2篇：吃透<script>与<noscript>标签