web worker 的传值方式以及耗时对比

web worker 的传值方式以及耗时对比

背景

前一阵子开发的项目 pptx 导入, 由于自己的代码问题,引起了个性能问题,一个 40p 的 pptx 文件,转换成 json 数据,大概要耗时 60s+ ,虽然后面发现是某个使用频率非常高的函数内部,用了 new Function 构造函数 造成的(所以这里顺便提醒一下,如果你很在乎几毫秒的差距的话,建议谨慎使用哈),但是在优化的过程中,一度怀疑是性能达到了瓶颈,所以尝试了使用 web worker 去优化,由于是文件,一般内容都比较大,发现 web worker 在传值这块占用了大部分的时间,所以想开这篇来详细聊聊.

两种传值方式

关于 web worker 的基本用于以及传值方式,网上以及有一大堆介绍了,这里就不赘述了,这里我们重点来看一下同一个文件用两种方式来传值,会有多大的差别,这边随意从电脑里面找了一个 96MB 的 PSD 文件来测试.

主线程

    fetch('./case.psd').then(file => {
            return file.blob();
        })

        .then(blob => {
            return new Promise(resolve => {
                let fileReader = new FileReader();
                fileReader.onload = e => {
                    resolve(e.target.result);
                }
                fileReader.readAsArrayBuffer(blob);
            })
        })

        .then(buf => {
            let worker = new Worker('1.js');

            console.time('计算时间');
            worker.postMessage(buf);

            worker.onmessage = e => {
                console.timeEnd('计算时间');
            }


        })

worker(子)线程, 这里为了避免不必要的因素干扰,worker 线程里面什么也不做,在收到消息后,直接 post 一个消息回去

    self.onmessage = e => {
        postMessage(0);
    }

这边我直接用 FileReader 的 readAsArrayBuffer,读出来是一个长度为 96,138,230 的字符串,长度大概 0.96 亿, 耗时大概 70ms 左右(同一个台电脑取 10 次平均值,下同)

我们稍微改一下上面主线程的代码,改用 转移数据 的方式

- worker.postMessage(buf);

+ worker.postMessage(buf, [buf]);

同样的数据, 耗时大概 17ms 左右,这 17ms 好像是个固定值,我尝试换了个 800MB+ 的文件和一个里面啥都没有的空文本文件,大概都是这个时间.

不同的数据类型,用值传递的耗时也是不一样的

    fetch('./case.psd').then(file => {
            return file.blob();
        })

        .then(blob => {
            return new Promise(resolve => {
                let fileReader = new FileReader();
                fileReader.onload = e => {
                    resolve(e.target.result);
                }
                fileReader.readAsText(blob);
            })
        })

        .then(str => {
            console.log(str.length);
            let worker = new Worker('1.js');

            console.time('计算时间');
            worker.postMessage(str);

            worker.onmessage = e => {
                console.timeEnd('计算时间');
            }


        })

这里我们改用 FileReader 的 readAsText,读出来是一个长度为 95,855,954 的字符串,长度大概 0.95 亿, 耗时大概 118ms 左右,同样我换了上面那个里面啥都没有的空文本文件,耗时也是 17ms 左右.

那我们试试用 readAsDataURL 看看读出来的数据要多久

    fetch('./case.psd').then(file => {
            return file.blob();
        })

        .then(blob => {
            return new Promise(resolve => {
                let fileReader = new FileReader();
                fileReader.onload = e => {
                    resolve(e.target.result);
                }
                fileReader.readAsDataURL(blob);
            })
        })

        .then(str => {
            console.log(str.length);
            let worker = new Worker('1.js');

            console.time('计算时间');
            worker.postMessage(str);

            worker.onmessage = e => {
                console.timeEnd('计算时间');
            }


        })

读出来是一个长度为 128,184,345 的字符串,长度大概 1,28 亿, 耗时大概 85ms 左右(虽然字符串长度更长,但是耗时却更短)

以上耗时,均为主线成向 worker 线程单向传递数据的耗时.

结论

  1. 转移数据几乎是零开销(因为和传递空字符串的耗时是差不多的).
  2. 值传递的话,不同的数据类型,耗时也有差别,ArrayBuffer < base64 < 普通字符串.
  3. postMessage 传递消息,除了发送数据的耗时外,还有其他开销(就是上面的 17ms). 当然每台电脑性能不一样,耗时也是不一样的,不过按比例来看,这个占比还挺大的.

关于转移的缺点, 网上也是有很多的, 这里也就不啰嗦了, 总结一句就是数据无法同时在2个线程上使用.

另外个人觉得如果是普通的数据,为了转移而去转换成 Transferable objects 的话, 大部分情况下是划不来的, 因为你需要在花在编码解码上的时间,会比直接传递花的时间多.

另外, 如果你是要用子线程处理图片的话, ImageBitmap 格式 配合最近新鲜出炉的 OffscreenCanvas 也许是不错的选择.前提是你不需要考虑兼容性问题.

最后是广告时间

我们40人的前端团队常年招兵买马中,在厦门的和想来厦门的童鞋们,不要吝惜你的简历,使劲砸过来 邮箱:nuoya@gaoding.com, 期待你一起来稿事

原文地址 https://github.com/noahlam/ar…

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/101139.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Struts2框架–学习笔记(上):搭建struts2工程、struts2基本概念、struts2对页面数据的操作

    Struts2框架–学习笔记(上):搭建struts2工程、struts2基本概念、struts2对页面数据的操作

  • 学计算机的男生喜欢什么样的女生,男生喜欢女生的九种表现 男生对女生说的甜蜜情话…

    学计算机的男生喜欢什么样的女生,男生喜欢女生的九种表现 男生对女生说的甜蜜情话…1、你那些恶作剧我是故意中招的,因为想看见你的笑颜。2、推我一把叫我加油的,抱着我让我“不用硬撑也可以”的都是你。3、跟着我,不喜欢吗?如果不喜欢那我就跟着你走。4、如果你在天堂遇见我,请装作不认识我的样子,因为下一次也想由我向你求婚。5、手机里依然留着喜欢你那句未曾送出的信息。6、电话里吵了架,即使如此却还想见你,正因如此才想见你。7、妻啊,虽然开不了口说爱,但不准比我先死。8、短信来了。你问我…

  • layoutSubviews 和 drawRect

    layoutSubviews 和 drawRect转自http://justsee.iteye.com/blog/1886463UIView的setNeedsDisplay和setNeedsLayout方法。首先两个方法都是异步执行的。setNeedsDisplay会调用自动调用drawRect方法,这样可以拿到UIGraphicsGetCurrentContext,就可以画画了。而setNeedsLayout会默认调用lay

  • console.log详解

    console.log详解console.log方法用于在控制台输出信息。它可以接受一个或多个参数,将它们连接起来输出。console.log(‘HelloWorld’)//HelloWorldconsole.log(‘a’,’b’,’c’)//abcconsole.log方法会自动在每次输出的结尾,添加换行符。console.log(1);console.log(2);conso…

  • Page.RegisterStartupScript的使用方法

    Page.RegisterStartupScript的使用方法用于后台输出Javascript执行段打开一个新窗口:Page.RegisterStartupScript(“starup”,”<scriptlanguage=’javascript’>window.open(‘”+url+”‘,”,’toolbar=no,resizable=yes,scrollbars=yes’)</script>”)警告…

  • 荣耀20青春版曝光用屏幕指纹,网友:不是侧边指纹更快吗?「建议收藏」

    荣耀20青春版曝光用屏幕指纹,网友:不是侧边指纹更快吗?「建议收藏」荣耀今年的手机,你会有一个共同的特征,那就是侧边指纹设计。之前采用背部指纹由于会破坏整体性,所以采用了侧边的指纹,不管是旗舰(除了去年的Magic2),还是千元机都是这种方案,荣耀官方给出的解释是,侧边指纹的解锁速度更快,而且荣耀这边还对比了相对更慢的三星S10系列的超声波方案,最终的结论是,侧边指纹完全超越了之前的三星解锁,所以让侧边指纹方案落地显得更为铿锵有力。…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号