********
常见浏览器和内核
IE Firefox Safari Opera Chrome
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
<input type="text" placeholder="数值" id="number">
<button id="btn">计算</button>
<script src="worker.js"></script>
// 斐波那契数列实现
// 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)
// console.log('onMessage');
var result = fibonacci(number)
// var upper = event.data.toUpperCase()//通过event.data获得发送来的数据
// postMessage(upper)
postMessage(result)
console.log('分线程向主线程返回数据:'+result)
}
console.log(this)
//分线程中全局对象不再是window