https://github.com/jecyu/js-event-loop

♻️JS 事件循环原理解析
https://github.com/jecyu/js-event-loop

Last synced: 13 days ago
JSON representation

♻️JS 事件循环原理解析

• Host: GitHub
• URL: https://github.com/jecyu/js-event-loop
• Owner: jecyu
• License: mit
• Created: 2019-11-28T01:19:03.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T01:51:08.000Z (almost 2 years ago)
• Last Synced: 2023-03-06T01:08:48.943Z (over 1 year ago)
• Language: Shell
• Homepage: https://jecyu.github.io/JS-Event-Loop/
• Size: 14.2 MB
• Stars: 9
• Watchers: 1
• Forks: 0
• Open Issues: 34
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# JS 事件循环原理与异步机制解析

相信使用过 Vue 开发应用的同学，肯定用过 nextTick 这个手法来处理异步视图更新的问题，例如获取一个。我以前也常常用 vue nextTick 这么做，由于我并不明白为什么要这么做，导致就是有时候管用，有时候不管用。不管用的时候，于是我去 Google 了一番 “nextTick”，看到不少文章里都提到了事件循环，提到**宏任务**，**微任务**这些？一头雾水，当时我妄图想通过一两篇文章来快速搞懂这些东西，结果后面很快又忘了。

归根结底，还是我的计算基础不够扎实。而事件循环系对于前端er 来说，是非常重要的。于是，今次我就这方面的内容，从计算机 CPU 的相关基础知识到浏览器层面的事件循环系统梳理，希望给对事件循环理解不够透彻的同学带来点帮助。当然，在此也非常感谢网上的优秀文章、视频等资源，让我节省不少学习的时间。

本电子书的目标是让前端开发者知道什么是进程与线程、浏览器的JS 单线程机制等，当他写代码的时候，能够预知异步代码的运行时机及如何使用异步的代码来实现业务功能，视图 DOM 的更新。本书内容分享围绕着三部分：事件循环，异步，DOM 渲染。

- Given

一个可能听说过事件循环概念以及对计算机知识记忆薄弱的同学🚶

- When

当他🚶看完并练习本电子书后

- Then

  - 他能够把`Given/When/Then`的套路学会。

  - 他能够描述出并发及并行的区别。、

  - 他清晰地描述出进程与线程的区别以及 JS 单线程带来的好处。

  - 当他写代码的时候，他能够预知异步代码的运行时机及如何使用异步的代码来实现业务功能，DOM 的更新。

  - 他知道什么情况下浏览器会阻塞页面，当遇到页面卡顿时，他能够使用浏览器性能监测工具定位原因。

## 章节目录

为了让同学们系统地理解事件循环的知识，分为栈和队列、CPU、浏览器、事件循环、Vue、chrome 性能六个章节，如下图：

**第一章：回顾硬核知识：栈、队列**

讲解了栈和队列的相关概念以及它们的基本用法，为后面的知识打下基础。

**第二章：说说 CPU 层面的运作**

描述了下CPU线程、进程、阻塞、非阻塞、并发、并行、i/o 读写。

**第三章：谈谈浏览器背后的运行机制**

详细讲解了浏览器背后的运作原理，从浏览器多进程架构到浏览器内核的组成部分。

**第四章：深入剖析 JS 事件循环原理**

讲解了从 Event loop 谈 JS 的运行机制到 宏任务（macrotask）与微任务（microtask）。

**第五章：Vue 异步更新策略：nextTick**

结合 Vue 的响应式源码，主要讲解了 Vue 是如何异步更新DOM的。

**第六章：扩展应用：chrome 性能监测**

结合前面几章学到的知识，分析下如何使用 chrome 性能监测工具。

> 声明：本书的内容会借鉴和参考社区优秀的文章，如有侵犯你的权益，请联系我修改删除，谢谢。