JavaScript 的工作原理

最近我们经常讨论 JavaScript。我偶然发现了一系列题为“JavaScript 工作原理”的文章。它们写得非常精彩，并且有大量图表来解释 JavaScript 的工作原理。

作者 Alexander Zlatkov 的前提如下：

事实证明，有很多开发人员每天都在使用 JavaScript，但却不了解其背后发生的事情。

以下是各篇文章：

• 引擎、运行时和调用堆栈的概述

• V8 引擎内部 + 编写优化代码的 5 个技巧：讨论 V8、其编译和优化步骤

• 内存管理 + 如何处理 4 种常见的内存泄漏：深入探讨内存管理和垃圾收集（引用计数和标记-清除）的主题。许多高级语言都有类似的垃圾收集机制。

• 事件循环和异步编程的兴起 + 使用 async/await 更好地编码的 5 种方法：讨论事件循环，解释为什么计时器不能精确，并概述承诺和 async/await。

• 深入研究带有 SSE 的 WebSockets 和 HTTP/2 + 如何选择正确的路径：这更多地涉及 HTTP/2、Websockets 和服务器端事件以及每种技术的优势/劣势。

• 与 WebAssembly 的比较 + 为什么在某些情况下使用它比 JavaScript 更好：WebAssembly 目前对我来说似乎有点粗糙，但如果最终一切都用 JS 编写，最好有一个 WebAssembly 核心：P 这个用虚幻引擎制作的演示非常棒：https://s3.amazonaws.com/mozilla-games/tmp/2017-02-21-SunTemple/SunTemple.html - 不过，我不确定我们是否会很快在普通的 Web 应用程序中看到 WebAssembly 的使用。

• Web Workers 的构成要素 + 5 种使用场景：它们的作用、如何利用它们、它们的局限性等等。您的应用中是否有“普通”Web Workers 的使用场景？我指的是除了 PWA 中的 Service Workers 之外的场景。

• Service Worker、其生命周期和用例：本文将专门讨论 Service Worker 和 PWA。总有一天我也会接触 PWA，我现在还处于“SPA 真棒”的阶段 :D。我希望在 2018-2019 年，所有浏览器对 PWA 的支持率都能达到 100%，这样我们就能找到一个真正能够替代原生应用及其分发方式的替代方案。我记得第一代 iPhone 就有一些 PWA，原生应用是后来才出现的。离线缓存和 HTTP/2 也有助于提升手机性能。

• Web 推送通知机制：解释推送 API 和通知 API 及其通过服务工作者的使用。

• 使用 MutationObserver 跟踪 DOM 的变化：我肯定不太了解这个细节。网络时代已经取得了巨大的进步！有了它，你实际上可以跟踪用户在你的页面上做的每一件事，真吓人 :D

• 渲染引擎及性能优化技巧：讲解DOM、CSSOM以及浏览器渲染引擎，以及如何针对该引擎进行JS、CSS的优化。

• 网络层内部 + 如何优化其性能和安全性：浏览器中的网络究竟是如何工作的？本文将探讨这个问题。

• CSS 和 JS 动画的底层原理 + 如何优化其性能：CSS 和 JS 动画的工作原理以及如何正确使用。我在这方面确实落后了，我觉得自己从未在 Web 应用中真正使用过动画。

• 解析、抽象语法树 (AST) + 5 个关于如何最小化解析时间的技巧：JS 如何转换为 AST 以及各种引擎如何优化字节码加载。

• Babel 和 TypeScript 中的类和继承 + 转译的内部结构：原型链如何工作，类如何实现和转译。

• 存储引擎 + 如何选择合适的存储 API：讨论各种浏览器存储选项（从 cookie 到 IndexedDB）及其优缺点。

• Shadow DOM 的内部结构 + 如何构建自包含组件：有关 shadow dom、组件、插槽和范围 CSS 的所有信息。

• WebRTC 和点对点网络机制：WebRTC、其隐藏的复杂性及其用例。

• 自定义元素的底层 + 构建可重用组件的最佳实践：如何使用现代 JavaScript 正确使用自定义元素以及它们具有哪些浏览器支持。

附言：我与这家公司或这个博客没有任何关系，我只是觉得这些内容很酷 :-)