Web Worker 实践尝试

2016-12-30 09:53:03来源:作者:Github人点击

web worker实践尝试 概览:js多线程

worker技术,是让js在浏览器有多线程能力的一项技术。一个最直观的例子是看whatwg的例子

https://html.spec.whatwg.org/multipage/workers.html#a-background-number-crunching-worker

这个例子是开了一个线程在找素数,如果找到了,就通知前台,如果是直接写,UI线程的阻塞非常明显。

worker的上下文

在worker里面的上下文与外面的不一样

interface WorkerGlobalScope : EventTarget { readonly attribute WorkerGlobalScope self; readonly attribute WorkerLocation location; readonly attribute WorkerNavigator navigator; void importScripts(USVString... urls); attribute OnErrorEventHandler onerror; attribute EventHandler onlanguagechange; attribute EventHandler onoffline; attribute EventHandler ononline; attribute EventHandler onrejectionhandled; attribute EventHandler onunhandledrejection;};

可以看到,全局有三个对象 self, location, navigator,一个函数 importScripts,还有几个事件句柄。其中 self对象指向全局对象本身,类似于我们熟悉的 window。可以看到,worker与一般的浏览器环境最大的不同是 没有DOM, document.getElementById什么的就不要用了。然后与外面进行通讯是靠事件句柄。所以worker很适合 计算量大、 异步的事情。

worker与接口

这个例子告诉我们worker中可以用XMLHttpRequest对象。结合前面#18 的工程化方案,我项目里面已经是用webpack基于commonjs打包的,而worker构造函数new Worker(params)里面的参数是js脚本的路径,所以我们需要worker-loader去帮我们屏蔽路径的问题。

代码分割问题

接上,worker-loader要载入的chunk都打包在一起,这会涉及到一个代码分割的问题,worker里面的代码与外面的上下文不一样,不能与外面共用代码。所以要尽量做到代码不重复载入,我在实践过程中的思路是这样的,用Promise,根据手机支持的情况,载入不同的代码分支,然后resolve不同的接口对象

let worker = null;function getAPIObject(){ return new Promise((resolve,reject)=>{ if(window.Worker){ require.ensure([],require=>{ let Worker = require('worker!worker-chunk'); worker = worker || new Worker(); //让worker只初始化一次 resolve(worker); }) }else{ require.ensure([],require=>{ let api = require('api-chunk'); resolve(api); }) } })}

然后等首屏载入完之后,执行代码,让后台生成一个专门进行接口请求的的线程,处理报文封装的问题,主要是里面涉及到一个加密计算的的模块

然后整个请求的模块就从左边的模型变成右边的模型

+----------------------+ +----------------------+| | | || UI thread && encrypt | | UI thread || | | |+--------^-------------+ +---------^------------+ | | | |Promise | +---------v------------+ |ajax | worker(encrypt) | | +---------^------------+ | |+--------v-------------+ |ajax| | +---------v------------+| service | | || | | service |+----------------------+ +----------------------+ jQuery历史遗留问题

因为历史代码的问题,我的接口请求模块是用jQuery写的,当时主要是为了方便管理ajax池。但前面也说了,worker中是没有DOM的,像这样的代码是绝对不行的。所以我参考

http://youmightnotneedjquery.com/中的ajax重写了一个很简单的接口请求代码。

调试的问题

因为项目的脚手架是参考 https://github.com/davezuko/react-redux-starter-kit的。里面有一段代码是这样的

development : (config) => ({ compiler_public_path : `http://${config.server_host}:${config.server_port}/` }),

可见在调试的时候,脚本载入的路径是一段完整的路径,比如你的debug机器是 192.168.1.2,端口8080,那么webpack给你生成的js引用代码就是

<script src="http://192.168.1.2:8080/chunk.hash.js"></script>

而不是

<script src="chunk.hash.js"></script>

然后我用手机真机调试的时候,一般会用代理(fiddler/charles)进行请求转发,顺便可以调用到桩数据,不用直接请求接口。代理的端口是 8888,所以在浏览器看来,我打开了一个 http://192.168.1.2:8888/的页面,却载入了一个 http://192.168.1.2:8080/的脚本。一般的操作不会有问题,但是涉及到worker,会报 DOM Exception 18错误。好吧,是跨域的问题,所以就修改成在手机上调试时 public_path为空。

其他 标准还提到传送消息时的对象共享的问题,一般用于前端图像处理,见 https://html.spec.whatwg.org/multipage/workers.html#module-worker-example 在多页面应用中应该要用sharedworker 同样是多线程,在node端,可以用child_process模块 以上,由于还本人没有进行实践,就不多写了,挖个坑以后慢慢研究。

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台