入门前端-《JavaScript 语言入门教程-浏览器环境概述》

电玩女神 2022-08-29 06:13 137阅读 0赞

### 文章目录 ###

*  概述
 *   *  代码嵌入网页的方法
 *  script 元素
 *   *  工作原理
     *  defer 属性
     *  async 属性
     *  脚本的动态加载

# 概述 #

> `JavaScript` 是浏览器的内置脚本语言。也就是说，浏览器内置了 `JavaScript` 引擎，并且提供各种接口，让 `JavaScript` 脚本可以控制浏览器的各种功能。一旦网页内嵌了 `JavaScript` 脚本，浏览器加载网页，就会去执行脚本，从而达到操作浏览器的目的，实现网页的各种动态效果。

## 代码嵌入网页的方法 ##

> 网页中嵌入 `JavaScript` 代码，主要有四种方法。

*  `<script>` 元素直接嵌入代码。

*  `<script>` 标签加载外部脚本

所加载的脚本必须是纯的 `JavaScript` 代码，不能有`HTML`代码和`<script>`标签。

加载外部脚本和直接添加代码块，这两种方法不能混用。下面代码的`console.log`语句直接被忽略。

为了防止攻击者篡改外部脚本，`script`标签允许设置一个`integrity`属性，写入该外部脚本的 `Hash` 签名，用来验证脚本的一致性。

上面代码中，script标签有一个integrity属性，指定了外部脚本/assets/application.js的 SHA256 签名。一旦有人改了这个脚本，导致 SHA256 签名不匹配，浏览器就会拒绝加载。

*  事件属性  
    网页元素的事件属性（比如`onclick`和`onmouseover`），可以写入 `JavaScript` 代码。当指定事件发生时，就会调用这些代码。

上面的事件属性代码只有一个语句。如果有多个语句，使用分号分隔即可。

*  `URL` 协议  
    `URL` 支持`javascript:`协议，即在 `URL` 的位置写入代码，使用这个 `URL` 的时候就会执行 `JavaScript` 代码。

浏览器的地址栏也可以执行`javascript:`协议。将`javascript:console.log('Hello')`放入地址栏，按回车键也会执行这段代码。

如果 `JavaScript` 代码返回一个字符串，浏览器就会新建一个文档，展示这个字符串的内容，原有文档的内容都会消失。

上面代码中，用户点击链接以后，会打开一个新文档，里面有当前时间。

如果返回的不是字符串，那么浏览器不会新建文档，也不会跳转。

上面代码中，用户点击链接后，网页不会跳转，只会在控制台显示当前时间。

# script 元素 #

## 工作原理 ##

浏览器加载 `JavaScript` 脚本，主要通过`<script>`元素完成。正常的网页加载流程是这样的。

*  浏览器一边下载 `HTML` 网页，一边开始解析。也就是说，不等到下载完，就开始解析。
 *  解析过程中，浏览器发现`<script>`元素，就暂停解析，把网页渲染的控制权转交给 `JavaScript` 引擎。
 *  如果`<script>`元素引用了外部脚本，就下载该脚本再执行，否则就直接执行代码。
 *  `JavaScript` 引擎执行完毕，控制权交还渲染引擎，恢复往下解析 `HTML`网页。

如果有多个`script`标签，比如下面这样。

浏览器会**同时并行**下载`a.js`和`b.js`，但是，**执行时会保证先执行`a.js`，然后再执行`b.js`**，即使后者先下载完成，也是如此。

也就是说，脚本的执行顺序由它们在页面中的出现顺序决定，这是为了保证脚本之间的依赖关系不受到破坏。当然，加载这两个脚本都会产生“阻塞效应”，必须等到它们都加载完成，浏览器才会继续页面渲染。

## defer 属性 ##

> 为了解决脚本文件下载阻塞网页渲染的问题，一个方法是对`<script>`元素加入`defe`属性。它的作用是延迟脚本的执行，等到 `DOM` 加载生成后，再执行脚本。

上面代码中，只有等到 `DOM` 加载完成后，才会执行`a.js`和`b.js`。

## async 属性 ##

解决“阻塞效应”的另一个方法是对`<script>`元素加入`async`属性。

`async`属性的作用是，使用另一个进程下载脚本，下载时不会阻塞渲染。

`async`属性可以保证脚本下载的同时，浏览器继续渲染。需要注意的是，一旦采用这个属性，就无法保证脚本的执行顺序。哪个脚本先下载结束，就先执行那个脚本。

另外，使用`async`属性的脚本文件里面的代码，不应该使用`document.write`方法。

## 脚本的动态加载 ##

> `<script>`元素还可以动态生成，生成后再插入页面，从而实现脚本的动态加载。

['a.js', 'b.js'].forEach(function(src) { 
      let script = document.createElement('script');
      script.src = src;
      document.head.appendChild(script);
    });

好处

*  动态生成的`script`标签不会阻塞页面渲染
 *  也就不会造成浏览器假死。

缺点：

*  这种方法无法保证脚本的执行顺序，哪个脚本文件先下载完成，就先执行哪个。

如果想避免这个问题，可以设置`async`属性为`false`。

['a.js', 'b.js'].forEach(function(src) { 
      var script = document.createElement('script');
      script.src = src;
      script.async = false;
      document.head.appendChild(script);
    });

上面的代码不会阻塞页面渲染，而且可以保证`b.js`在`a.js`后面执行。  
不过需要注意的是，在这段代码后面加载的脚本文件，会因此都等待`b.js`执行完成后再执行。

**如果想为动态加载的脚本指定回调函数**，可以使用下面的写法。

end