浏览器组成、工作原理、渲染原理及重流重绘 - 《react》

[TOC]

浏览器加载javascript脚本，主要通过来完成。

一、<script>元素内部可以直接写 JavaScript 代码

<script>
  var x = 1 + 5;
  console.log(x);
</script>

二、 <script>标签也可以指定加载外部的脚本文件

<script src="https://www.example.com/script.js"></script>

使用这种方式也有一些需要注意的地方：
① 如果脚本文件使用了非英语字符，还应该注明字符的编码。

<script charset="utf-8" src="https://www.example.com/script.js"></script>

② 所加载的脚本必须是纯的 JavaScript 代码，不能有HTML代码和<script>标签。
③ 加载外部脚本和直接添加代码块，这两种方法不能混用。下面代码的console.log语句直接被忽略。

<script charset="utf-8" src="example.js">
  console.log('Hello World!');
</script>

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

<script src="/assets/application.js"
  integrity="sha256-TvVUHzSfftWg1rcfL6TIJ0XKEGrgLyEq6lEpcmrG9qs=">
</script>

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