内核由很多模块组成：

主线程：

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

*不是每个浏览器都支持

码农公寓

一、进程与线程

1.进程

2.线程

3.相关知识

4.相关问题

二、浏览器内核