Js高级总结4 JavaScript线程机制与事件机制

---

常见浏览器和内核

• IE：内核 Trident
• Firefox：内核 Gecko
• Safari：内核 Webkit
• Opera：内核 Blink
• Chrome：内核 Chromium/Blink

---

定时器

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

   • 主线程执行 JS 单线程。

2. 定时器如何实现？

   • 事件循环模型。

---

Js单线程

• 代码分类：初始化代码、回调代码。
• Js引擎执行代码的基本流程：
  • 先执行初始化代码。
  • 设置定时器。
  • 绑定监听。
  • 发送 AJAX 请求。
  • 执行回调代码（异步执行）。

---

事件循环模型

• 代码分类：
  • 初始化执行代码：包含绑定 DOM 事件监听、设置定时器、发送 AJAX 请求。
  • 回调执行代码（异步执行）：处理回调逻辑。
• 事件（定时器/DOM 事件/AJAX 事件）管理模块。

---

Web Worker

• Js 分线程的实现。
• Worker 构造函数加载分线程执行的 js 文件。
• Worker.prototype.onMessage：用于接收另一个线程的回调函数。
• Worker.prototype.postMessage：向另一个线程发送消息。
• worker 内部代码不能操作 DOM。

示例代码

HTML:

<input type="text" placeholder="数值" id="number">
<button id="btn">计算</button>
<script src="worker.js"></script>

主线程 JavaScript:

// 斐波那契数列实现
// 1 1 2 3 5
var input = document.querySelector('#number');
document.querySelector('#btn').onclick = function () {
    var number = input.value;
    // 创建一个 worker 对象
    var worker = new Worker('worker.js');
    // 绑定接收消息监听
    worker.onmessage = function (event) {
        console.log('主线程接收分线程返回的数据');
        console.log(event.data);
    };
    // 向分线程发送消息
    worker.postMessage(number);
    console.log('主线程向分线程发送数据:' + number);
};

分线程 worker.js:

function fibonacci(number) {
    return number <= 2 ? 1 : fibonacci(number - 1) + fibonacci(number - 2); // 递归调用
}

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

console.log(this); // 分线程中全局对象不再是 window

---