Web Worker Best Practices

Posted 2022-03-05 力为

使用Web Worker可以把一些比较计算量相对大的阻塞浏览器响应的计算放在单独的线程里计算。

请求优化

构造Worker的时候需要给定js的链接URL，worker内部请求js运行代码。假如worker有若干个，但使用同一个js文件，也仍然会请求js多次。听起来就不是个好的方法。

能够做到只请求一次worker js就最好了。那如何做到？

使用window.URL.createObjectURL可以构造一个对象的“本地”URL，XHR请求的时候并不是从服务器端请求，而是从当前页面的window对象中获得。所以接下来做的就是把worker js的内容首次从服务器端拿到后，创建这样的URL。详细的实现如下：

        var workerJSUrl

        var xmlhttp=new XMLHttpRequest();
        xmlhttp.onreadystatechange=function()
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
                var workerJSBlob = new Blob([xmlhttp.responseText], 
                    type: "text/javascript"
                );
                workerJSUrl = window.URL.createObjectURL(workerJSBlob));
            
        ;
        xmlhttp.open("GET",url,true);
        xmlhttp.send();

其中wokerJSUrl中保存的就是worker js的地址。

跨域请求

如果你向第三方开发者提供的JSAPI中使用到了worker，可能就会遇到跨域的问题，因为worker是不支持跨域的，即使你的js设置了允许跨域访问。

怎么办？使用上述的办法，js设置可以跨域访问后，然后保存为本地的链接，这样worker就可以使用了。