script标签的作用？JavaScript代码如何嵌入？

月夜之吻

发布时间：2025-08-01 14:19:01

272人浏览过

来源于php中文网

原创

内联脚本适用于代码量小、页面专用的逻辑，直接在script标签内编写代码；2. 外部脚本通过src属性引用.js文件，利于复用、缓存和维护，推荐用于大型或跨页面脚本；3. script标签放在</body>前可避免阻塞页面渲染，提升用户体验，而放在<head>中可能造成白屏；4. async属性实现脚本异步下载，下载完成后立即执行，执行顺序不确定，适用于无依赖的独立脚本；5. defer属性实现脚本异步下载，但延迟到html解析完成后按顺序执行，适用于有依赖或需操作dom的脚本；6. 常见加载问题包括404路径错误、cors跨域限制、csp策略阻止、服务器故障等，可通过开发者工具的network和console面板排查；7. 性能问题主要为阻塞渲染、文件过大、请求过多、缓存不足和cdn配置不当，优化方式包括使用defer/async、代码压缩、tree shaking、代码分割、文件合并、启用http/2、合理配置缓存与cdn。最终应熟练使用浏览器开发者工具进行问题定位与性能调优，以提升页面加载效率和运行稳定性。

script标签的作用？JavaScript代码如何嵌入？

script

标签在 HTML 中扮演着嵌入或引用 JavaScript 代码的核心角色。JavaScript 代码的嵌入方式主要有两种：一种是直接将代码写在

script

标签内部，这种方式被称为内联脚本；另一种是通过

script

标签的

src

属性链接一个外部的 JavaScript 文件。这两种方式各有其适用场景，但最终目的都是让浏览器能够解析并执行这些动态内容，从而实现页面交互和功能。

解决方案

要将 JavaScript 代码嵌入到 HTML 页面中，你可以选择以下两种方式：

1. 内联脚本 (Inline Script): 这种方式适用于代码量较小、只在特定页面使用的脚本，或者是一些需要立即执行且与当前页面内容高度相关的逻辑。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>内联脚本示例</title>
</head>
<body>
    <h1>欢迎来到我的页面</h1>
    <button id="myButton">点击我</button>

    <script>
        // 这是内联JavaScript代码
        document.getElementById('myButton').addEventListener('click', function() {
            alert('按钮被点击了！');
        });

        console.log('内联脚本已执行。');
    </script>
</body>
</html>

2. 外部脚本 (External Script): 这是更推荐和常用的方式，尤其对于代码量较大、需要在多个页面复用、或者需要进行缓存优化的脚本。将 JavaScript 代码放在独立的

.js

文件中，然后通过

script

标签的

src

属性引用。

scripts.js

文件内容：

立即学习“Java免费学习笔记（深入）”；

// 这是外部JavaScript代码
console.log('外部脚本已加载并执行。');

document.addEventListener('DOMContentLoaded', function() {
    const heading = document.querySelector('h1');
    if (heading) {
        heading.style.color = 'blue';
    }
});

HTML 文件引用：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>外部脚本示例</title>
</head>
<body>
    <h1>欢迎来到我的页面</h1>
    <p>这段文字的颜色会被JavaScript改变。</p>

    <!-- 推荐将外部脚本放在 </body> 标签结束前，以避免阻塞页面渲染 -->
    <script src="scripts.js"></script>
</body>
</html>

script

标签在 HTML 中的放置位置对页面加载和用户体验有什么影响？

script

标签的放置位置，在实际的网页开发中，是个挺有意思也挺关键的问题。它直接关系到页面内容的呈现速度和用户感知的流畅度。传统上，我们可能会看到一些旧的教程或者代码把所有的

<script>

标签都放在

<head>

部分。这在当时可能是为了确保脚本在页面内容加载前就可用，但很快大家就发现了一个明显的问题：当浏览器解析到

<head>

里的

<script>

标签时，它会暂停 HTML 的解析，转而去下载并执行这个脚本。如果脚本文件很大，或者网络状况不佳，用户就会面对一段“白屏”时间，直到脚本下载执行完毕，页面内容才开始渲染。这体验可不怎么好。

所以，现在更普遍和推荐的做法，是将大多数

<script>

标签放在

<body>

结束标签之前。这样做的好处是，HTML 内容可以先被浏览器解析和渲染出来，用户能够更快地看到页面结构和内容，即使 JavaScript 还在后台加载，页面的“可用性”也大大提升了。只有当脚本确实需要操作或影响页面渲染的早期阶段时（比如一些页面级别的样式控制或者统计代码，但即使是统计代码，很多时候也会考虑

async

或

defer

），才会考虑放在

<head>

里。我个人在项目里，除非有非常特殊、非它不可的理由，否则几乎所有的业务逻辑脚本都会放在

</body>

之前，这在我看来是个很实际的优化点。

async

和

defer

这两个

script

属性有什么区别，它们如何优化JavaScript的加载？

在处理外部 JavaScript 文件时，

async

和

defer

这两个属性是优化加载性能的利器。它们都能让脚本的下载变得“不那么阻塞”，但执行时机和行为却有微妙而重要的区别。

```
async
```
属性： 当
```
<script>
```
标签加上
```
async
```
属性时，浏览器会异步下载这个脚本文件，也就是说，它在下载脚本的同时，不会暂停 HTML 的解析。一旦脚本下载完成，它会立即执行。需要注意的是，脚本执行的时候，仍然会阻塞 HTML 的解析。所以，
```
async
```
脚本的执行顺序是不确定的，哪个脚本先下载完，哪个就先执行。这对于那些相互独立、不依赖于其他脚本或 DOM 结构的脚本非常有用，比如一些第三方统计代码（Google Analytics）或者广告脚本。你不需要关心它们何时执行，只要它们最终执行了就行。
```
<script async src="analytics.js"></script>
<script async src="ad-script.js"></script>
```
```
defer
```
属性：
```
defer
```
属性也让脚本异步下载，它同样不会阻塞 HTML 的解析。但与
```
async
```
不同的是，
```
defer
```
脚本的执行会被推迟到整个 HTML 文档解析完成之后，并且在
```
DOMContentLoaded
```
事件触发之前。更重要的是，如果页面上有多个
```
defer
```
脚本，它们会按照在 HTML 中出现的顺序依次执行。这意味着
```
defer
```
保证了脚本的执行顺序。这对于那些需要操作 DOM、或者脚本之间存在依赖关系的场景非常适用。在我看来，
```
defer
```
在大多数情况下是比
```
async
```
更稳妥的选择，因为它既不阻塞页面渲染，又能保证脚本的执行顺序。
```
<script defer src="library.js"></script>
<script defer src="main-app.js"></script> 
```

总结一下：

async

是“下载完就立即执行，执行时会阻塞”，顺序不确定。

defer

是“下载完等 HTML 解析完再按顺序执行”，不阻塞解析，保证顺序。

选择哪个属性，取决于你的脚本是否依赖 DOM 或其他脚本，以及对执行顺序是否有要求。

常见的JavaScript加载失败或性能问题有哪些，以及如何进行初步排查与优化？

在日常开发中，JavaScript 加载或执行时遇到问题是常有的事。这通常可以归结为加载失败和性能瓶颈两大类。

常见的加载失败问题及排查：

AssemblyAI

转录和理解语音的AI模型

下载

文件路径错误 (404 Not Found): 这是最常见的问题。浏览器尝试去一个不存在的地址下载脚本。
- 排查: 打开浏览器的开发者工具（通常按 F12），切换到“Network”（网络）面板。刷新页面，你会看到所有加载资源的请求。如果某个 JS 文件显示状态码为 404，那就说明路径错了。仔细检查
```
src
```
  属性中的路径是否正确，包括大小写、文件扩展名以及相对路径的基准。
网络问题或服务器故障: 用户网络不稳定，或者服务器端没有正确响应脚本请求。
- 排查: 同样在“Network”面板，查看请求的状态码和时间。如果是 5xx 错误，通常是服务器问题。如果请求长时间 pending 或超时，可能是网络连接问题。可以尝试清除浏览器缓存，或者在不同网络环境下测试。
跨域资源共享 (CORS) 限制: 当你的页面从一个域名加载位于另一个域名的 JavaScript 文件时，如果目标服务器没有设置正确的 CORS 响应头，浏览器会阻止脚本加载。
- 排查: 在开发者工具的“Console”（控制台）面板，你会看到 CORS 相关的错误信息，例如“Access to script at '...' from origin '...' has been blocked by CORS policy”。这需要服务器端配置
```
Access-Control-Allow-Origin
```
  等 HTTP 响应头。
内容安全策略 (CSP) 阻止: 网站可能设置了严格的 Content Security Policy，限制了允许加载脚本的来源。
- 排查: “Console”面板会报告 CSP 违规错误，明确指出哪个脚本被哪个 CSP 规则阻止了。解决办法是修改 CSP 规则，允许该脚本的来源，或者将脚本内联到 HTML 中（如果 CSP 允许内联）。
脚本内部的语法错误或运行时错误: 脚本文件本身没有问题，但内部代码有语法错误，导致浏览器无法解析执行。
- 排查: “Console”面板会显示 JavaScript 错误信息，包括错误类型、发生的文件和行号。根据错误提示，定位到代码中进行修复。

常见的性能问题及优化：

阻塞渲染: 前面提到的，脚本放在
```
<head>
```
且未使用
```
async
```
/
```
defer
```
会阻塞页面渲染。
- 优化: 将脚本移动到
```
</body>
```
  结束标签前，或使用
```
defer
```
  属性。对于非关键脚本，考虑
```
async
```
  。
文件体积过大: JavaScript 文件越大，下载时间就越长。
- 优化:
  - 代码压缩与混淆: 使用工具（如 UglifyJS, Terser）移除空格、注释、缩短变量名等。
  - Tree Shaking: 移除未使用的代码模块（通过 Rollup, Webpack 等构建工具）。
  - 代码分割 (Code Splitting): 将大型应用拆分成更小的块，按需加载（Webpack, Parcel）。
HTTP 请求过多: 页面引用了太多独立的 JavaScript 文件，每个文件都需要单独的 HTTP 请求。
- 优化:
  - 文件合并: 将多个小的 JS 文件合并成一个或少数几个大文件（但要注意合并后文件不要过大，适得其反）。
  - HTTP/2: 利用 HTTP/2 的多路复用特性，减少多请求的性能损耗。
未充分利用缓存: 每次访问页面都重新下载 JS 文件。
- 优化: 配置服务器的 HTTP 缓存头（如
```
Cache-Control
```
  ,
```
Expires
```
  ），让浏览器缓存 JS 文件。使用文件指纹（如
```
script.123abc.js
```
  ）来处理文件更新。
CDN 未使用或配置不当: 使用内容分发网络 (CDN) 可以让用户从离他们最近的服务器下载资源。
- 优化: 将公共库或常用脚本部署到 CDN 上。确保 CDN 配置正确，且没有引入额外的延迟。