JavaScript 在HTML中的使用

最新推荐文章于 2025-07-04 10:34:25 发布

原创最新推荐文章于 2025-07-04 10:34:25 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #浏览器

JavaScript 专栏收录该内容

1 篇文章

订阅专栏

本文探讨了JavaScript代码在HTML中的不同放置方式及其对用户体验的影响，包括如何利用async和defer属性来改善页面加载速度，并介绍了外部文件的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript代码的存放位置：
JS代码一般直接放在HTML的标签内部，不过这样浏览器会等JS代码被下载并执行之后才继续加载HTML中接下来的内容。所以在JS代码被下载并执行的过程中，页面还是空白的，JS下面的HTML标签暂停下载，这可能会影响到用户的体验，可以把JS代码放在前面，这样浏览器就会先下载HTML标签、渲染页面，再下载JS并执行代码。
另外，在引用JS外部文件的时候，还可以选择加上defer/asycn属性，分别指示浏览器异步下载JS文件。但是注意，下载文件之后，执行的顺序可能不能如你所愿。

嵌入代码与外部文件：
一般认为外部文件更易维护，可缓存（多个页面使用同一个JS文件时，浏览器会自动缓存JS文件，不必多次下载）。
在不支持脚本或脚本被禁用的浏览器中，如果需要提醒用户JS不可用，可以在标签内添加标签。当然，在启用了脚本的浏览器不会显示标签的内容。

示例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <!-- 下面两个JS标签会先被下载并执行，其后的内容会暂停下载 -->
    <script src="./js/index.js"></script>
    <script >
        function function_name (argument) {
            // body... 
        }
    </script>
</head>
<body>
    <noscript>
        <p>抱歉，您的浏览器不支持JavaScript</p>
    </noscript>
    <!-- body.. -->
    <!-- 页面已经渲染完成，下载并执行下面的JS代码 -->
    <script src="./js/index2.js"></script>
</body>
</html>