【js高级】四、线程机制与事件机制（1.进程与线程 2.浏览器内核 3.定时器引发的思考 4.js单线程执行 5.浏览器的事件循环模型 6.H5 Web Workers多线程）

本文链接：https://blog.csdn.net/qq_20535249/article/details/103133427

四、线程机制与事件机制

在这里插入图片描述

1.进程与线程

进程(process)：

程序的一次执行, 它占有一片独有的内存空间
可以通过windows任务管理器查看进程

线程(thread)：

是进程内的一个独立执行单元
是程序执行的一个完整流程
是CPU的最小的调度单元

在这里插入图片描述
相关知识：

应用程序必须运行在某个进程的某个线程上
一个进程中至少有一个运行的线程: 主线程, 进程启动后自动创建
一个进程中也可以同时运行多个线程, 我们会说程序是多线程运行的
一个进程内的数据可以供其中的多个线程直接共享
多个进程之间的数据是不能直接共享的
线程池(thread pool): 保存多个线程对象的容器, 实现线程对象的反复利用
单线程与多线程，都是指在一个进程内的单和多。

相关问题：

①何为多进程与多线程?
多进程运行: 一应用程序可以同时启动多个实例运行
多线程: 在一个进程内, 同时有多个线程运行
②比较单线程与多线程?

多线程：
- 优点：能有效提升CPU的利用率
- 缺点：创建多线程开销、线程间切换开销、死锁与状态同步问题
单线程：
- 优点：顺序编程简单易懂
- 缺点：效率低
③JS是单线程还是多线程?
js是单线程运行的
但使用H5中的 Web Workers可以多线程运行
④浏览器运行是单线程还是多线程?
都是多线程运行的
⑤浏览器运行是单进程还是多进程?
有的是单进程：firefox、老版IE
有的是多进程：chrome、新版IE
⑥如何查看浏览器是否是多进程运行的呢?
任务管理器–>进程

2.浏览器内核

1.什么是浏览器内核
支撑浏览器运行的最核心的程序

2.浏览器内核列表

Chrome, Safari : webkit
firefox : Gecko
IE	: Trident
360,搜狗等国内浏览器: Trident + webkit

3.内核的组成
在这里插入图片描述

3.定时器引发的思考

1. 定时器真是定时执行的吗?

定时器并不能保证真正定时执行
一般会延迟一丁点(可以接受), 也有可能延迟很长时间(不能接受)

2. 定时器回调函数是在分线程执行的吗?

在主线程执行的, js是单线程的

3. 定时器是如何实现的?

事件循环模型

4.js时单线程执行的

1. 如何证明js执行是单线程的?

setTimeout()的回调函数是在主线程执行的
定时器回调函数只有在运行栈中的代码全部执行完后才有可能执行

2. 为什么js要用单线程模式, 而不用多线程模式?

JavaScript的单线程，与它的用途有关。
作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM。
这决定了它只能是单线程，否则会带来很复杂的同步问题

3. 代码的分类:

初始化代码
回调代码

4. js引擎执行代码的基本流程

1.先执行初始化代码: 包含一些特别的代码：
- 设置定时器
- 绑定监听
- 发送ajax请求
2.后面在某个时刻才会执行回调代码

5.浏览器的事件循环（轮询）模型

在这里插入图片描述

1. 执行栈
execution stack
所有的代码都是在此空间中执行的

2. 浏览器内核
browser core
js引擎模块(在主线程处理)
其它模块(在主/分线程处理)

3.回调队列callback queue

任务队列： task queue
消息队列： message queue
事件队列： event queue

4.事件轮询
event loop
从任务队列中循环取出回调函数放入执行栈中处理(一个接一个)

8. 请求响应模型
request-response model

7. 事件驱动模型
event-driven interaction model

6.H5 Web Workers(多线程)

1.介绍

Web Workers 是 HTML5 提供的一个javascript多线程解决方案我们可以将一些大计算量的代码交由web
Worker运行而不冻结用户界面但是子线程完全受主线程控制，且不得操作DOM。
所以，这个新标准并没有改变JavaScript单线程的本质

2.使用

创建在分线程执行的js文件

 self.onmessage =function (event){ //不能用函数声明
    console.log('onMessage()22');
    var upper = event.data.toUpperCase();//通过event.data获得发送来的数据
    self.postMessage( upper );//将获取到的数据发送会主线程
}

在主线程中的js中发消息并设置回调

  //创建一个Worker对象并向它传递将在新线程中执行的脚本的URL
var worker = new Worker("worker.js");  
//接收worker传过来的数据函数
worker.onmessage = function (event) {     
    console.log(event.data);             
};
//向worker发送数据
worker.postMessage("hello world");

3.图解
在这里插入图片描述

4.应用练习
编程实现斐波那契数列（Fibonacci sequence）的计算
F（0）=0，F（1）=1，… F（n）=F(n-1)+F(n-2)

①直接在主线程上：

var fibonacci =function(n) {
    return n <2 ? n : fibonacci(n -1) + fibonacci(n -2);
};
console.log(fibonacci(48));

②使用Worker在分线程

//主线程文件
var worker = new Worker('worker2.js');
worker.addEventListener('message', function (event) {
    var timer2 = new Date().getTime();
    console.log('结果：' + event.data, '时间:' + timer2, '用时：' + ( timer2 - timer ));
}, false);

var timer = new Date().getTime();
console.log('开始计算: ', '时间:' + timer);
setTimeout(function () {
    console.log('定时器函数在计算数列时执行了', '时间:' + new Date().getTime());
}, 1000);

worker.postMessage(40);
console.log('我在计算数列的时候执行了', '时间:' + new Date().getTime());

//分线程文件
var fibonacci =function(n) {
    return n <2 ? n : fibonacci(n -1) + fibonacci(n -2);
};

self.onmessage = function(event) {
    var n = parseInt(event.data, 10);
    self.postMessage(fibonacci(n));
};