最新消息:站点添加了一些不太友好的内容,请见谅...

聊聊 JavaScript 与浏览器的那些事 – 引擎与线程

山外有山 onlyling 173浏览 0评论

如果你做过可视化开发,不知道你是否遇到过这样一个棘手的问题:因为需要向页面中添加大量的图表或点线元素而导致页面卡顿、性能下降。一般来说你可能考虑一个方案,从 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 的一些异步内容。

转载请注明:OnlyLing-WEB前端开发者 » 聊聊 JavaScript 与浏览器的那些事 – 引擎与线程

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址