worker可以让js有多线程一样的特性,什么地方该用呢?写了个例子:http://jsfiddle.net/walker/9angN/(请使用最新版的谷歌或火狐进行测试)。

同样一个50亿次的空循环,一个用了worker,一个是普通写法。跑起来明显的区别,worker在后台的时候,整个浏览器是可以响应的,并且页面上的计数器也能非常流畅地跳动;而普通写法是比较考验浏览器的,不那么强悍的浏览器就直接无响应了,并且计数器根本就不工作。

结果已经比较明显了,显然worker非常适合后台要做大量运算的耗时长的工作,这样会大大减少浏览器不响应的情况。不适合的地方在哪?

我们的主线程和worker是通过postMessage来通信的,监听一个message事件。而postMessage是相当消耗资源的,看这个例子,http://jsfiddle.net/walker/9angN/7/,如果每个循环里都postMessage的话(我已经把循环次数从10亿减到50万),但是响应时间还是远远超出了仅post一次的时间(如果接到message还要操作DOM或者要记录到console,那时间更是显著增加)。这还不是重点,关键是postMessage会造成页面不响应。注意,这里请结合第一个示例进行测试。

第一个例子,虽然worker在后台工作,但是页面是可以响应的,比如对页面文字进行选择操作。但是第二个例子中,50万次循环没进行完前,你的浏览器可以响应,但是页面已经不响应了,你也选择不了页面任何元素。如果这个页面是嵌套在iframe中的,那么主页面也会被锁住。

所以worker适合后台来做运算,但是不要频繁跟调用者通信,这样得不偿失。

转载于:https://www.cnblogs.com/walkerwang/archive/2013/06/06/3122720.html

html5 worker的使用场景相关推荐

  1. html 页面下雪效果,HTML5超逼真下雪场景效果

    简要教程 这是一款基于jquery的超逼真下雪场景特效.该特效使用jquery代码来动态插件html5 canvas元素,然后在canvas中制作下雪特效. 使用方法 在页面中引入ThreeCanva ...

  2. html5 光影效果,基于 HTML5 WebGL 的 3D 场景中的灯光效果

    原标题:基于 HTML5 WebGL 的 3D 场景中的灯光效果 构建 3D 的场景除了创建模型,对模型设置颜色和贴图外,还需要有灯光的效果才能更逼真的反映真实世界的场景.这个例子我觉得既美观又代表性 ...

  3. html5 canvas网页下雨场景动画js特效

    下载地址一款透明的html5 canvas网页下雨场景动画特效,有意思的是按钮就像雨伞一样可以挡住雨水. dd:

  4. php实现下雪场景,html5 canvas逼真下雪场景动画特效

    这是一款效果十分逼真的html5 canvas下雪场景动画特效插件.这款下雪特效是基于Jason Brown的Snowfall jquery plugin的基础上制作的.在Snowfall jquer ...

  5. 基于 HTML5 WebGL 的 3D 场景中的灯光效果

    2019独角兽企业重金招聘Python工程师标准>>> 构建 3D 的场景除了创建模型,对模型设置颜色和贴图外,还需要有灯光的效果才能更逼真的反映真实世界的场景.这个例子我觉得既美观 ...

  6. JavaScript多线程 html5 Worker, SharedWorker

    //index.html $('#test').click(function () {alert(1); }); var worker = new Worker("task.js" ...

  7. html5换场效果图,场景转场动画的Canvas实现

    废话不说,先上图 图1:转场前 图2:转场中(动画效果此处请看末尾链接) 图3:转场后 看完效果,我们来讲讲原理. 首先我们需要准备一张转场用的图.理论上所有图片都可以作为过渡图使用. 我使用的是一张 ...

  8. html 灯光效果,基于 HTML5 WebGL 的 3D 场景中的灯光效果

    场景搭建 整个场景中包括 2D 场景(也就是鹰眼部分)以及 3D 场景: dm = new ht.DataModel(); g3d = new ht.graph3d.Graph3dView(dm); ...

  9. html5不断切换的场景,HTML5场景: 沉舟侧畔千帆过(漂浮和沉没的帆船)

    CSS 语言: CSSSCSS 确定 body { background: #acf0f2; overflow: hidden; } .ocean { background: #225378; pos ...

最新文章

  1. 在app中从下向上滑动,以找到不在默认第一页的元素
  2. VTK:IO之ReadPolyData
  3. 阿里云云服务器的端口配置问题
  4. 修改C盘里windows\system32\etc里面的hosts文件并保存
  5. 挡土墙计算软件_广联达软件如何计算钢板止水带?
  6. jquerymobile使用技巧
  7. python拼图游戏代码,OpenCV Python实现拼图小游戏
  8. 刚接触Python,这么多IDE我该怎么选
  9. CVPR 2019 | 微软亚洲研究院 7 篇精选论文解读
  10. 计算机视觉空间域(spatial)注意力机制——CBAM
  11. 【ArcGIS|空间分析|网络分析】11 利用流量数据执行网络分析
  12. wikioi 1098 均分纸牌
  13. Gmail配置邮箱客户端
  14. OpenGL深入探索——阴影贴图(二)
  15. html追加没有样式,html中append追加的表格元素和静态显示的元素样式不同?
  16. 用java实现四色定理
  17. 怎么减少计算机内存占有,还在为电脑内存占用太高而烦恼吗?教你一招轻松解决...
  18. java htmlunit
  19. 简报 | 菲律宾中央银行已经将数十家数字货币交易所合法化
  20. Python之Scrapy框架的安装和使用

热门文章

  1. 查天气43课-46课
  2. jquery学习之1.10-小练习-选中下拉框内容并显示
  3. C#时常需要调用C++DLL
  4. Eclipse开发Android常用快捷键
  5. PHP学习之路之在windows7 32位安装wampserver
  6. Java远程连接进程
  7. C# 将控件的Controls属性下的所有控件取出以便使用LINQ语句进行查询
  8. 睡前小故事之MySQL起源
  9. 阿尔伯塔大学的计算机科学专业好吗,去阿尔伯塔大学留学这些专业千万不能错过!...
  10. mysql.sock 初始化_mysql8.0 部署、初始化和创建实例