HTML 中 JavaScript 的加载方式

孤城浪人

已于 2023-08-15 10:31:38 修改

阅读量3.6k

点赞数 1

分类专栏： # JavaScript 基础文章标签： javascript

于 2022-04-13 21:09:27 首次发布

本文链接：https://blog.csdn.net/weixin_46015333/article/details/124092682

版权

JavaScript 基础专栏收录该内容

16 篇文章 2 订阅

订阅专栏

HTML中 JavaScript 的加载方式

前言

相信各位前端的小伙伴都用过script元素，今天我们就来好好聊一聊它。

script元素

将JavaScript插入HTML的主要方法是使用〈〉元素，有下列８个属性

属性名	状态	描述
async	可选	表示应该立即下载脚本，但不能阻止其他页面动作，只对外部脚本文件有效
charset	可选	使用src属性指定的代码字符集（很少用，大部分浏览器不在乎）
crossorigin	可选	配置相关请求的cors设置，默认不用
defer	可选	表示在文档解析和显示完成后再执行脚本，只对外部脚本文件有效
integrityr	可选	允许比对接收道德资源和指定的加密签名以验证子资源的完整性，若接收子资源的加密签名与属性指定签名不匹配，则页面报错
language	废弃	最初用于表示代码块中的脚本语言
src	可选	表示要执行的代码的外部文件
type	可选	表示代码块中脚本语言的内容属性

src的优先级高于行内代码：使用了src属性的script元素，如果再在标签内包含其它javascript代码，会忽略行内代码。

<script src="xxx">
// 代码无效
function fn() {}
</script>

script 标签位置

head 标签内

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    // ···js代码···
  </script>
</head>
<body>
</body>
</html>

但是这样意味着必须把所有 javascript 代码都下载、解析和解释完成后，才能开始渲染页面。当 javascript 代码很多的时候，会导致明显的渲染延迟。

body 标签中页面内容后面

因为放在 head 标签内有如上渲染延迟问题，所以可以放在 body 标签中页面内容后面，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>
    <!-- 页面元素 -->
  </div>
  <script>
    // ···js代码···
  </script>
</body>
</html>

但是这样也会有问题无法复用逻辑，例如：我在 A 页面用到了加法逻辑，在 B 页面用到了相同的逻辑，但是由于 javascript 代码写在每个页面的 html 文件内，所以我不得不在两个页面写两段重复的代码，当这样的代码越来越多时，就会影响加载 javascript 代码的效率，

引入外部 javascript 代码

将 javascript 代码单独写在 js 文件内，哪个页面使用就引入该文件。

src工作原理

<script src="http://www.somewhere.com/file/js"></script>

当浏览器在解析这个资源的时候，会向 src 属性指定的路径发送一个 get 请求，以取得相应的资源，src 不受同源策略限制，jsonp 跨域就利用这个特性。

引入外部 javascript 代码的方式

推迟执行脚本

defer属性。这个属性表示会立即下载 src引入的资源文件（不会阻断解析HTML），当页面解析完毕后，再执行脚本。当同时有多个script元素使用了该属性，会按照它们出现的顺序执行。

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="test1.js" defer></script>
  <script src="test2.js" defer></script>
  <title>Document</title>
</head>
<body>
</body>
</html>

例如上面的结构，在页面加载完成后执行外部资源文件时会先执行test1.js再执行test2.js.

异步执行脚本

async属性：这个属性表示会立即下载 src引入的资源文件，下载完成后立即执行，可能会阻断HTML解析，与defer不同的是当同时有多个script元素使用了该属性，不能保证会按照它们出现的顺序执行。因此，使用该属性重点在于引入的资源文件之间没有依赖关系。

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="test1.js" async></script>
  <script src="test2.js" async></script>
  <title>Document</title>
</head>
<body>
</body>
</html>

例如上面的结构，在页面加载完成后执行外部资源文件时也许会先执行test2.js再执行test1.js.

动态加载脚本

// 创建script
let script = document.createElement('script');
// 设置src属性
script.src = 'gibberish.js';
// 插入到head标签中
document.head.appendChild(script);

在将script插入到DOM且执行到这段代码之前不会发送请求下载src引入的资源。以这种方式创建的script是异步加载的，相当于添加了async属性。
问题：不是所有浏览器都支持async属性

可将其设置为同步加载

let script = document.createElement('script');
script.src = 'gibberish.js';
// 设置为同步加载
script.async = false;
document.head.appendChild(script);

问题：但是以这种方式获取资源对浏览器预加载器是不可见的，会严重影响它们在资源获取队列中的优先级，可能会严重影响性能。
解决办法：在文档头部显示的声明src引入的资源文件。

<link rel="preload" href="gibberish.js">

XHTML中的变化

在XHTML中使用 JavaScript 必须指定type属性且值为text/javascript，HTML中则可以没有这个属性。
在XHTML中语句a < b中的 < 会被解释成一个标签的开始，又因为作为标签开始的小于号后不能有空格，所以会导致语法错误。
有两种解决办法：

将代码中所有<换成对应HTML实体形式<。
将代码写在一个CDATA块中，CDATA快表示其内容不作为标签来解析。

在不支持CDATA块的非XHTML兼容浏览器中必须注释CDATA标记，下面这种格式适用于所有线代浏览器。

<script type="text/javascript">
//<![CDATA[
    function fn (a, b) {
      if (a < b) {
        return a - b;
      } else {
        return b - a;
      }
    }
//  ]]
</script>