02 | 读 JavaScript 高程

今天来瞧一瞧第二章
在 HTML中使用 JavaScript

script 标签属性的变化

首先是 script 标签的属性问题，在第三版中提到有6个属性，在第四版中已经变成了8个。

// 第三版
async charset defer language src type
// 第四版
async charset crossorigin defer intergrity language src type src type

可以看出多出来的两个属性是crossorigin intergrity。

废话了这么多，实际上使用最多的就是一个src属性。

运行流程

在第三版 11页 中有那么一句话。

包含在 <script> 元素内部的 JavaScript 代码将被从上至下依次解释。

解释？何为解释？

对于 JavaScript，预处理 + 执行 = 解释，这里展开会有很多内容，涉及变量提升，作用域等高阶知识，有空单独写。

标签放哪里

js代码会阻断代码运行，通常会将 script 放到文档底部。

那么有没有情况一定要放到前面？

你别说，还真有，比如 Vue，https://github.com/vuejs/vuejs.org/blob/master/src/v2/examples/vue-20-hello-world/index.html，在这里例子里 script 放到了 head 里面，这是因为后面要用到，如果将 script 放到文档的底部，那么在该 js 文件未加载前是无法使用 Vue 的。

问题

• JavaScript 的运行机制是什么？
• 单独将 JavaScript 抽离的优点是什么？
• JavaScript 放到文档哪里比较好？