boxmoe_header_banner_img

Hello! 欢迎来到悠悠畅享网！

POST
文章导读
前端教学

HTML如何引入JavaScript？script标签的用法是什么？

avatar
站长 2025年8月17日 1
0 评论

推荐将JavaScript脚本放在body末尾或使用defer属性，因为能避免阻塞页面渲染，提升加载速度和用户体验。

HTML如何引入JavaScript？script标签的用法是什么？

将JavaScript引入HTML主要通过

<script>

标签实现，它允许你直接在HTML文档中嵌入JS代码，或者链接到外部的

.js

文件。这是前端交互的基石，也是让静态页面“活”起来的关键。

解决方案

在HTML中引入JavaScript，主要有两种方式：

1. 内联脚本（Inline Scripting） 直接将JavaScript代码写在

<script>

标签内部。

  <head>     内联脚本示例  <body>     
欢迎
     <script>         // JavaScript代码直接写在这里         console.log("Hello from inline script!");         document.querySelector('h1').style.color = 'blue';      </body>

2. 外部脚本（External Scripting） 将JavaScript代码写入一个独立的

.js

文件，然后在HTML中使用

<script src="path/to/your/script.js"></script>

标签引用它。

index.html

:

<!DOCTYPE html> <html> <head>     <title>外部脚本示例</title> </head> <body>     <h1>外部脚本加载</h1>     <script src="my-script.js"></script> </body> </html>
my-script.js

:

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

// 这是 my-script.js 文件的内容 console.log("Hello from external script!"); document.querySelector('h1').style.backgroundColor = 'lightgray';

通常，

<script>

标签可以放在HTML文档的

<head>

部分，也可以放在

<body>

部分的末尾。不同的放置位置对页面加载性能有显著影响。

JavaScript脚本的最佳放置位置在哪里？为什么？

关于JavaScript脚本的放置位置，这确实是个老生常谈但又极其重要的话题。我个人在开发过程中，几乎总是将

<script>

标签放在

<body>

内容的末尾，也就是

</body>

标签之前。这并非仅仅是约定俗成，背后有很实际的性能考量。

当浏览器解析HTML文档时，如果遇到一个没有

async

或

defer

属性的

<script>

标签，它会暂停HTML的解析和渲染，转而去下载并执行这个脚本。如果脚本文件很大，或者需要进行复杂的计算，那么用户就会看到一个空白页或者加载缓慢的页面，这用户体验简直是灾难。

想象一下，用户打开你的网站，期待内容迅速呈现，结果因为你在

<head>

里放了个巨大的JS文件，页面迟迟不显示。这就像你走进一家餐厅，饿得不行，结果菜单半天不给，还在那儿磨磨蹭蹭地算账。

将脚本放在

<body>

的末尾，就意味着HTML内容（包括CSS样式，如果CSS是放在

<head>

里的）会先被解析和渲染出来。用户能够更快地看到页面的骨架和基本内容，即使JavaScript还在加载或执行，页面也已经可用了。这大大提升了用户感知的加载速度。对于那些需要操作DOM（文档对象模型）的脚本来说，把它们放在DOM元素之后，也能确保脚本执行时，相关的DOM元素都已经存在并可被访问，避免了常见的“元素未找到”错误。当然，如果你非要放在

<head>

里，并且脚本需要操作DOM，那就得用

DOMContentLoaded

事件监听器来确保DOM准备就绪，但这无疑增加了复杂性。

async

和

defer

属性有什么区别？它们如何优化页面加载？

async

和

defer

这两个属性，对于优化JavaScript的加载行为简直是神器。它们都是为了解决传统脚本加载阻塞渲染的问题，但它们的行为模式和适用场景却有所不同。

async

属性： 当你在

<script>

标签上添加

async

属性时，浏览器会异步地下载脚本，这意味着它会在下载脚本的同时继续解析HTML。脚本下载完成后，会立即执行，而不会等待HTML解析完成。

<script async src="my-async-script.js"></script>

特点：

  • 非阻塞HTML解析：脚本下载与HTML解析并行。
  • 立即执行：脚本下载完后立即执行，不管HTML解析是否完成。
  • 执行顺序不保证：如果有多个 
    async

    脚本，它们的执行顺序是不确定的，哪个先下载完哪个先执行。

适用场景：

async

特别适合那些独立性强、不依赖于其他脚本或DOM结构的脚本，比如第三方统计代码（Google Analytics）、广告脚本等。它们不需要严格的执行顺序，也不应该阻塞页面的核心内容加载。

defer

属性： 当你在

<script>

标签上添加

defer

属性时，浏览器也会异步地下载脚本，同时继续解析HTML。但与

async

不同的是，脚本的执行会延迟到HTML文档完全解析完毕之后（即

DOMContentLoaded

事件触发之前）才开始。而且，如果页面上有多个

defer

脚本，它们会按照在HTML中出现的顺序依次执行。

<script defer src="my-defer-script.js"></script>

特点：

  • 非阻塞HTML解析：脚本下载与HTML解析并行。
  • 延迟执行：脚本下载完后，会等待HTML解析完成后才执行。
  • 保证执行顺序：多个 
    defer

    脚本会按照它们在文档中出现的顺序执行。

适用场景：

defer

非常适合那些依赖于DOM内容或者需要特定执行顺序的脚本，比如页面交互逻辑、组件初始化脚本等。它既能避免阻塞页面渲染，又能确保脚本在DOM准备就绪后，并按照预期顺序执行。我个人在项目中，如果不是特别需要

async

的即时性，通常都会首选

defer

，因为它提供了更好的可控性。

简单来说，

async

是“下载完就跑，不管别人”，

defer

是“下载完等等，等大家都准备好了，按顺序跑”。理解并合理运用这两个属性，能让你的网页加载速度和用户体验得到质的飞跃。

为什么推荐使用外部JavaScript文件而不是内联脚本？

在前端开发中，虽然内联脚本（直接写在HTML中的

<script>

标签里）使用起来看似方便快捷，但从长远和专业的角度来看，强烈推荐使用外部JavaScript文件。这不仅仅是代码组织上的偏好，更是关乎项目可维护性、性能和安全性的重要实践。

1. 职责分离（Separation of Concerns）： 这是软件工程中的一个核心原则。HTML负责页面结构，CSS负责样式，JavaScript负责行为。将三者清晰地分离到不同的文件中，使得每个文件都只专注于自己的职责。想象一下，如果你的HTML文件里混杂着大量的CSS样式和JS逻辑，那简直是一团乱麻，阅读和维护都会变得极其困难。就像你不会把厨房的锅碗瓢盆和卧室的衣服都堆在一个房间里一样，各司其职才能高效运作。

2. 缓存优势： 外部JavaScript文件可以被浏览器缓存。当用户第一次访问你的网站时，浏览器会下载并缓存这些

.js

文件。在用户后续访问相同页面或网站内其他页面时，如果这些JS文件没有更新，浏览器会直接从缓存中读取，而无需再次从服务器下载。这大大减少了网络请求，显著提升了页面加载速度。内联脚本每次都会随着HTML文件一起下载，没有缓存优势。

3. 代码复用与维护： 如果你的网站有多个页面需要使用相同的JavaScript功能，将这些功能封装在外部文件中，可以轻松地在不同页面中引用。一旦需要修改某个功能，你只需要修改一个外部文件，所有引用它的页面都会自动更新。而内联脚本则意味着你需要在每个页面中重复编写或复制粘贴相同的代码，维护起来简直是噩梦。想想看，如果一个bug需要修复，你得在几十个页面里找它，这效率可想而知。

4. 提升可读性与协作效率： 外部文件使得HTML代码更加简洁干净，只包含结构信息，提高了代码的可读性。对于团队协作而言，前端开发者可以专注于JavaScript逻辑，而无需在HTML文件中大海捞针，从而提升了开发效率和团队协作的顺畅度。

5. 内容安全策略（CSP）支持： 现代Web安全实践中，内容安全策略（Content Security Policy, CSP）越来越重要。CSP允许网站管理员定义哪些资源可以被浏览器加载和执行。出于安全考虑，CSP通常会默认禁止内联脚本，以防止跨站脚本攻击（XSS）。使用外部脚本文件能够更好地符合CSP的要求，提升网站的安全性。

尽管在某些极特殊情况下，比如一个非常小的、只在特定页面使用一次且不涉及DOM操作的脚本，内联脚本可能看起来更方便。但作为通用实践，外部JavaScript文件是毋庸置疑的最佳选择，它为项目的长期健康发展奠定了坚实的基础。

bug css dom html JavaScript JS web安全 xss 为什么 事件 区别 堆 对象 封装 异步 浏览器 软件工程

评论（已关闭）

评论已关闭