【前端每日一问001】HTML中script标签应该写在哪个位置

在下周周ovo

已于 2023-04-26 20:15:51 修改

阅读量2.6k

点赞数 16

分类专栏： # 前端每日一问文章标签：前端 html python

于 2023-04-26 19:54:11 首次发布

本文链接：https://blog.csdn.net/weixin_64471900/article/details/130393157

版权

前端每日一问专栏收录该内容

2 篇文章 1 订阅

订阅专栏

在 HTML 中，script 标签可以用来定义 JavaScript 代码。script 标签可以被放置在 HTML 文档的不同位置，每个位置都有不同的用途和影响。下面是一些常见的 script 标签放置位置：

🍁1. 在 head 中

在 head 标签中添加 script 标签是最常见的用法之一，它通常用于引入外部 JavaScript 文件或定义内>部 JavaScript 代码。在 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. 在 body 底部

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

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

🍁3. 在异步加载中

异步加载脚本是一种常见的优化方式，它可以提高页面的加载速度。异步加载脚本可以使用 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>