内核由很多模块组成：

主线程：

JS引擎模块：负责JS程序的编译与运行

html、css文档解析模块：负责页面文本的解析

DOM/CSS模块：负责dom/css在内存中的相关处理

布局和渲染模块：负责页面的布局和效果的绘制（内存中的对象）

分线程：

定时器模块：负责定时器的管理

DOM事件响应模块：负责事件的管理

网络请求模块：负责AJAX请求

三、定时器相关问题

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

定时器并不能保证真正定时执行

一般会延迟一丁点（可以接受），也有可能延迟很长时间（不能接受）

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

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

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

事件循环模型

<body>
 <button id="btn">启动定时器</button>
</body>
<script>
    document.getElementById("btn").onclick = function(){
        let start = Date.now()
        console.log("启动定时器前");
        setTimeout(function(){
            console.log("定时器执行了",Date.now()-start);
        },200)
        console.log("启动定时器后");

        //做一个长时间的工作
        for(let i=0; i<1000;i++){}
    }
</script>

四、JS是单线程的

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

setTimeout()的回调函数是在主线程执行的

定时器回调函数只有在运行栈中的代码全部执行完后才又可能执行

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

JavaScript的单线程与它的用途有关，只能有一个线程去更新操作页面

作为浏览器脚本语言，JavaScript的主要用途是与用户互动，以及操作DOM

这决定了它只能是单线程，否则会带来很复杂的同步问题

3.代码的分类：

初始化代码

回调代码

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

先执行初始化代码：包含一些特别的代码，如设置定时器、绑定监听、发送AJAX请求

后面在某个时刻才会执行回调代码

五、事件循环模型

1.所有代码分类

*初始化执行代码（同步代码）：包含绑定dom事件监听，设置定时器，发送ajax请求的代码

*回调执行代码（异步代码）：处理回调逻辑

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

初始化代码==>回调代码

3.模型的两个重要组成部分：

事件（定时器/DOM时间/AJAX）管理模块

回调队列

4.模型的运转流程

*执行初始化代码，将事件回调函数交给对应模块管理

*当事件发生时，管理模块会将回调函数及其数据添加到回调队列中

*只有当初始化代码执行完一切后（可能要一定的时间），才会遍历读取回调队列中的回调函数执行

5.相关重要概念

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

2.浏览器内核（browser core）:JS引擎模块（在主线程处理），其他模块（在主/分线程处理）

3.任务队列 task queue

4.消息队列 message queue

5.事件队列 event queue

主要：345是同一个callback queue

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

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

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

六、H5 Web Workers(多线程)

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

Web Workers是HTML5提供的一个JavaScript多线程解决方案，我们可以将一些大计算量的代码交由Web Workers运行而不冻结用户界面，

但是子线程完全受主线程控制，且不得操作DOM。所以这个新标准并没有改变JavaScript单线程的本质

举个例子：斐波那契数列的计算

主线程内容：

<body>
 <input type="text" placeholder="数值" id="number">
 <button id="btn">计算</button>
 <script>
     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);
         //分线程中的全局对象不再是window，所以在分线程中不可能更新界面
     }
 </script>

分线程内容Worker.js:

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);
}

2.相关API

*Worker：构造函数，加载分线程执行的JS文件

*Worker.prototype.onmessage：用于接收另一个线程的回调函数

*Worker.prototype.postMessage：向另一个线程发送消息

3.不足

*Worker内代码不能操作DOM（更新UI）

*不能跨域加载JS

*不是每个浏览器都支持

标签：定时器,单线程,代码,JavaScript,JS,线程,机制,多线程
来源： https://blog.csdn.net/m0_59897687/article/details/123130937

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaScript — 线程机制与事件机制

一、进程与线程

1.进程

2.线程

3.相关知识

4.相关问题

二、浏览器内核