H5多线程&离线缓存
支持度：IE不支持
Web worker多线程
创建对象、发送\接收数据、方法与事件
单线程
Javascript高强度的计算会导致浏览器无暇顾及用户页面进入假死状态。
S运行在浏览器中，是单线程的，每个window一个JS线程，浏览器是事件驱动的，浏览器中很多行为是异步的，例如：鼠标点击、进入、移出事件、定时器触发事件、ajax请求完成回调等。当一个异步事件发生的时候，它就进入事件队列。浏览器有一个内部大消息循环，Event Loop（事件循环），会轮询大的事件队列并处理事件，当线程中没有执行任何同步代码的前提下才会执行异步代码。
Web Worker
通过使用Web Worker， 我们可以在浏览器后台运行Javascript， 而不占用浏览器自身线程。Web Worker可以提高应用的总体性能，并且提升用户体验。 (服务环境运行) 创建后台进程，这些进程不会卡死用户界面，更适合用来进行纯数据、与UI无关、较耗费CPU的计算。
测试执行时间：
console.time('执行时间');
……
console.timeEnd('执行时间');
支持性检测
if(typeof(Worker)!=="undefined"){
alert('支持多线程');
}else{
alert('不支持多线程');
}
支持度： IE6789版本不支持
API
1.创建Worker对象：new Worker( url );
参数url：处理该Worker进程的JS文件路径 var ww = new Worker('test.js');
2.页面向worker发送数据：postMessage(msg)
参数msg： 向Worker发送的数据。
最好为字符串，其他数据格式注意兼容问题。 ww.postMessage('hello girls');
3.页面接收Worker数据：
message事件 Worker返回数据时触发
ww.addEventListener('message',function(e){ alert(e.data); //弹出worker返回的数据 },false);
4.Worker接收数据：
message事件 页面发送数据时触发
Worker返回数据： postMessage(msg);
参数msg： 向页面发送的数据。
addEventListener('message',function(e){
// e.data-->'hello girls'
var data = "you say:" + e.data;
postMessage(data);
},false);
5.停止Worker
(1)在页面里面：terminate()
(2)在Worker里面：close()
6.子进程
在Worker内部可以再开启子进程：importScripts(url[,url])
7.注意事项
Worker全局对象不再是window，而是self 由于web worker位于外部文件中，不能访问 window、DOM、但可以访问计时器、ajax等 不同浏览器对跨域限制不同，最好不要跨域 子线程webkit不兼容，不建议使用
例子：
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
</style>
</head>
<body>
<button id="btn">发送数据</button>
<script>
var btn=document.getElementById('btn');
var wk=new Worker('worker.js');
btn.onclick=function(){
wk.postMessage('ready');
}
wk.onmessage=function(e){
console.log(e.data);
}
</script>
</body>
</html>
worker.js
onmessage=function(e){
var msg='';
if (e.data=='ready') {
msg='ok';
}
else{
msg='你是谁呀';
}
postMessage(msg);
}
二、离线缓存概述
传统的web应用是在线应用，这其实也是web的特色，对于PC时代问题并不大，但到了移动互联网时代，设备终端位置不再固定，依赖无线信号，网络的可靠性变得更低。比如：在火车上，穿山越岭进隧道，便无法访问web应用......
离线缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度快 - 已缓存资源加载得更快
减少服务器压力 - 浏览器只从服务器下载更改的资源
1.离线缓存流程
2.注意事项
浏览器对缓存数据的容量限制可能不太一样（某些浏览器的限制是每个站点 5MB）；
如果manifest文件或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存；
引用manifest的html必须与manifest文件同源，在同一个域下；
FALLBACK中的资源必须和manifest文件同源； 当资源被缓存后，直接请求这个绝对路径也会访问缓存中的资源；
站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问；
当manifest文件发生改变时，资源请求本身也会触发更新； 离线存储如果资源有更新，但第一次加载还会是原来的版本
3.支持性
支持性检测
支持度：IE不支持
4。服务器配置
不同的服务器环境配置不同，在服务器中MIME配置文件中增加manifest文件类型，代码如下：
（wamp\Apache2\conf\mime.types）
AddType text/cache-manifest manifest
AddType text/cache-manifest .appcache
5.前端配置
创建一个后缀名为manifest的文件 (或appcache)，并在页面中引入
6.书写配置文件
manifest文件结构：
CACHE MANIFEST（必须）
# 第一行必须为CACHE MANIFEST
# v1.0.0 CACHE:（必须）
# 缓存文件
test.css
NETWORK:（可选）
# 不缓存文件
*
FALLBACK:（可选）
# 页面无法访问时
*.html 404.html
CACHE：
# 在此标题下列出的文件将在首次下载后进行缓存
NETWORK：
# 在此标题下列出的文件需要与服务器连接，不会被缓存
FALLBACK：
# 在此标题下列出的文件规定当页面无法访问时的回退页
单行注释：#开头
7.方法
update()：方法检测更新manifest文件
8.事件
updateready事件：当有新的缓存，并更新完以后，会触发此事件
update方法会触发updateready事件
window.applicationCache.update();
window.applicationCache.addEventListener('updateready',function(){
alert('更新完成')
},false);
9.
swapCache方法：用来执行本地缓存的更新操作
触发updateready事件时调用swapCache方法
window.applicationCache.update();
window.applicationCache.addEventListener('updateready',function(){
window.applicationCache.swapCache();
},false);
10.状态
applicationCache.status 本地缓存的状态
0 === 未缓存
1 === 空闲（缓存为最新状态）
2 === 检查中
3 === 下载中
4 === 更新就绪
5 === 缓存过期
11.事件
progress事件：当有新的缓存，并处于正在下载的过程中时，会不断触发此事件。
progress中的event对象包含：loaded和total。
loaded代表当前已经加载完成的文件，total为总共需要更新的文件数。
checking事件：正在检查
noupdate事件：检查更新结束，没有需要更新。
progress事件：正在下载新缓存不断触发
updatereadey事件：更新完成
downloading事件：正在下载
cached事件：空闲，缓存为最新状态
error事件：报错
例子：
html
<!DOCTYPE html>
<html manifest="cache.manifest">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="aa.css"/>
<link rel="stylesheet" href="bb.css"/>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
</style>
</head>
<body>
<div class="box">看我的变化</div>
<h1 id="txt">js脚本是否运行</h1>
<img src="cat.jpg" alt="">
<script src="abc.js"></script>
<script>
var appcache=window.applicationCache;
appcache.update();
appcache.addEventListener('updateready',function(){
appcache.swapCache();
window.location.reload();
},false);
appcache.addEventListener('progress',function(){
console.log(appcache.status);
},false);
</script>
</body>
</html>
manifest文件
CACHE MANIFEST
# V1.0.32231121
CACHE:
aa.css
abc.js
cat.jpg
NETWORK:
*
浙公网安备 33010602011771号