标签 | script元素及加载方式

Posted on In , Symbols count in article: 4.7k Reading time ≈ 4 mins.

<script>元素

将JavaScript插入到HTML中主要依赖的是<script>元素

<script>特性

  • async（可选）：表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载【只对外部脚本文件有效】
  • charset（可选）：使用src属性指定的代码字符集【这个属性很少使用，因为大多数浏览器不在乎它的值】
  • crossorigin（可选）：配置相关请求的CORS（跨源资源共享）设置【默认不使用CORS】
    • crossorigin="anonymous"配置文件请求不必设置凭据标志
    • crossorigin="use-credentials"设置凭据标志，意味着出站请求会包含凭据
  • defer（可选）：表示脚本立即下载，但是可以延迟到文档完全被解析和显示之后再执行【只对外部脚本文件有效】
  • integrity（可选）：允许比对接收到的资源和指定的加密签名以验证子资源完整性（SRI，Subresource Integrity）
    • 如果接收到的资源的签名与这个属性指定的签名不匹配，则页面会报错，脚本不会执行
    • 这个属性可以用于确保内容分发网络（CDN，Content Delivery Network）不会提供恶意内容
  • language（废弃）：最初用于表示代码块中的脚本语言（如"JavaScript"、"JavaScript 1.2"或"VBScript"）【大多数浏览器都会忽略这个属性，不应该再使用它】
  • src（可选）：表示包含要执行的代码的外部文件
  • type（可选）：代替language，表示代码块中脚本语言的内容类型（也称MIME 类型）
    • 按照惯例，这个值始终都是"text/javascript"，尽管"text/javascript"和"text/ecmascript"都已经废弃了
    • JavaScript 文件的MIME 类型通常是"application/x-javascript"，不过给type 属性这个值有可能导致脚本被忽略
    • 在非IE 的浏览器中有效的其他值还有"application/javascript"和"application/ecmascript"
    • 如果这个值是module，则代码会被当成ES6 模块，而且只有这时候代码中才能出现import 和export 关键字

使用<script>的元素

  1. 在HTML中嵌入代码
  2. 通过<script>标签引入外部JavaScript代码

一般更加推荐把JavaScript代码放到外部文件中

理由如下：

  • 可维护性：JavaScript 代码如果分散到很多HTML 页面，会导致维护困难，而用一个目录保存所有JavaScript 文件，则更容易维护，这样开发者就可以独立于使用它们的HTML 页面来编辑代码
  • 缓存：浏览器会根据特定的设置缓存所有外部链接的JavaScript 文件，这意味着如果两个页面都用到同一个文件，则该文件只需下载一次，这最终意味着页面加载更快
  • 适应未来：通过把JavaScript 放到外部文件中，就不必考虑用XHTML或注释黑科技。包含外部JavaScript 文件的语法在HTML和XHTML中是一样的

注意：

  • 使用了src 属性的<script>元素不应该再在<script>和<script>签中再包含其他JavaScript 代码

    • 如果两者都提供的话，则浏览器只会下载并执行脚本文件，从而忽略行内代码。

  • 【JSONP跨域原理】<script>元素一个最为强大、同时也备受争议的特性是，它可以包含来自外部域的JavaScript，跟<img>元素很像，<script>元素的src 属性可以是一个完整的URL，而且这个URL 指向的资源可以跟包含它的HTML 页面不在同一个域中文件

  • 【XSS攻击】来自外部域的代码会被当成加载它的页面的一部分来加载和解释。这个能力可以让我们通过不同的域分发JavaScript，不过，引用了放在别人服务器上的JavaScript 文件时要格外小心，因为恶意的程序员随时可能替换这个文件。在包含外部域的JavaScript 文件时，要确保该域是自己所有的，或者该域是一个可信的来源，<script>标签的integrity 属性是防范这种问题的一个武器，但这个属性也不是所有浏览器都支持

  • 【顺序加载】在没有使用defer或者async的情况下，浏览器都会按照<script>在页面中出现的顺序依次解释它们

<script>元素位置及加载

我们知道，浏览器解析HTML的时候是从上到下依次解析的，如果把<script>标签都放在<head>标签里面，那么这就意味着必须把所有JavaScript代码都下载、解析和解释完成后，才能开始渲染页面（因为页面在浏览器解析到<body>的起始标签时才开始渲染），这也就是【JavaScript会阻塞浏览器解析HTML文件】，这样导致的后果就是页面渲染会明显延迟，期间浏览器窗口完全空白，给用户带来不好的体验

为了解决这个问题，可以采用如下方法：

把script元素放在body底部

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
	<head>
	<title>Example HTML Page</title>
	</head>
	<body>
	<!-- 这里是页面内容 -->
	<script src="example1.js"></script>
	<script src="example2.js"></script>
	</body>
</html>

这样，页面会在处理JavaScript之前进行渲染

延迟加载脚本

HTML4.01中引入defer属性，表示脚本可以立即下载但是延迟到文档完全被解析和显示之后再执行【对外部脚本文件才有效】

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
	<head>
	<title>Example HTML Page</title>
    <script defer src="example1.js"></script>
	<script defer src="example2.js"></script>
	</head>
	<body>
	<!-- 这里是页面内容 -->
	</body>
</html>

异步执行脚本

HTML5中引入async属性，表示应该立即开始下载脚本，但不能阻止其他页面动作，比如下载资源或等待其他脚本加载【只对外部脚本文件有效】

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
	<html>
	<head>
	<title>Example HTML Page</title>
	<script defer src="example1.js"></script>
	<script defer src="example2.js"></script>
	</head>
	<body>
	<!-- 这里是页面内容 -->
	</body>
</html>

defer和async的区别：

defer可以保证脚本顺序执行，但是async不能保证，因为给脚本添加async 属性的目的是告诉浏览器，不必等脚本下载和执行完后再加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本

动态加载脚本

除了通过<script>元素加载脚本，还可以通过JavaScript使用DOM API的方式向DOM中动态添加script元素加载指定的脚本

1
2
3
let script = document.createElement('script');
script.src = 'gibberish.js';
document.head.appendChild(script);

默认情况下，以这种方式创建的<script>元素是以异步方式加载的，相当于添加了async属性

存在问题：

  1. 并不是所有浏览器都支持async属性
  2. 以这种方式获取的资源对浏览器预加载器是不可见的，这会严重影响它们在资源获取队列中的优先级，进而影响性能

解决方式：

  1. 如果要统一动态脚本的加载行为，可以明确将其设置为同步加载

    1
    2
    3
    4
    let script = document.createElement('script');
    script.src = 'gibberish.js';
    script.async = false;
    document.head.appendChild(script);

  2. 要想让预加载器知道这些动态请求文件的存在，可以在文档头部显式声明它们

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

拓展：<noscript>元素

<noscript>元素给不支持JavaScript的浏览器提供替代内容

<noscript>元素可以包含任何可以出现在<body>中的HTML 元素，<script>除外

在下列两种情况下，浏览器将显示包含在

  • 浏览器不支持脚本
  • 浏览器对脚本的支持被关闭

任何一个条件被满足，包含在<noscript>中的内容就会被渲染，否则，浏览器不会渲染<noscript>中的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
    <head>
    <title>Example HTML Page</title>
    <script defer="defer" src="example1.js"></script>
    <script defer="defer" src="example2.js"></script>
    </head>
    <body>
    <noscript>
    <p>This page requires a JavaScript-enabled browser.</p>
    </noscript>
    </body>
</html>

这个例子是在脚本不可用时让浏览器显示一段话，如果浏览器支持脚本，则用户永远不会看到它