What’s the WebWorkers?

2008 年 W3C 制定出第一个 HTML5 草案中提出了工作线程(Web Worker)的概念,并且规范出 Web Worker 的三大主要特征:能够长时间运行(响应),理想的启动性能以及理想的内存消耗。Web Worker 允许开发人员编写能够长时间运行而不被用户所中断的后台程序,去执行事务或者逻辑,并同时保证页面对用户的及时响应。

Web Workers类型有哪些?

  • 专用线程(Dedicated Workers)
    由主线程创建,并且只能和主线程通信。相当于每一次创建都是一个新的实例。
  • 共享线程(Shared Workers)
    在同一域名下,可以和任何进程通信(不同的Tabs,iFrames等)。可以理解为第一次创建就是在浏览器中停驻,类似一个MemoryCache,此后如果其他页面需要创建该实例时,都会引用同一个Worker,成为跨进程的单例。
  • 后台线程(Service Workers)
    2014年推出的新规范,该API可以提供后台服务的能力,比如后台消息传递,代理伪装,离线,消息推送等有意思的功能。本人测试Chrome下支持,但IE下日常(不支持)。

Web Workers可以干什么?

JavaScript是异步的单线程,通过时间片轮换模拟并发效果(可参考之前写的《Web Workers实践》)。随着移动互联网以及带宽的提高,而HTML5提供了前端渲染的诸多好处(效果效率灵活轻量级),前端需要处理越来越多的数据,传输和解析也成为了一个很大的瓶颈。Workers+Promise绝对让你爽歪歪。下面举两个很实际的场景,让各位有一个清楚的认识。

应用场景1:后台计算能力

通过Worker将大量数据分析,统计的工作放到后台进行。比如为了减少文件大小,我们往往会做一次zip压缩,好处很明显,既可以加密,有可以极大的提高网络传输的速度。但在传统的JS中,zip解压缩的性能损失是巨大的。随着技术的发展,鱼和熊掌也是可以兼得的。通过Workers技术,我们把数据的解压缩和解析的工作交给子线程来处理,减轻主线程的负担。如下,现在我们可以将Update放到Workers线程,主线程专注Render以及和用户的交互。

应用场景2:共享线程代理多用户

通过共享Worker,可以在多个进程中共用一个线程,接收从不同连接发送过来的指令,然后实现自己的指令处理逻辑,指令处理完成后将结果返回到各个不同的连接用户。有了这种代理技术,可以衍生出很多有意思的功能,在代理中对参数安全性进行审核,对并发数统计,用户自定义的JS函数的权限管理等,都可以通过子线程加一层壳来进行过滤。

性能至上

任何的技术都是有消耗的,关键在于技术人员针对自身情况,做出一个合理选择,这取决于经验和对各种因素全面的衡量。下面给出一些关键时间消耗,供各位选择。

  • Workers的创建一般都在1ms内,可以忽略不计
  • PostMessage时间
    不同浏览器差异较大,Chrome下80ms左右,而IE只有25ms
    理论讲,如果Worker创建后调用PostMessage,此时PostMessage事件会放在请求队列,而此后的PostMessage则会直接在WebCore中响应,也就是首次事件可能时间要略久,但测试发现这种差异不并不存在或不明显。
  • OnMessage
    各个浏览器中时间消耗很小,忽略不计。
  • Transferring
    默认的参数都是Copy形式,如果参数对象很大,而且在线程中并不修改该对象值,则可以使用Transferring,则参数为引用形式。否则参数拷贝会消耗大量时间。
  • 创建多个Workers后的性能
    未测试具体时间,但在真实应用中体验很不错

缺点

Workers下不支持DOM对象,不支持Mutex,并不是一种彻底的多线程方案。个人认为Workers主要是把数据部分的工作放到线程,提供后台计算能力,让主线程和子线程更好的专注自己的工作,提高每个线程的性能。

Service Workers需要HTTPS才能使用,localhost除外,这太不实用。导致这一有意思的功能只能玩玩而已。

Cesium原理篇:4Web Workers剖析(2)的更多相关文章

  1. Cesium原理篇:3最长的一帧之地形(2:高度图)

           这一篇,接着上一篇,内容集中在高度图方式构建地球网格的细节方面.        此时,Globe对每一个切片(GlobeSurfaceTile)创建对应的TileTerrain类,用来维 ...

  2. Cesium原理篇:7最长的一帧之Entity(下)

    上一篇,我们介绍了当我们添加一个Entity时,通过Graphics封装其对应参数,通过EntityCollection.Add方法,将EntityCollection的Entity传递到DataSo ...

  3. Cesium原理篇:5最长的一帧之影像

    如果把地球比做一个人,地形就相当于这个人的骨骼,而影像就相当于这个人的外表了.之前的几个系列,我们全面的介绍了Cesium的地形内容,详见: Cesium原理篇:1最长的一帧之渲染调度 Cesium原 ...

  4. Cesium原理篇:4Web Workers剖析

    JavaScript是单线程的,又是异步的,而最新的HTML5中,通过Web Workers可以在JS中支持多线程开发.这是几个意思?异步还是单线程,这怎么理解?Web Workers又是什么原理?实 ...

  5. Cesium原理篇:3最长的一帧之地形(3:STK)

    有了之前高度图的基础,再介绍STK的地形相对轻松一些.STK的地形是TIN三角网的,基于特征值,坦白说,相比STK而言,高度图属于淘汰技术,但高度图对数据的要求相对简单,而且支持实时构建网格,STK具 ...

  6. Cesium原理篇:3D Tiles(1)渲染调度

    Cesium在2016年3月份左右推出3D Tiles数据规范,在glTF基础上提供了LOD能力,定位就是Web环境下海量三维模型数据.虽然目前3D Tiles还是Beta阶段,有不少硬伤,但3D T ...

  7. Cesium原理篇:3D Tiles(2)数据结构

    上一节介绍3D Tiles渲染调度的时候,我们提到目前Cesium支持的Cesium3DTileContent目前支持如下类型: Batched3DModel3DTileContent Instanc ...

  8. Cesium原理篇:3D Tiles(3)个人总结

    个人结论:目前,在演示层面,3D Tiles问题不大,但项目应用上就不够成熟了,所以问问自己,你是想吃瓜呢还是想吃螃蟹? 好的方面 数据规范 我非常喜欢glTF的整体设计,概括有四点:第一,数据块(B ...

  9. Cesium原理篇:3D Tiles(1)渲染调度【转】

    Cesium在2016年3月份左右推出3D Tiles数据规范,在glTF基础上提供了LOD能力,定位就是Web环境下海量三维模型数据.虽然目前3D Tiles还是Beta阶段,有不少硬伤,但3D T ...

随机推荐

  1. web程序的路径笔记

    "/"与”\“区别:”/“是unix系统区分文件层级的标志,因为当前web应用程序在服务器端大都使用基于unix系统开发的操作系统,所以web程序包括浏览器里url都遵以”/“来区 ...

  2. 谢欣伦 - 原创软件 - 工具软件 - 快速关机Shutdown

    快速关机Shutdown,含源码. 公司公用的笔记本电脑实在太烂,不知从什么时候开始关机永远都关不了,一直停留在“关闭系统中……”.忍无可忍之下,自己写了一个快速关机程序. 下载: Shutdown_ ...

  3. CI框架,源代码一次性判断获取post(get)数据是否有某个字段值为空方法

    一.以下是CI框架 1.把所有的要接收的字段放在数组中 例: 我要接收:id,name,age,mobile 等字段 $req = array('id','name','age','mobile'); ...

  4. 完美解决 Linux 下 Sublime Text 中文输入

    首先,我参考了好几篇文章,都是蛮不错的,先列出来: sublime-text-imfix:首先推荐这个方法,最简单,但是在我的系统上有些问题.可用这个的强烈推荐用这个 完美解决 Linux 下 Sub ...

  5. LoadingView

    // //  LoadingView.h //  蓝桥播报 // //  Created by 小小建 on 15/7/10. //  Copyright (c) 2015年 蓝桥. All righ ...

  6. NoSQL初探之人人都爱Redis:(4)Redis主从复制架构初步探索

    一.主从复制架构简介 通过前面几篇的介绍中,我们都是在单机上使用Redis进行相关的实践操作,从本篇起,我们将初步探索一下Redis的集群,而集群中最经典的架构便是主从复制架构.那么,我们首先来了解一 ...

  7. 干掉Unity3D

    我为什么想干掉Unity3D? 这个问题容我不答,每个做技术的人总有一些完美主义. 你使用u3d的过程中是不是痛并快乐着呢. 就从两个国内具有相当普遍性的痛点说起. il2cpp,unity作出了这个 ...

  8. jQuery编程的最佳实践

    好像是feedly订阅里看到的文章,读完后觉得非常不错,译之备用,多看受益. 加载jQuery 1.坚持使用CDN来加载jQuery,这种别人服务器免费帮你托管文件的便宜干嘛不占呢.点击查看使用CDN ...

  9. C语言 · Interval · 求矩阵元素和

    问题描述 这里写问题描述. 输入格式 测试数据的输入一定会满足的格式. 例:输入的第一行包含两个整数n, m,分别表示矩阵的行数和列数.接下来n行,每行m个正整数,表示输入的矩阵. 输出格式 要求用户 ...

  10. java中 用telnet 判断服务器远程端口是否开启

    package net.jweb.common.util; import java.io.BufferedReader; import java.io.BufferedWriter; import j ...