JavaScript 单线程,非阻塞,异步,并发的运行时

拥有一个调用栈(call stack),一个事件循环(event loop),一个回调队列(callback queue),一些其他的 api 等。

JavaScript Frameworks

V8 引擎包括一个堆 heap 和一个栈 stack。堆用于内存分配,栈用于执行上下文。

v8

调用栈

单线程 == 单调用栈 == 一次执行一个事务

callstack

如果错误的使用递归,会造成爆栈。

callstack overflow

阻塞

如果执行很慢,会怎样?

浏览器会同时执行很多动作,如果很慢,会造成交互的阻塞,用户体验很差。

解决方案就是异步回调(Asynchronous Callback)

并发和事件循环

一次执行一个事务,但事实并非如此。

JavaScript 生活在单线程的世界,但是它还有很多兄弟线程,用来执行 setTimeout, ajax 之类的异步调用。在浏览器这个大家庭,JavaScript,网络 API 和事件循环一起合作,共同完成交互。

demo

高级技巧

考虑异步,不要阻塞事件循环。

死循环。

提问时间

  • 哪些事情很慢?渲染,重绘,排版。
  • 绘制/渲染如何与事件循环合作?
  • 你讨论的这个超酷 demo 叫什么?loupe

REF