Web Worker Best Practices

使用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就能夠使用了。