<script> 按照出现顺序被执行

  • 后加载的脚本可以依赖先加载的脚本, 但是先加载的脚本堵塞, 整个网页的加载会堵塞.
  • 当一个脚本被执行时, 可以访问前面的 HTML 元素, 但不能访问后面的元素.
  • 页面元素在他之前的所有脚本都加载完之前是不会执行渲染的.

async 和 defer

HTML5 添加了两个工具用于控制脚本的执行

  • async 表示”不用马上执行”. 定义一个页面需要的变量或函数在async中是不行的, 因为你没法知道什么时候async代码会执行
  • defer 表示”等待页面解析完成之后执行”, 大致等价于把脚本绑定到window.onload事件. 当这个代码被执行, DOM 中的一切元素都可以访问, 不同于async, 所有加了defer的脚本会按照他们出现在 HTML 中的顺序执行, 只是推迟到页面解析后按顺序执行.

type 属性

设定解释器
若要修改 type 的默认属性(默认为 javascript), 可以通过一个标记实现:
&lt;meta http-equiv = "Content-Script-Type" content = "text/vbscript"

integrity 属性

integrity属性是子资源完整性新规范的一部分, 他允许你为脚本文件将包含的内容提供一个 hash, 这意味着可以防止在传输的时候内容丢失或被恶意修改. 就算使用了 SSL, 这个规范也是有意义的, 因为有时候你要加载的资源是你无法控制的站外资源.
如果你选择使用他, 就要在<script>标记里添加一个 hash 类型以及 hash 值, 将他们以连字符分隔
&lt;script src="..." integrity = "hash-value"&gt;&lt;/script&gt;

document.currentScript

IE 不支持的一个新东西叫 document.currentScript, 他指向当前正在执行的脚本, 如果你要从你嵌入的<script>中拿一些属性用

<script>和 innerHTML

通过 DOM 动态添加到页面上的 <script> 会被浏览器执行

var myScript = document.createElement("script");
myScript.textContent = "alert('hello')";
document.head.appendChild(myScript);

然而, 通过innerHTML动态添加到到 HTML 的 <script> 则不会被执行
document.head.innerHTML += "&lt;script&gt;alert('Hello')&lt;/script&gt;"
Note: 但是他会显示在 HTML 里(尽管不会执行)