Web Worker 通信性能研究:通过多线程改进 Web 应用性能

更新日期: 2019-07-19阅读: 1.9k标签: 性能

Surma 是谷歌的 Web 布道师,最近发布了一项有关 postMessage 的性能 研究结果 。postMessage 是 Web Worker 的通信方式。Surma 的结论是,虽然 postMessage 会带来一些开销,但如果有效载荷低于给定的开销预算,那么将非 UI 任务移出主线线可能会提高总体性能。

超过一半的互联网接入来自手机或平板电脑,而低端多核移动设备的市场份额一直在增加,Web 应用程序开发人员必须确保应用程序在低配置的环境中(如慢 CPU、GPU 或小内存)也能具有高性能。

在这种情况下,使用多线程的 Web Worker 可以将与计算相关的负载从主执行线程中隔离出来。最终的性能是在原生多核心架构上并行化任务(如果可用)所带来的好处加上与线程间通信开销相关的成本的总和。对于 Web 应用程序来说,主要的通信开销是使用 postMessage 方法在主 UI 线程和 Web Worker 之间进行通信。

由于一些开发人员不愿使用 Web Worker, Surma 对 postMessage 的性能做了一些说明。Surma 解释了他的研究背后的缘由:

人们不会考虑使用 Web Worker,是因为他们担心 postMessage()的性能,所以这是值得研究的一件事情。

该研究包括两个基准。第一个基准测试分析了在线程之间发送消息所需的时间,并显示了它与所发送的对象的复杂性之间的正相关关系。

第一个基准测试分别在 2018 款 MacBook Pro 上的 Firefox、Safari 和 Chrome 上运行,在 Pixel 3XL 的 Chrome 上运行,在诺基亚 2 的 Chrome 上运行。对象复杂度是指表示对象的 JSON 树的深度(树的层次)和宽度(属性的数量)的组合。

第二个基准测试证实了与 JSON.stringify() 返回的字符串长度的强正相关关系,不过带有一些警告。Surma 解释说:

我认为这种相关性足够强,我们可以从中得出一个法则:对象的字符串化 JSON 表示与它的传输时间大致成正比。但更重要的是,这种相关性只适用于大对象,我说的大对象是指超过 100KB 的对象。虽然这种相关性在数学上是成立的,但这种差异对于较小的有效载荷来说更为明显。

Surma 根据 响应动画空闲加载 (RAIL)指南给出了“慢”的定义,并对涉及 JS 驱动动画的上下文(显示下一帧的预算为 16ms)和不涉及上下文(响应用户交互的预算为 100ms)的情况进行了区分。

Surma 总结道:

即使在最慢的设备上,你也可以使用 postMessage() 发送 100KB 的对象,并保持在 100ms 的响应预算之内。如果有 JS 驱动的动画,有效载荷达到 10KB 是没有问题的。对于大多数应用程序来说,这应该足够了。使用 postMessage() 确实有一定的代价,但不至于会导致脱离主线程架构变得不可用。

对于 postMessage 成本超过在多个线程上运行任务的好处的情况,Surma 提供了替代方案 ,比如通过使用分块技术或 WebAssembly 来提升性能。

完整的研究结果可以在 Surma 的博客上找到,其中包含了数据、可视化演示和图表。


原文链接:

Improving Webapp Performance With Multi-Threading: A Study of Web Workers’ Communication Overhead


链接: https://www.fly63.com/article/detial/4812

提高js加载速度,实现js无阻塞加载方式,高性能的加载执行JavaScript

为解决JS加载速度慢,采用js的延时加载,和动态加载。由于js的堵塞特性,当浏览器在加载javascript代码时,不能同时做其他任何事情,如果javascript执行时间越久,浏览器等待响应的时间就越久。

如何提高CSS性能?CSS优化、提高性能提升总汇

如何提高CSS性能,根据页面的加载性能和CSS代码性能,主要表现为: 加载性能 (主要是从减少文件体积,减少阻塞加载,提高并发方面入手),选择器性能,渲染性能,可维护性。

前端性能优化_css加载会造成哪些阻塞现象?

css的加载是不会阻塞DOM的解析,但是会阻塞DOM的渲染,会阻塞link后面js语句的执行。这是由于浏览器为了防止html页面的重复渲染而降低性能,所以浏览器只会在加载的时候去解析dom树,然后等在css加载完成之后才进行dom的渲染以及执行后面的js语句。

2018 前端性能检查表

性能十分重要。然而,我们真的知道性能瓶颈具体在哪儿吗?是执行复杂的 JavaScript,下载缓慢的 Web 字体,巨大的图片,还是卡顿的渲染?研究摇树(Tree Shaking),作用域提升(Scope Hoisting)

高性能Javascript总结

Js高性能总结:加载和运行、数据访问、DOM编程、算法和流程控制、响应接口、Ajax 异步JavaScript和XML、编程实践...

优化网站性能规则_前端性能优化策略【网络加载、页面渲染】

前端网站性能优化规则:网络加载类、页面渲染类。包括:减少 HTTP 资源请求次数、减小 HTTP 请求大小、避免页面中空的 href 和 src、合理设置 Etag 和 Last-Modified、使用可缓存的 AJAX、减少 DOM 元素数量和深度等

前端性能的本质是什么?

性能一直以来是前端开发中非常重要的话题。随着前端能做的事情越来越多,浏览器能力被无限放大和利用:从 web 游戏到复杂单页面应用,从 NodeJS 服务到 web VR/AR 和数据可视化,前端工程师总是在突破极限

BigPipe_高性能流水线页面技术

BigPipe是一个重新设计的基础动态网页服务体系。大体思路是,分解网页成叫做Pagelets的小块,然后通过Web服务器和浏览器建立管道并管理他们在不同阶段的运行。这是类似于大多数现代微处理器的流水线执行过程:多重指令管线通过不同的处理器执行单元,以达到性能的最佳。

用CSS开启硬件加速来提高网站性能

你知道我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能吗?现在大多数电脑的显卡都支持硬件加速。鉴于此,我们可以发挥GPU的力量,从而使我们的网站或应用表现的更为流畅。

原生js实现懒加载并节流

像淘宝网站等,页面中有着大量图片,一次性全部加载这些图片会使浏览器发送大量请求和造成浪费。采用懒加载技术,即用户浏览到哪儿,就加载该处的图片。这样节省网络资源、提升用户体验、减少服务器压力。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!