如果你做过可视化开发，不知道你是否遇到过这样一个棘手的问题：因为需要向页面中添加大量的图表或点线元素而导致页面卡顿、性能下降。一般来说你可能考虑一个方案，从 SVG 换到了 canvas，这或多或少可以解决你面临的痛点，但是背后的原因你到底了解多少？隐藏在浏览器背后的秘密到底有多少，内核和引擎我们又该了解到什么程度？换个方面来说，我们都知道 JavaScript 是单线程的，那么 HTML5 规范引入了一个叫 Web Worker 的标准是否意味着 JavaScript 真正跨入多线程编程的时代了呢？
今天在看《深入 HTML5 Web Worker 应用实践：多线程编程》一文时发现自己对 JavaScript 解释器和浏览器的线程机制理解的不是特别透彻，很容易混淆浏览器多线程机制并错误认为由于 Web Worker 的设计使得 JavaScript 拥有了多线程的能力。事后搜了不少资料进行学习，整理成此文，主要介绍浏览器的各个引擎、线程间的工作机制以及 JavaScript 单线程的一些事。
目录
- 浏览器的那些引擎与内核
- 呈现引擎
- JavaScript 解释器
- JavaScript 与浏览器的线程机制
- 单线程的 JavaScript
- 页面卡顿的真正原因
- 浏览器中的那些线程
- 由定时触发器线程想到 JavaScript 的异步
知乎阅读：聊聊 JavaScript 与浏览器的那些事 – 引擎与线程
总结
总体来看，本文先介绍了浏览器的主要组件及各自功能，然后从前端开发的角度出发着重介绍了呈现引擎（也就是 UI 渲染线程）和 JavaScript 解释器（也就是 JavaScript 引擎线程）的作用以及各自的工作机制。
在介绍完浏览器引擎与内核之后，我们谈到了 JavaScript 的单线程机制实现以及设计初衷，之后结合 JavaScript 解释器以及呈现引擎的工作机制谈了谈造成页面卡顿的真正原因。最后我们聊了聊浏览器中的那些线程以及 JavaScript 的一些异步内容。