全面了解JS中的script标签

什么是script标签

在HTML中，script标签用于定义客户端脚本，比如JavaScript脚本代码。当浏览器解析到script标签时，会停止解析HTML并开始执行JavaScript代码，等到JavaScript代码执行完毕后，浏览器再继续解析HTML。

script标签的属性

script标签支持多个属性，下面介绍几个常用的属性：

src：表示加载外部脚本文件的路径，该路径可以是相对路径也可以是绝对路径；
type：表示脚本的MIME类型，默认值是"text/javascript"；
charset：表示脚本的字符集编码，默认值是浏览器的默认编码；
defer：表示延迟执行JavaScript代码，即在HTML文档解析完毕后再执行；
async：表示异步执行JavaScript代码，即在HTML文档解析过程中异步加载并执行。

script标签的位置

我们可以将script标签放在HTML文档的head或者body中，不过它们的位置会影响页面的加载和渲染速度。

当将script标签放在head中时，浏览器需要等待JavaScript代码执行完毕之后才会开始渲染页面，这会导致页面白屏时间较长。

当将script标签放在body的末尾时，浏览器可以在完成DOM的构建后开始并行加载JavaScript文件，并在加载完毕后执行JavaScript代码。这样可以先渲染页面，提高用户体验。

示例一

前端常用的统计工具、广告代码、交互效果的代码等可以通过异步的方式加载，来提高页面加载速度。代码的说明如下：

<!DOCTYPE html>
<html>
  <head>
    <title>异步加载JS示例</title>
  </head>
  <body>
    <h1>欢迎访问我的网站！</h1>
    <script src="a.js" async></script>
    <script src="b.js" async></script>
  </body>
</html>

上面的代码中，我们通过async属性将a.js和b.js异步加载，这样它们的加载和执行过程不会阻塞HTML的解析和渲染，从而提高页面渲染速度。

示例二

当我们需要在页面中引入一个外部脚本文件时，可以通过src属性指定该文件的路径。代码的说明如下：

<!DOCTYPE html>
<html>
  <head>
    <title>外部JS文件示例</title>
    <script src="main.js"></script>
  </head>
  <body>
    <h1>欢迎访问我的网站！</h1>
  </body>
</html>

上面的代码中，我们通过src属性引入了一个名为main.js的外部脚本文件，浏览器会请求并加载该文件，并在HTML文档解析完毕后执行其中的JavaScript代码。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：全面了解js中的script标签 - Python技术站