JavaScript笔记 12：高级4（线程机制与事件机制）

最新推荐文章于 2024-07-10 15:48:27 发布

Alice_LMY

最新推荐文章于 2024-07-10 15:48:27 发布

阅读量149

点赞数

分类专栏： JavaScript笔记

本文链接：https://blog.csdn.net/Alice_Lee_Lee/article/details/119248124

版权

JavaScript笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

进程与线程

进程：

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

线程：

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

浏览器内核

支撑浏览器运行的最核心的程序
不同的浏览器可能不同
1. Chrome，Safari：webkit
2. Firefox：Gecko
3. IE：Trident
4. 360，搜狗等国内浏览器：Trident + wenkit
内核由很多模块组成
1. （主线程）JS引擎模块：负责JS程序的编译与运行
2. （主线程）html，css文档解析模块：负责页面文本的解析
3. （主线程）DOM/CSS模块：负责dom/css在内存中的相关处理
4. （主线程）布局和渲染模块：负责页面的布局和效果的绘制（内存中的对象）
5. ……
6. （分线程）定时器模块：负责定时器的管理
7. （分线程）DOM事件响应模块：负责事件的管理
8. （分线程）网络请求模块：负责ajax请求

定时器引发的思考

定时器真的是定时执行的吗？

定时器并不能保证真的定时执行
一般会延迟一丁点（可以接受），也有可能延迟很长时间（不能接受）

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

在主线程执行的，JS是单线程的

定时器是如何实现的

事件循环模型

$(function () {
  document.getElementById("btn").onclick = function () {
    var start = Date.now();
    console.log("启动定时器前......");
    setTimeout(function () {
      console.log("定时器执行了", Date.now() - start); // 478
    }, 200);
    console.log("启动定时器后......");

    for (let i = 0; i < 1000000000; i++) {
    }
  };
});

JS是单线程执行的

如何证明JS执行是单线程的？

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

为什么JS要用单线程模式，而不用多线程模式？

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

代码的分类

初始化代码
回调代码

JS引擎执行代码的基本流程

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

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

模型原理图
在这里插入图片描述
相关重要概念

执行栈：所有的代码都是在此空间中执行的
浏览器内核
任务队列、消息队列、事件队列、回调队列：callback queue
事件轮询：从任务队列中循环去除回调函数放入执行栈中处理
事件驱动模型
请求响应模型

执行流程

执行初始化代码，将事件回调函数交给对应模块管理
当事件发生时，管理模块会将回调函数以及数据添加到回调队列中
只有当初始化代码执行完后（可能要一定事件），才会遍历读取回调队列中的回调函数执行

H5 Web Workers（多线程）

H5规范提供了JS分线程的实现，取名为：Web Workers

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

使用

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

var onmessage = function (event) {
  // 获取主线程发送来的数据
  var index = event.data;
  // 计算
  var result = fibonacci(index);
  // 将处理后的数据发送回主线程
  postMessage(result);
};
function fibonacci(index) {
  if (index <= 2) {
    return 1;
  }
  return fibonacci(index - 1) + fibonacci(index - 2);
}
// window此时不可见，因此无法操作页面
console.log(this); // DedicatedWorkerGlobalScope

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

<input id="in01" type="text" placeholder="数值">
<button id="btn01">计算</button>
<script>
    var input = document.getElementById('in01');
    document.getElementById('btn01').onclick = function () {
    	// 创建一个Worker对象
    	var worker = new Worker('../js/demo.js');
        // 接收worker传过来的数据函数
        worker.onmessage = function (event) {
            alert(event.data);
        }
        // 向worker发送数据
        worker.postMessage(input.value);
    }
</script>