『』知道html5 Web Worker标准吗？能实现JavaScript的多线程？( 二 )
// 计算斐波那契数列,这个数列从第3项开始 ， 每一项都等于前两项之和 。function recurFib(n) {if (n 可以看到 ， 一开始网页和动画正常运行 ， 但是开始执行计算斐波那契数列后 ， 动画就停止了 ， 页面也停止响应鼠标的click事件了 ， 直到recurFib(40)计算出结果后 ， 动画才开始继续执行 ， 而期间积攒的click事件也在一起被执行 。这就解释了GUI渲染线程与JS引擎线程互斥 。由于这个弊端HTML5提出Web Worker标准 。利用Web Worker开启一个子线程
Web Worker 有以下几个使用注意点 。1.同源限制 分配给 Worker 线程运行的脚本文件 ， 必须与主线程的脚本文件同源 。2.DOM 限制 Worker 线程所在的全局对象 ， 与主线程不一样 ， 无法读取主线程所在网页的 DOM 对象 ， 也无法使用document、window、parent这些对象 。但是 ， Worker 线程可以navigator对象和location对象 。3.通信联系 Worker 线程和主线程不在同一个上下文环境 ， 它们不能直接通信 ， 必须通过消息完成 。4.脚本限制 Worker 线程不能执行alert()方法和confirm()方法 ， 但可以使用 XMLHttpRequest 对象发出 AJAX 请求 。5.文件限制 Worker 线程无法读取本地文件 ， 即不能打开本机的文件系统（file:） ， 它所加载的脚本 ， 必须来自网络 。创建Worker时 ， JS引擎向浏览器申请开一个子线程（子线程是浏览器开的 ， 完全受主线程控制 ， 而且不能操作DOM） JS引擎线程与worker线程间通过特定的方式通信（postMessage API ， 需要通过序列化对象来与线程交互特定的数据） 。下面我们用worker的相关api来解决上面卡顿的问题 。
.box {width: 200px;height: 200px;margin-top: 100px;background: #f09;animation: bounce 2s linear 0s infinite alternate;background-image: linear-gradient(45deg, #3023AE 0%, #f09 100%);}@keyframes bounce {0% {border-radius: 40% 60% 72% 28% / 70% 77% 23% 30%;}100% {border-radius: 75% 25% 24% 76% / 13% 15% 85% 87%;}}
window.onload = function () {// 创建一个子线程worker实例var worker = new Worker('./test.js');setTimeout(function () {// 通信：向子线程发送消息worker.postMessage('start')}, 2000)worker.addEventListener('message', function(res) {//通信：收到子线程消息console.log('result:',JSON.stringify(res.data));// 关闭worker线程worker.terminate();})document.getElementsByClassName("box")[0].addEventListener('click', function () {console.log('click')})}
【『』知道html5 Web Worker标准吗？能实现JavaScript的多线程？】// test.js子线程代码// 通过监听message来接受主线程中的消息addEventListener('message', function(res) {// 子线程向主线程中发生消息// 计算斐波那契数列,这个数列从第3项开始 ， 每一项都等于前两项之和 。if(res.data =http://www.sos110.com/show/12/107152/=='start') {// 开始运算console.log('收到主线程消息 ， 开始运算')function recurFib(n) {if(n 运行结果：
文章图片
文章图片
可以看到整个运行过程动画没有卡顿 ， 也能响应click事件 ， 所以在我们遇到大型计算的时候 ， 请单独开启一个worker子线程来解决js线程阻塞GUI线程的问题 。上文中只涉及到一部分worker API 。兼容性
文章图片
文章图片
可以看到除了Opera Mini浏览器 ， 连IE都能使用了 ， 所以兼容性问题不大 。总结
推荐阅读
- 电脑数码精通|夏季如何让电脑的故障率降到最低？早知道早做准备吧
- 戏说新金融|你从借呗借的那些钱来自哪里，你知道吗？“借呗”的那些事“借呗”的钱从哪来？
- TechWeb.com.cn|官宣！前魅族CMO杨柘加入小米 担任副总裁、中国区CMO
- TechWeb.com.cn|哔哩哔哩回应up主内容真实性争议：高度关注 已向有关部门报备
- TechWeb.com.cn|北京快手科技公司成立智能云科技公司 注册资本5000万
- TechWeb.com.cn|美国三大股指周一收高 费城半导体指数逆势下跌
- IT168|都知道vivo X50Pro稳 想不到夜拍才是杀手锏
- 未来科技圈|618不知道怎么选购笔记本电脑 主流轻薄高性能游戏本推荐
- 小阳说科技|不知道这3个功能，你八成是个假“果粉”
- GaGaHi|全球最火的8个海外社交平台，你知道几个？