HTML中js代码应该写在哪里

鸡吃丸子

已于 2025-01-15 14:16:58 修改

阅读量1.1k

点赞数 3

分类专栏：问题汇总文章标签： html 前端 javascript

于 2024-11-11 21:01:09 首次发布

本文链接：https://blog.youkuaiyun.com/m0_74065758/article/details/143694688

版权

问题汇总专栏收录该内容

8 篇文章

订阅专栏

一、可以写在哪里

js代码有三种位置可以写：

1、行内式

2、内嵌式

3、外部js

二、在页面中的位置

js可以写在很多位置，但是每个位置上产生的效果都不同，需要多加注意，否则可能会使项目运行出错。

1、直接写在head标签中

这是最常见的用法之一，在head标签中添加script标签会在页面加载的时候立即执行，如果脚本比较大或者需要执行的时间比较长，会阻塞页面的渲染。

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
    <script src="myScript.js"></script>
    <script>
      // some JavaScript code
    </script>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

2、在head标签中同时要异步加载

这是一种常见的优化方式，它可以提高页面加载的速度，异步加载脚本可以使用html5的async的defer属性来实现。async属性表示脚本可以在加载时立即执行，不会阻塞页面的渲染，defer属性表示脚本可以在文档解析完后执行，不会阻塞页面的渲染。

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <!-- 页面内容 -->
    <script src="myScript.js" async></script>
    <script src="myOtherScript.js" defer></script>
  </body>
</html>

3、在head标签中同时使用onload

在script标签中写一个window.load=function() {.....}函数，放在最外层，将所有函数包含在里面，就可以实现页面加载完之后再加载js

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
    <script>
        window.onload=function() {
            <!-- js内容-->
            ...
        }
    </script>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

4、在body标签底部

这是一种常见的优化方式，它常用于加速页面加载，将脚本放在body底部可以使页面内容先加载，然后再加载js代码，从而加快页面的渲染速度，还可以避免阻塞页面的渲染。

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <!-- 页面内容 -->
    <script src="myScript.js"></script>
    <script>
      // some JavaScript code
    </script>
  </body>
</html>