持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第10天，点击查看活动详情
前端最重要的三大基础（前端三剑客），HTML CSS JAVASCRIPT，学习前端必学的三门基础知识点。
特别是JavaScript，这个基础必须是要最扎实的，不管在哪个项目中，前端都不会离开他的，所以我们要打牢它的基础。学习完基础后JavaScript的深入学习也是必不可少的，这节开始讲一下线程机制与事件机制相关知识：
- 浏览器内核
- 定时器
- JS是单线程执行的
- 浏览器的事件循环(轮询)模型
- H5 Web Workers(多线程)
同期回顾：
线程机制与事件机制
1. JS是单线程执行的
-
如何证明js执行是单线程的?
- setTimeout()的回调函数是在主线程执行的
- 定时器回调函数只有在运行栈中的代码全部执行完后才有可能执行
-
为什么js要用单线程模式, 而不用多线程模式?
- JavaScript的单线程，与它的用途有关。
- 作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。
- 这决定了它只能是单线程，否则会带来很复杂的同步问题
-
代码的分类:
- 初始化代码
- 回调代码
-
js引擎执行代码的基本流程
- 先执行初始化代码: 包含一些特别的代码
- 设置定时器
- 绑定监听
- 发送ajax请求
- 后面在某个时刻才会执行回调代码
2. 浏览器的事件循环(轮询)模型
-
所有代码分类
- 初始化执行代码: 包含绑定dom事件监听, 设置定时器, 发送ajax请求的代码
- 回调执行代码: 处理回调逻辑
-
js引擎执行代码的基本流程:
- 初始化代码===>回调代码
-
模型的2个重要组成部分:
- 事件管理模块
- 回调队列
- 模型的运转流程
- 执行初始化代码, 将事件回调函数交给对应模块管理
- 当事件发生时, 管理模块会将回调函数及其数据添加到回调列队中
- 只有当初始化代码执行完后(可能要一定时间), 才会遍历读取回调队列中的回调函数执行
重要概念
-
执行栈 execution stack 所有的代码都是在此空间中执行的
-
浏览器内核 browser core js引擎模块(在主线程处理) 其它模块(在主/分线程处理)
-
任务队列(callback queue) task queue
-
消息队列(callback queue) message queue
-
事件队列(callback queue) event queue
-
事件轮询 event loop 从任务队列中循环取出回调函数放入执行栈中处理(一个接一个)
-
事件驱动模型 event-driven interaction model
-
请求响应模型 request-response model
