请选择 进入手机版 | 继续访问电脑版
Mozilla

火狐社区

登录    注册

用新浪微博连接 QQ互联

Web Workers 有多快?

xiaogutou219 等待验证会员 发表于 2015-7-10 12:06:07 | 显示全部楼层   [复制链接]
9 18676
本帖最后由 xiaogutou219 于 2015-11-20 16:51 编辑

下一版的 Firefox OS 移动操作系统,即可完整利用其搭载设备的多核心处理器,真正解放设备的性能。JavaScript 本于单线程上执行,但 Web Workers 却能平行执行程序代码。如此可避免浏览器的任何进程占用到主线程,让 UI 动画更顺畅。

H5.jpg
图片来源:http://blog.teamtreehouse.com/using-web-workers-to-speed-up-your-javascript-applications

Web Worker简介
Web Worker 可分为:

这些 Worker 共享类似的设计,但各有其特别属性。Worker 均以自有的独立进程执行程序代码,并和主线程以及其他 Worker 平行执行。不同类型的 Worker 均具备相同接口。

Web worker
单纯的 Web Worker 均是从主程序所建立,而且只能与该主程序沟通。

Shared worker
只要是在相同来源 (不同的浏览器页面、iframe,或其他 Shared Worker) 上执行的程序,都能与 Shared Worker 沟通。

Service Worker
Service Worker 最近已获得不少关爱的眼神,可通过程序设计的方式,在浏览器中构建 Web 服务器的代理服务器,将特定内容传送到「Requester (即如主线程)」。Service Worker 的使用案例之一,就是脱机提供内容。Service Worker 属于较新的 API,因此尚未实际运用于所有浏览器之中,本文也先略过不谈。

为了证实 Web Workers 能让 Firefox OS 加快执行速度,我们必须先以性能指标检验其速度。

建立 Web Worker 的成本
本文将集中讨论 Firefox OS,且所有测试工作均以中阶硬件规格的 Flame 装置进行。

第一组性能指标就是 Web Worker 的构建时间。我们先设定脚本以建立 Web Worker,再送出最小规模的数据让该 Worker 能立刻回复。一旦主线程接收到响应就等于工作时间终止,接着此 WebWorker 就结束生命周期。接着重复执行此工作数次,直到算出可用 Web Worker 的平均构建时间。建立 Web Worker 就如同以下一样轻松:
QQ截图20150710104405.png
也可套用相同函数来建立 Broadcast channel:
QQ截图20150710104501.png
因为 Shared Worker 一旦建立,之后就持续存在,所以本文中并未比较 SharedWorker 的性能指标。浏览器可在建立 Shared Worker 之后随时响应需求。所以我们不能任意通过建立/结束 Shared Worker 的方式,来取得有意义的性能指标。

Web worker 大约需要 40 ms 建立且这段时间的变化不大,前后不过几个微秒的误差。但设定 Broadcastchannel 一般只要 1 ms 之内就搞定。

在正常状态下,浏览器的 UI 都维持着 60 fps 的更新率。也就是说 JavaScript 程序代码的运行时间不应该比帧像 (60 fps 即约 16.66 ms) 所需的时间还要长,否则你的 App 看起来就会很慢。

建立 Web Worker 实体的效率颇高,但是单一帧像所分配的时间仍可能不够用。所以应建立越少 Web Worker 越好,并要能尽可能重复使用。

数据延迟
Web Worker 的重要面向之一,就是能在主线程与 Worker 之间进行高速沟通。而主浏览器线程另有两种不同方式可与 Web Worker 沟通。

postMessage
此为预设 API。若要从 Web Worker 收发数据,我们也建议使用此 API。postMessage() 简单易用:
QQ截图20150710104655.png
Broadcast Channel
此为新的 API,且至本文截稿时只限用于 Firefox。只要是相同来源的所有内容,均可通过此 API 发布消息。相同来源的所有浏览器页面、iframes、Worker 都能发送并接收数据:
QQ截图20150710104709.png

为了取得性能指标,我们用了上述的类似脚本,但差别在于不会结束 Web Worker 的生命周期且每次工作均重复使用。由于这样会取得来回一趟的反应时间,所以应将所测得的时间除以二。

如你所预期的,简易的 postMessage 速度极快,往往只要 0~1 ms 就能送出一条数据到Web 或 Shared Worker。而 Broadcastchannel API 需时 1~2 ms

在一般情况下,用 Worker 交换数据极快,所以这里不用太担心速度的问题。但越大量的数据耗时就越久。

数据的规模
共有两种方法可将数据传送到 Web Worker:
  • 复制数据
  • 转发数据

第一种方式会让数据进行串行化、复制、送出等程序。第二种方式则是转发数据。这也代表一旦数据送出之后,原始的发送者 (Sender) 就再也不能使用该条数据。转发数据几乎是瞬间完成,所以没有能实际当作性能指标的地方。但其实只有 ArrayBuffer 是可转发的资料类型。

如你所预估,数据的串行化、复制、解序等步骤,会对数据传递产生大量的额外负担。数据量越大,其所需的传送时间也就越长。

测试标准将在这里送出类别数组 (Typed Array) 到 Web Worker,且每次迭代都会逐步增加其数据量。「数据量」与「转换时间」之间会呈线性相关。针对每次测试工作,我们可将数据量 (以 KB 为单位) 除以时间 (以 ms 为单位),得到 KB/ms 的转换速度。

一般在 Flame 上,使用 postMessage 可达 45 KB/ms 的转换速度;Broadcast channel 则可达6 B/ms。也就是说,如果你要自己的数据能符合单一帧像的时间,则使用 postMessage 时的数据必须不超过 350 MB;使用 Broadcast channel 时则不超过 50 MB。否则将造成 App 中的「丢帧 (Frame drop)」情形。

我们在这个性能指标中使用了类型数组 (Typed array),能精准以 KB 为单位表示数据的体积。你也可以转发 JavaScript 对象,但串行化程序会耗时更久。这对小对象来说没什么差别,所以仍可将小对象串行化为二进制格式。你可使用类似「协议缓冲区 (Protocol Buffer)」的工具。

正确使用 Web Worker 以达极高速度

以下是 Web Worker 相关性能指标的摘要,同样是以 Flame 所测得:
工作
时间
建立 Web Worker
40 ms
建立 Broadcast channel
1 ms
使用 postMessage 的通讯延迟
0.5 ms
使用 Broadcast channel 的通讯延迟
1.5 ms
使用 postMessage 的通讯速度
80 KB/ms
使用 Broadcast channel 的通讯速度
12 KB/ms
使用 postMessage 的最大数据量
1,300 KB
使用 Broadcast channel 的最大数据量
200 KB

设定性能指标,是用来确认解决方案是否够快的唯一方式,也能让整个 Web 开发工作省去许多臆测性质的无效工作。

如果你想在特定装置上执行这些性能指标,这里还有针对这些测试工作所开发的「web workers benchmark」开放源码 App。当然也欢迎你贡献其它新类型的性能指标。



安康Tony 社区新人
发表于 2015-7-28 17:40:27 | 显示全部楼层
我只想说搭载FOS的手机什么时候来大陆
xiaogutou219 等待验证会员
发表于 2015-7-29 09:51:26 | 显示全部楼层
安康Tony 发表于 2015-7-28 17:40
我只想说搭载FOS的手机什么时候来大陆

您好!还请您随时关注官方动态哦!
310971373 狐狸精
发表于 2015-8-7 18:00:35 | 显示全部楼层
要多快有多快
GNU龙萌萌哒 狐狸仔
发表于 2015-8-12 23:19:35 | 显示全部楼层
可Firefox到现在都不是默认启动Services Workers的支持
郭 强 老狐狸
发表于 2015-8-15 15:43:17 | 显示全部楼层
谢谢分享
一世情懷 社区新人
发表于 2015-12-7 17:26:00 | 显示全部楼层
xiaogutou219 发表于 2015-7-29 09:51
您好!还请您随时关注官方动态哦!

怎么关注呀,有没有网址或是……
fjkakashi 狐狸精
发表于 2015-12-7 22:50:05 | 显示全部楼层
一世情懷 发表于 2015-12-7 17:26
怎么关注呀,有没有网址或是……

微博@火狐
发表于 2015-12-21 08:45:34 | 显示全部楼层
准备上servo了吗?
德亮Leslie 狐狸仔
发表于 2016-2-3 08:44:01 | 显示全部楼层
666666666666666666666
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

发新帖
论坛更多 »
火狐微信
快速回复 返回顶部 返回列表