# JavaScript线程机制与事件机制
# 线程与进程
- 进程
- 程序的一次执行,它占有一片独有的内存空间
- 可以通过
window
任务管理器查看进程
- 线程
- 是进程内的一个独立执行单元
- 是程序执行的一个完整流程
- 是CPU的最小的调度单元
- 关系
- 一个进程至少有一个线程(主)
- 程序是在某个进程中的某个线程执行的
# 浏览器内核模块
- 主线程
js
引擎模块:负责js程序的编译与运行- html,css文档解析模块:负责页面文本的解析
- DOM/CSS模块:负责dom/css在内存中的相关处理
- 布局和渲染模块:负责页面的布局和效果的绘制(内存中的对象)
- 分线程
- 定时器模块:负责定时器的管理
- DOM事件响应模块:负责事件的管理
- 网络请求模块:负责Ajax请求
# js线程
- js是单线程执行的(回调函数在主线程)
- h5提出了实现多线程的方案:Web Workers
- 只能是主线程更新界面
# 定时器问题
- 定时器并不是完全定时
- 如果在主线程执行了一个长时间的操作,可能导致延时才处理
# 事件处理机制
- 代码分类
- 初始化执行代码:包含绑定dom事件监听,设置定时器,发送
ajax
请求的代码 - 回调执行代码:处理回调逻辑
- 初始化执行代码:包含绑定dom事件监听,设置定时器,发送
- js引擎执行代码的基本流程
- 初始话代码 ==> 回调代码
- 先执行初始化代码:包含一些特别的代码回调函数(异步执行)
- 设置定时器
- 绑定事件监听
- 发送
ajax
请求
- 后面在某个时刻才会执行回调代码
- 模块的2个重要组成部分
- 事件管理模块
- 回调队列
- 模块的运转流程
- 执行初始化代码,将事件回调函数交给对应的模块管理
- 当事件发生时,管理模块会将回调函数及其数据添加到回调队列中
- 只有当初始化代码执行完后(可能要一定时间),才会遍历读取回调队列中的回调函数执行
# Web Workers
// 可以让js在分线程执行
// main.js
var worker = new Worker('worker.js')
worker.onMessage = function(event) {
console.log(event.data) // 主线程接收分线程发送过来的数据
}
worker.postMessage(data) // 向分线程发送数据
// worker.js
var onmessage = function(event) {
console.log(event.data) // 接口主线程发送数据
// 向主线程发送数据
postMessage(reslut)
}
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
缺点
worker
内代码不能操作DOM
更新视图- 浏览器兼容问题
- 不能跨域加载
Js
← 创建对象模式 异步编程promise →