? ? 内核由很多模块组成：

? ? ? ? 主线程：

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