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

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

在 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>

总的来说,script 标签可以放置在 HTML 文档的不同位置,每个位置都有不同的用途和影响。在实际>开发中,应该根据具体情况选择最适合的放置位置。


8ea6575a83c54d829a8b424000672ac6.jpg

相关文章
|
1月前
|
移动开发 JavaScript Java
关于Android中如何过滤HTML标签
关于Android中如何过滤HTML标签
37 0
HTML基础知识(1)常用标签的使用 h、p、img、meta、a、iframe...
该博客文章详细介绍了HTML的基础知识,包括注释、标签属性、常用标签、实体、图片引入、meta标签、内联框架、超链接的使用,并通过代码示例和测试结果截图展示了这些元素在网页中的应用效果。
HTML基础知识(1)常用标签的使用 h、p、img、meta、a、iframe...
|
4天前
|
前端开发 JavaScript Java
springmvc前端jsp与html
在Spring MVC框架中,前端页面既可以使用JSP(JavaServer Pages)也可以使用HTML,具体使用哪一种或哪几种技术,主要取决于项目的需求、团队的熟悉度以及项目的可维护性等因素。
9 2
|
11天前
|
移动开发 前端开发 程序员
后端程序员的前端基础-前端三剑客之HTML
后端程序员的前端基础-前端三剑客之HTML
21 9
|
11天前
|
移动开发 搜索推荐 前端开发
HTML结构的基本标签
HTML结构的基本标签
|
8天前
|
前端开发 JavaScript 数据安全/隐私保护
【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)
【海贼王航海日志:前端技术探索】HTML你学会了吗?(二)
17 1
|
8天前
|
编解码 移动开发 前端开发
【海贼王航海日志:前端技术探索】HTML你学会了吗?(一)
【海贼王航海日志:前端技术探索】HTML你学会了吗?(一)
8 1
|
10天前
|
移动开发 前端开发 搜索推荐
前端基础101之HTML总结
【8月更文挑战第1天】
13 4
|
11天前
|
前端开发
【前端】校园二手书交易系统javascript+css+html (源码)【独一无二】
【前端】校园二手书交易系统javascript+css+html (源码)【独一无二】
|
1天前
|
移动开发 搜索推荐 前端开发
认识HTML结构的基本标签
认识HTML结构的基本标签
5 0