默默的点滴

WebWorker类似于浏览器中的多线程操作。之前的JS中，无论你是使用setTimeout setIntever 还是 使用了XMLHttpRequest，都是在一个线程里面，前两个使用消息队列，XMLHttpRequest则是浏览器会帮你进行闲时进行，归根结底，都是在一个线程里面跑。如果用户想进行一些阻塞操作，很可能会产生卡住页面的情况。甚至于我们想实现一个类似于Android的专用 公用Service，那该怎么办？

H5新标准提出了WebWorker的概念，各个浏览器都各自实现了，先来看一下WebWorker能做什么。

 

WebWorker特点，在后台线程执行JS的能力，与页面通过send message这种方式通信。

WebWorker有两种，专用worker（dedicatedworker）与公用worker（sharedworker）。

疑问：worker与主线程如何同步，worker与主线程同时操作了一个DOM元素，会不会产生脏数据？所以，worker的能力被加以限制，不能访问DOM元素。

worker在chrome中是如何实现的？

chrome浏览器是多进程架构，分为Browser进程以及Render进程，每打开一个页面，浏览器都会为其分配一个Render进程，webkit以及js都运行在这个进程内。如果要起一个DedicatedWorker，Chrome会在Render进程中起一个线程。如果要起一个SharedWorker就稍微复杂一点，必须起一个专门的进程，并且，相同的SharedWorker不管你创建多少次，都只存在一个。

Android中的Chrome有一个限制，限定9个进程。

1.如果用户创建太多SharedWorker，可能第二个标签页都打不开？

2.SharedWorker的优先级如何定义？如果使用SharedWorker的页面都在后台，其优先级如何？

目前Android上的SharedWorker还处于讨论阶段，未实现。

下面看一下worker的基本用法，DedicatedWorker：

worker.js

this.addEventListener('message', function(e) {
    var data = e.data;
    console.log("worker: " + data);
    this.postMessage(data + 1);
});

worker中需要一个this.onmessage接收消息

postMessage发送消息

参数在 event.data中

main.js

if (window.Worker) {
    var worker = new Worker("./worker.js");
    worker.onmessage = function(e) {
        document.getElementById("worker").innerHTML = e.data;
    };

    document.addEventListener('keydown', function(evt) {
        worker.postMessage(evt.keyCode);
    });
}

使用Worker这个API来创建DedicatedWorker。

同样通过worker实例的onmessage和postMessage通信。

结束Worker：

在worker中，可以通过close()来kill掉自己

main中则调用worker.terminate()

如果worker运行中出现错误，在main中使用worker.onerror可以接收到错误消息

SharedWorker：

https://github.com/mdn/simple-shared-worker

SharedWorker跟DedicatedWorker有两个不同的地方：

1.通信不再直接通过worker，而是worker的port类

2.worker中需要实现onconnect，且其参数中有一个port列表，但目前只使用到了第一个

sharedworker.js

onconnect = function(e) {
   var port = e.ports[0];

   port.onmessage = function(e) {
     var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
     port.postMessage(workerResult);
   }

}

main.js

if (!!window.SharedWorker) {
  var myWorker = new SharedWorker("worker.js");

    myWorker.port.postMessage([squareNumber.value,squareNumber.value]);

  myWorker.port.onmessage = function(e) {
    result2.textContent = e.data;
    console.log('Message received from worker');
  }
}

当然 还可以写另一个页面，同样可以使用跟main.js类似的方法跟sharedworker通信。

ServiceWorker：

ServiceWorker是WebWorker的一种，它更加复杂，所以也更加强大。

首先，ServiceWorker有独立的生命周期:

1.Register：主线程调用API注册ServiceWorker

2.Installing：浏览器启动安装过程，加载和缓存一些静态资源

有可能失败进入Error状态

3.Activated：激活阶段，此阶段可以升级ServiceWorker

4.激活后，ServiceWorker会接管页面，如果页面是刚刚注册，本次不会被接管，下次加载页面才会接管。

5.ServiceWorker接管页面后，如果有fetch和message事件，会处于onfetch和onmessage，其他情况可能被终止。

ServiceWorker的特性：

1.它是一个worker，同样不能操作dom元素，同样可以通过postMessage与调用线程通信

2.ServiceWorker增加了网络处理，onfetch

3.ServiceWorker不被使用的时候，它会自己终止，再次使用会被重新激活，不要依靠它的内存来保存信息，请用webStorage或者indexDB。

4.ServiceWorker大量使用Promise，就是封装的一个callback标准

5.ServiceWorker权限很大，即所有网络请求都经过它，可以劫持连接，伪造和过滤响应，所以只能在https网页上注册ServiceWorker(是只能么？)。

6.ServiceWorker只作用于同域的fetch。onfetch有一个缓存的例子，我们通过缓存类缓存一些request和response，下次request，直接去缓存找response，处理失败了再去网络实时请求。注：response的类型需要是basic，即同域请求。

8.ServiceWorker的自动更新。

当网页激活时，浏览器会检查ServiceWorker是否有更新（有一个字节不同就会认为有更新），浏览器后台下载。

下载完开始运行，进入install状态，之后进入waitting状态。因为此时旧的ServiceWorker仍然在运行。

当页面被杀掉，旧去新来。

当然，如果你之前缓存了request，更新后需要清理一下。

现有问题：

如果在Install时失败了，页面无法感知。

ServiceWorker主要作用是在onfetch里面缓存/处理request。

https://github.com/GoogleChrome/samples

中有大量的onfetch与cache结合使用做离线应用的例子，在此不多赘述。

来自

http://blog.csdn.net/yl02520/article/details/14446763

https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers

遇到引擎不能处理相对路径的问题，写了一个简单的相对路径转绝对路径的函数，留下备用：



function rel2Abs(path) {
    var _path = path;
    var locationStr = location.href.toString();
    console.log(locationStr);
    var result = '';

    var relative;
    while (relative = _path.substring(0, _path.indexOf("\/"))) {
        console.log(relative);
        if (relative === '.') {
            // 遇到. path去掉最前面的./
            // 遇到.当前路径去掉/后面内容
            _path = _path.substring(_path.indexOf('\/') + 1, _path.length);
            locationStr = locationStr.substring(0, locationStr.lastIndexOf('\/') + 1);
        } else if (relative === '..') {
            // 遇到.. path去掉最前面的../
            // 遇到.. 当前路径去掉/xxx,然后再去掉/后面的内容
            _path = _path.substring(_path.indexOf('\/') + 1, _path.length);
            locationStr = locationStr.substring(0, locationStr.lastIndexOf('\/'));
            locationStr = locationStr.substring(0, locationStr.lastIndexOf('\/') + 1);
        } else {
            break;
        }
    }
    var result = locationStr + _path;
    path = result;
    return result;
}

原理很简单，只支持/，且遇到错误不能自动处理

做项目是遇到一个封装的不错的Util类，写一下，长期备用：

CMD标准

define(function(require, exports, module) {
    "use strict";

    function Util() {}

    (function() {
        Util.isWindow = function(obj) {
            return obj !== null && obj === obj.window;
        };

        Util.isFunction = function(obj) {
            return typeof obj === 'function';
        };

        Util.isObject = function(obj) {
            return typeof obj === 'object';
        };

        Util.isArray = function(obj) {
            return obj instanceof Array;
        };

        Util.isPlainObject = function(obj) {
            return Util.isObject(obj) && !Util.isWindow(obj);
        };

        Util.isString = function(obj) {
            return typeof obj === 'string';
        };

        // 将其他的object统统搞到一个object中去
        // 这个函数不如直接写两个参数看着舒服 target objects，就不用各种slice shift了
        Util.extend = function(target) {
            var deep;
            var args = [].slice.call(arguments, 1);

            if (typeof target === 'boolean') {
                deep = target;
                target = args.shift();
            }

            args.forEach(function(arg) {
               extend(target, arg, deep);
            });

            return target;

            // 这个函数就是把source里面的一层一层往下展开给target，object 和 array会一直展开
            function extend(target, source, deep) {
                for (var key in source) {
                    if (deep && (Util.isPlainObject(source[key]) || Array.isArray(source[key]))) {
                        if (Util.isPlainObject(source[key]) && !Util.isPlainObject(source[key])) {
                            target[key] = {};
                        }

                        if (Array.isArray(source[key]) && !Array.isArray(target[key])) {
                            target[key] = [];
                        }
                        extend(target[key], source[key], deep);
                    } else {
                        target[key] = source[key];
                    }
                }
            }
        };

        Util.ajaxGet = function(url, data, callback) {
            // 简单学习一下XMLHttpRequest，一个JS对象，提供了封装的获得url上资源数据的方法，支持xml http ftp file
            // 步骤简单： open(method, url, sync), send(), 如果是异步的话 就调用onreadystatechange方法
            var xhr = new XMLHttpRequest();
            // 设置超时时间为30s
            xhr.timeout = 30000;

            xhr.onreadystatechange = function() {
                console.log("xhr.status is " + xhr.readyState);
                if (xhr.readyState === 4) {
                    var status = 0;
                    try {
                        status = xhr.status;
                    } catch(e) {
                        // eat and ignore the exception, since access the status of XHR might cause a exception after timeout occurs;
                        return;
                    }

                    if (status === 200) {
                        var result = null;
                        try {
                            result  = JSON.parse(xhr.responseText.replace(/\n|\r|\t|\b|\f/g, ''));
                        } catch(e) {
                            callback(null);
                            return;
                        }
                        callback(result);
                    } else {
                        callback(null);
                    }

                    xhr.onreadystatechange = null;
                    xhr = null;
                }
            };
            xhr.withCredentials = true;
            xhr.open("GET", url + "?" + data, true);
            xhr.send(null);
            return xhr;
        };

        Util.ajaxPost = function(url, data, callback) {
            var xhr = new XMLHttpRequest();
            // 原来navigator除了online，还有个connection
            // 这个connection，而且这个connection很刁，何以拿到type，还有change事件
            // 关键是一大堆浏览器都TM的不支持
            var connection = navigator.connection;
            switch(connection.type) {
                case connection.WIFI :
                case connection.ETHERNET:
                    xhr.timeout = 3000;
                    break;
                case connection.CELL_3G:
                case connection.CELL_4G:
                    xhr.timeout = 5000;
                    break;
                case connection.CELL_2G:
                    xhr.timeout = 30000;
                    break;
                default :
                    xhr.timeout = 30000;
            }

            // POST比GET复杂，首先不同网络timeout不一样，其次有很多事件需要监听
            xhr.addEventListener("error", function(e) {
                if (e && e.loaded === 60) {
                    // https error
                    if (e.total === 9) {
                        callback("CERTIFICATE TIME ERROR");
                    } else {
                        callback("CERTIFICATE ERROR");
                    }
                } else {
                    callback("NETWORK_ERROR");
                }
            });

            xhr.addEventListener("abort", function() {
                console.log("request abort!");
            });

            xhr.addEventListener("timeout", function() {
                callback("TIMEOUT");
            });

            xhr.addEventListener("readystatechange", function() {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        var result;
                        try {
                            result = JSON.parse(xhr.responseText.replace(/\n|\r|\t|\b|\f/g, ''));
                        } catch(e) {
                            callback("DATA_INVALID");
                            return;
                        }
                        callback(result);
                    } else if (xhr.status !== 0) {
                        callback("HTTP_ERROR");
                    }
                }
            });

            // withCredentials = true 将使得请求会带上cookie
            xhr.withCredentials = true;
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.send(data);
            return xhr;
        };

        Util.abort = function(xhr) {
            xhr.abort;
        };

        Util.getGeoLocation = function(callback) {
            var timeout = 30000;
            if (navigator.connection && navigator.connection.type) {
                switch (navigator.connection.type) {
                    // wifi
                    case 2:
                        timeout = 8000;
                        break;
                    // 2G
                    case 3:
                        timeout = 30000;
                        break;
                    // 3g:
                    case 4:
                        timeout = 20000;
                        break;
                    default:
                        timeout = 30000;
                        break;
                }
            }

            // 这里就是浏览器获取地理位置的用法
            navigator.geolocation.getCurrentPosition(
                function(position) {
                callback.call(this, position);
                }.bind(this),
                function(error) {
                    callback.call(this, null);
                }.bind(this),
                {
                    enableHighAccuracy: true,
                    maximumAge: 180000,
                    timeout: timeout
                });
        };

        // 实时定位, 返回一个ID，用来取消监听
        Util.startWatchGeoLocation = function(callback) {
            return navigator.geolocation.watchPosition(
                function(position) {
                    callback.call(this, position);
                }.bind(this),
                function() {
                    callback.call(this, null);
                }.bind(this),
                {
                    maximumAge: 600000,
                    timeout: 20000
                }
            );
        };

        Util.stopWatchGeoLocation = function(geoId) {
            navigator.geolocation.clearWatch(geoId);
        };

        // 主要用来 ajax request中把object转为字符串
        Util.paramToStr = function(params) {
            var data = '';
            var isFirstChar = true;
            for (var key in params) {
                if (params.hasOwnProperty(key)) {
                    if (isFirstChar === true) {
                        isFirstChar = false;
                        data += key + "=" + params[key];
                    } else {
                        data += "&" + key + "=" + params[key];
                    }
                }
            }
            return data;
        };

        // 预加载一个Image
        Util.preloadImage = function(images) {
            if (images && images.length) {
                for(var i = 0; i < images.length; i++) {
                    var imgContainer = new Image();
                    imgContainer.src = images[i];
                    imgContainer = null;
                }
            }
        };

        // 就是把 rgb(,,)换成了rgba(,,,)
        Util.addOpacity = function(color, opacity) {
            var newColor = color.replace(/rgb/g, "rgba").replace(/\)/g, "," + opacity + ")");
            return newColor;
        };

        Util.isOffline = function() {
            return !navigator.onLine;
        };

        Util.getStorageValue = function(key) {
            var item = window.localStorage.getItem(key);
            if (!item) {
                return;
            }

            item = JSON.parse(item);
            var data = item.data;
            var type = item.type;
            var value = null;
            switch(type) {
                case "Boolean":
                    value = Boolean(data);
                    break;
                case "String":
                    value = String(data);
                    break;
                case "Number":
                    value = Number(data);
                    break;
                case "JSON":
                    value = JSON.parse(data);
                    break;
            }

            return value;
        };

        Util.setStorageValue = function(key, value) {
            var type = null;
            var data = value;
            if (typeof value === "boolean") {
                type = "Boolean";
            } else if (typeof value === "string") {
                type = "String";
            } else if (typeof value === "number") {
                type = "Number";
            } else if (typeof value === "object") {
                type = "JSON";
                data = JSON.stringify(value);
            }

            window.localStorage.setItem(key, JSON.stringify({data: data, type: type}));
        }
    }).();

    module.exports = Util;
});