Web Worker Best Practices

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


请求优化

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

可以作到只请求一次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就能够使用了。url