Javascript 小解读

Javascript 概念

• Javascript 是单线程、非阻塞、异步的解释型脚本语言。
• Javascript 的设计初衷是让浏览器（Browser）与用户能进行交互和网页特效以补充 HTML 和 CSS 的不足。
• Javascript 的运行环境为浏览器（Browser）与 Node.js。其中 Node.js 是一个 Javascript 运行环境（Runtime），是一个基于 Chrome Javascript 运行时（Google V8）建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使得 Javascript 可以作为一种服务器脚本语言运行在服务器端（Server Side）运行。
• Javascript 的代码之所以能在浏览器（Browser）中被执行，是因为浏览器（Browser）中 Javascript 解释引擎的存在，即每一款浏览器都会有 Javascript 解释引擎，浏览器（Browser）外要运行 Javascript 代码，同样需要 Javascript 解释引擎，因此 Node.js 是基于 Google V8 建立的平台也就不足为奇了。IE 老版本的 JScript，IE9 以后的 Chakra，Mozilla 的 SpiderMonkey，Chrome 的 V8，Safari 的 Nitro，KDE Konqueror 的 KJS（Webkit 的 Javascript 引擎），Javascript 之父用 Javascript 写的 Narcissus，Java 语言写的 Rhino 等等，都是 Javascript 引擎，都能使 Javascript 独立于浏览器之外运行。
• Javascript 在 Node.js 未诞生之前绝大部分运行于浏览器（Browser）中，存在的形式也主要是将代码写在 script 标签之内与使用 script 标签进行引入，而以 CommonJs 为规范的 Node.js 到来无疑给 Javascript 带来一场划时代的革命，因为随之而来的是 Javascript 不管是在使用上还是在发展上都达到了异常火热的程度。

Javascript 特性

单线程

Javascript 通过操作 DOM 来实现与用户进行交互的，这决定了它只能是单线程的。如果 Javascript 是非单线程的，这将带来更为复杂的同步问题。比如一个线程在某个 DOM 节点上添加内容而同时另一个线程在删除这个 DOM 节点，这时候浏览器就傻傻分不清楚到底是该删除该 DOM 节点还是需要往这个 DOM 节点来添加内容了。可以使用一个公式来描述 Javascript 的单线程：一个线程 === 一个堆栈 === 一次执行一项任务。单线程意味着同一时间只能进行一件事情，前面的事件结束才能执行后面的事件，如果前面的事件需要花费很长的时间来完成执行，后面的事件一直处于等待的状态的话，这无疑会给用户带来异常糟糕的体验，因此单线程这个特性也决定了 Javascript 是非阻塞与异步的。

非阻塞

先说说什么是阻塞——阻塞调用是指调用结果返回之前，当前线程会被挂起（线程进入非可执行状态，在这个状态下，CPU 不会给线程分配时间片，即线程暂停运行）。函数只有在得到结果之后才会返回，非阻塞的概念与阻塞是相对的，指在不能立刻得到结果之前，该函数不会阻塞当前线程，而会立刻返回。Javascript 是单线程的，如果一个事件或者任务是阻塞的，后面的事件或者任务必须得等待前面的事件或者任务执行完毕得到结果之后才能进入可执行状态，这不仅仅会严重影响总任务的执行效率，更会带来灾难性的用户体验，毕竟多等待哪怕是 1s 的时间都会产生不可逆转的用户流失率。

异步

先说说什么是同步——同步是在 C 端发出一个功能调用时，在没有得到结果之前，该调用就不返回。也就是必须一件一件事情地做，等前一件做完了才能做下一件事情。例如普通 B/S 模式（同步）：提交请求——>等待服务器处理——>处理完毕返回，这个期间 C 端浏览器不能干任何事情。异步的概念与同步是相对的，异步指的是当 C 端一个异步过程调用发出后，调用者不能立刻得到结果。实际处理这个调用的部件在完成后，通过状态、通知和回调来通知调用者。

Javascript 运行机制

相关概念

• 内存堆（Memory Heap）：在程序中定义的变量的所有内存分配发生的地方。
• 调用栈（Call Stack）：调用栈是解释器（比如浏览器中的 JavaScript 解释器）追踪函数执行流的一种机制。当执行环境中调用了多个函数函数时，通过这种机制，我们能够追踪到哪个函数正在执行，执行的函数体中又调用了哪个函数。
• 事件循环（Event Loop）：事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。
• 回调队列（Callback Queue）：异步 ​​ 代码被推送到的地方，并等待执行。
• 网页接口（Web API）： Web API 本身并不是 Javascript 语言的一部分，却建立在 Javascript 语言核心的顶部，为使用 Javascript 代码提供额外的超强能力。

运行原理

无回调

示例代码

console.log("First Output!");

console.log("Second Output!");

console.log("Third Output!");

当 Javascript 程序中无任何涉及 Web API 范畴的执行函数时，执行函数都将被推进调用栈中，执行顺序遵循栈的后进先出（LIFO）原则，由主线程执行直到调用栈被清空。因此上述将会依次输出：

// First Output!

// Second Output!

// Third Output!

有回调

示例代码

const lastOutput = () => console.log("Last Output!");

(() => {
  console.log("First Output!");

  setTimeout(lastOutput(), 0);

  console.log("Second Output!");
})();

• 立即执行函数被移至 Javascript 的调用堆栈
• 执行第一个 console.log，输出 First Output!
• setTimeout 属于 Web API 的范畴，Web API 马上对回调函数 lastOutput 进行解析，并在完成之后将其推进回调队列当中
• 执行第二个 console.log，输出 Second Output!
• Event Loop 将进行连续查找以查看调用堆栈是否为空
• 调用堆栈清除或释放后，它将在堆栈中使用该回调函数并完成其执行

Web API 范畴

第一种定义

• setTimeout
• setInterval
• I/O
• UI Rendering
• ...

第二种定义

• DOM（document）
• AJAX（XMLHttpPRequest）
• Timeout（setTimeout）
• TimeInterval（setTimeInterval）
• ...

了解 Web API 的范畴能让我们清楚地了解到哪些事件或者任务能够同步地被调用栈立即执行，哪些事件或者任务需要 Web API 解析完成之后，将其中的回调函数先放入回调队列中，等待调用栈清空或者释放之后再被推进调用栈中进行执行

总结

通过对 Javascript 相关概念与运行机制的了解，将有助于前端开发人员对 Javascript 程序代码进行合理地编写与恰当地优化，对 Javascript 日常开发中遇到的问题能有迹可循，对 Javascript 日常开发中的性能优化能有本可依。