html5之Worker

Worker入门

1. worker文件必须和主文件满足同源策略(受同源策略限制)
2. 可以使用importScript导入文件
3. worker是window的子集 不能获取window,document对象,所以在worker中不能引入jquery zepto (受DOM限制)
4. 作用域globalWorkerScope
5. Worker线程和主线程不在同一个上下文环境中 不能直接通信 必须通过消息完成
6. 脚本限制: worker线程不能执行alert或者confirm方法(window上的方法) 但是可以可以使用XMLHTTPRequest(也是window上的方法)发出ajax请求
7. 文件限制: worker 线程无法读取到本地文件(不能使用本机的文件系统)，所加载的脚本必须来自网络

// postMessage(data) 方法
// message 事件
// 主线程
var num = 100;

var worker = new Worker("./index.js");

// 接收子线程数据
worker.onmessage = function (e) {
  // worker.terminate(); // 关闭该子线程 
  console.log("主线程接收子线程的结果",e.data); // 5050
}

// worker.terminate();
// 给子线程传递数据
worker.postMessage({num});

console.log("主线程开始执行")


// 子线程
// 关闭当前子线程
// this.close();
// 在当前线程中引入其他代码
// importScript("./pittle.js')  //在worker中可以引入当前文件下面的pittle.js代码
var sum = 0;
// 绑定message时间
this.onmessage = function(e){
	console.log(e.data) // 接收主线程数据
	for(var i = 0;i <= e.data.num;i ++){
		sum += i;
	}
	// 向主线程发送数据
	postMessage(sum)
	console.log("子线程执行结果",sum)
  // this.close(); 关闭当前线程
}
console.log("子线程开始执行")

// 执行顺序
// 主线程开始执行
// 子线程开始执行
// {num: 100}
// 子线程执行结果 5050
// 主线程接收子线程的结果 5050

service worker

zhuanlan.zhihu.com/p/115243059

service worker 是什么？

一个服务器与浏览器之间的中间人角色，如果网站中注册了service worker那么它可以拦截当前网站 所有的请求，进行判断（需要编写相应的判断程序），如果需要向服务器发起请求的就转给服务器， 如果可以直接使用缓存的就直接返回缓存不再转给服务器。从而大大提高浏览体验。