JS高级（4）——线程机制与事件机制

最新推荐文章于 2023-03-21 20:47:25 发布

阿牛大牛中

最新推荐文章于 2023-03-21 20:47:25 发布

阅读量191

点赞数

分类专栏： JavaScirpt

本文链接：https://blog.csdn.net/weixin_46351593/article/details/106916663

版权

JavaScirpt 专栏收录该内容

35 篇文章 8 订阅

订阅专栏

文章目录

线程机制与事件机制

线程机制与事件机制

进程与线程

进程（process）
- 程序的一次执行，它占有一片独有的内存空间。
- 可以通过任务管理器查看
线程（thread）
- 进程内的一个独立执行单元
- 是程序执行的一个完整流程
- 是CPU最小的调度单元
相关知识
- 应用程序必须运行在某个进程的某个线程上。
- 一个进程中至少有一个运行的线程：主线程，进程启动后自动创建。
- 一个进程中可以同时运行多个线程，我们说程序是多线程运行。
- 一个进程内的数据可以供其中的多个线程直接共享。
- 多个线程之间的数据不能直接共享。
- 线程池（thread pool）：保存多个线程对象的容器，实现线程对象的反复利用。
相关问题
- 何为多进程、多线程：
  - 多进程：一个应用程序可以同时启动多个实例运行。
  - 多线程：在一个进程内，同时有多个线程运行。
- 比较单线程与多线程：
  - 多线程：优点：能有效提高CPU的利用率。缺点：创建多线程开销，线程间切换开销，死锁与状态同步问题。
  - 单线程：优点：顺序变成简单易懂。缺点：效率低。
- JS是单线程还是多线程？
  - JS是单线程运行的
  - 但使用H5中的Web Workers可以多线程运行
- 浏览器是单线程还是多线程?
  - 都是多线程的。
- 浏览器运行时单进程还是多进程的？
  - 有的是单进程：firefox、老IE
  - 有的是多进程：Chrome、新IE

浏览器内核

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

定时器引发的思考

定时器真的是定时执行的么？
- 定时器不能保证真正定时执行
- 一般会延时一丁点（可以接受），但也有可能延长很长时间（不能接受）
定时器回调函数是在分线程执行的么？
- 在主线程执行的，js是单线程的。
定时器是如何实现的？
- 时间循环模型（未讲）

JS是单线程执行的

如何证明js执行是单线程的？
- setTimeout()的回调函数是在主线程执行的。
- 定时器回调函数只有在运行栈中的代码全部执行完后才有可能执行。
为什么js要用单线程模式，而不用多线程模式？
- JavaScript的单线程，与它的用途有关。
- 作为浏览器脚本语言，JavaScript的主要用途是于用户互动，以及操作DOM。
- 这决定了它只能是单线程，否则会带来很复杂的同步问题。
代码分类：
- 初始化代码
- 回调代码
JS引擎执行代码的基本流程：
- 先执行初始化代码：包含一些特别的代码回调函数（异步执行）
- 设置定时器
- 绑定监听器
- 发送ajax请求
- 后面在某个时刻才会执行回调代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>09_定时器引发的思考</title>
</head>
<body>

<button id="btn">启动定时器</button>

<script type="text/javascript">


  setTimeout(function () {
    console.log("timeout 2222");

  },2000);

  setTimeout(function () {
    console.log("timeout 1111");
  },1000);

  function fn() {
      console.log("fn");

  }
  fn();
  console.log("alert()之前");
  alert("-----")//暂停当前主线程的执行，同时暂停计时，点击确定后，恢复程序的执行和计时
  console.log("alert()之后");


</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EL3nBjpF-1592877095437)(/Users/mac/Desktop/MarkDown /Javascript/JS高级/JS高级（4）图片/1.gif)]

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

所有代码分类
- 初始化代码（同步代码）：包含绑定dom事件监听，设置定时器，发送ajax请求的代码。
- 回调执行代码（异步代码）：处理回调逻辑
JS引擎执行代码的基本流程：
- 初始化代码 ==> 回调代码
模型的2个重要组成部分：
- 事件（定时器管理模块、dom事件、Ajax）管理模块
- 回调队列
模型的运转流程
- 执行初始化代码，将事件回调函数交给对应模块管理。
- 当事件发生时，管理模块会将回调函数及其数据添加到回调队列中
- 只有当初始化代码执行完后（可能要一定时间），才会遍历读取回调队列中的回调函数

H5 Web Workers（多线程）

H5规范提供了JS分线程的实现，取名为：Web Workers
介绍
- Web Workers是HTML5提供的一个javascript多线程解决方案
- 我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面
- 但子线程完全受主线程控制，且不得操作DOM。所以这个新标准并没有改变JavaScript单线程的本质。
相关API
- Worker：构造函数，加载分线程执行的JS文件
- Worker.prototype.onmessage：用于接收另一个线程的回调函数
- Worker.prototype.postMessage：向另一个线程发送消息

html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10_WebWorkers</title>
</head>
<body>
<input type="text" placeholder="数值" id="number">
<button id="btn">计算</button>
<script type="text/javascript">

  var input = document.getElementById('number');
  document.getElementById('btn').onclick = function () {
      var number = input.value;

      //创建一个Worker对象
     var worker = new Worker("worker.js");

     //绑定监听
      worker.onmessage = function (event) {
        console.log("主线程接收分线程返回的数据："+event.data);
        alert(event.data);
      }
      //向分线程发送消息
      worker.postMessage(number);
      console.log("主线程向分线程发送数据："+number);

  };
</script>
</body>
</html>

javascript文件：

function fibonacci(n) {
  return n<=2?1:fibonacci(n-1)+fibonacci(n-2);
}

var onmessage = function (event) {
  var number = event.data;
  console.log("分线程接收到主线程发送的数据："+number);
  var result = fibonacci(number);
  postMessage(result);
  console.log("分线程向主线程返回数据："+result);
}

不足：
- worker内代码不能操作DOM（更新UI），分线程中的全局对象不再是window，所以在分线程中不可能更新界面。
- 不能跨域加载JS
- 不是每个浏览器都支持这个新特性

阿牛大牛中

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS高级（4）——线程机制与事件机制

文章目录线程机制与事件机制进程与线程浏览器内核定时器引发的思考JS是单线程执行的浏览器的事件循环（轮询）模型相关重要概念H5 Web Workers（多线程）线程机制与事件机制进程与线程进程（process）程序的一次执行，它占有一片独有的内存空间。可以通过任务管理器查看线程（thread）进程内的一个独立执行单元是程序执行的一个完整流程是CPU最小的调度单元相关知识应用程序必须运行在某个进程的某个线程上。一个进程中至少有一个运行的线程：主线程，进程启动后自动创建。
复制链接

扫一扫