H5_Node6_worker&cache

来源：互联网发布：java面向对象经典题目编辑：程序博客网时间：2024/06/05 10:26

-->Web worker多线程
创建对象、发送\接收数据、方法与事件
-->离线缓存概述
-->API：
支持性检测与支持度
配置：引入、书写配置文件、方法与事件

一、单线程
Javascript高强度的计算会导致浏览器无暇顾及用户页面进入假死状态。
JS运行在浏览器中，是单线程的，每个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文件路径

2、页面向worker发送数据：postMessage(msg)
参数msg：向Worker发送的数据。
最好为字符串，其他数据格式注意兼容问题。

3、页面接收Worker数据：

message事件 Worker返回数据时触发

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title></head><body><button id="btn1">传统计算</button><h1 id="con1">运算结果：</h1><button id="btn2">worker计算</button><h1 id="con2">运算结果：</h1><button id="btn3">其他运行程序</button><script>btn1.onclick=function(){console.time('执行时间');var sum=0;for (var i = 0; i < 100000000; i++) {sum+=i;};con1.innerHTML='运算结果：'+sum;console.timeEnd('执行时间');}//1、创建一个worker对象var wk=new Worker('worker2.js');btn2.onclick=function(){//2、向Worker发送数据wk.postMessage('开工');}//接受worker返回的数据wk.onmessage=function(e){con2.innerHTML='运算结果：'+e.data;}btn3.onclick=function(){alert('其他程序执行');// wk.terminate();//1、关掉worker}</script></body></html>

worker执行:

1、Worker接收数据：
message事件页面发送数据时触发Worker返回数据：

2、停止worker:
在页面里面：terminate()
在Worker里面：close()

onmessage=function(e){console.time('执行时间');var msg=0;if (e.data=='开工') {for (var i = 0; i < 100000000; i++) {msg+=i;};}else{msg='你不是我老板';}postMessage(msg);console.timeEnd('执行时间');}// close();//2、关掉worker本身

3、子进程:
在Worker内部可以再开启子进程：importScripts(url[,url])

4、注意事项：
Worker全局对象不再是window，而是self
由于web worker位于外部文件中，不能访问
window、DOM、但可以访问计时器、ajax等
不同浏览器对跨域限制不同，最好不要跨域
子线程webkit不兼容，不建议使用

四、离线缓存概述

传统的web应用是在线应用，这其实也是web的特色，对于PC时代问题并不大，但到了移动互联网时代，设备终端位置不再固定，依赖无线信号，网络的可靠性变得更低。比如：在火车上，穿山越岭进隧道，便无法访问web应用......

1、离线缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度快 - 已缓存资源加载得更快
减少服务器压力 - 浏览器只从服务器下载更改的资源

2、基本流程：

3、注意事项

浏览器对缓存数据的容量限制可能不太一样（某些浏览器的限制是每个站点 5MB）；

如果manifest文件或者内部列举的某一个文件不能正常下载，整个更新过程都将失败，浏览器继续全部使用老的缓存；
引用manifest的html必须与manifest文件同源，在同一个域下；
FALLBACK中的资源必须和manifest文件同源；

当资源被缓存后，直接请求这个绝对路径也会访问缓存中的资源；

站点中的其他页面即使没有设置manifest属性，请求的资源如果在缓存中也从缓存中访问；

当manifest文件发生改变时，资源请求本身也会触发更新；

离线存储如果资源有更新，但第一次加载还会是原来的版本。

4、支持性

支持性检测

支持度：IE不支持

5、关于配置：
5-1、服务器配置

不同的服务器环境配置不同，在服务器中MIME配置文件中增加manifest文件类型，代码如下：
（wamp\Apache2\conf\mime.types）
AddType text/cache-manifest manifest
AddType text/cache-manifest .appcache

5-2、前端配置
创建一个后缀名为manifest的文件(或appcache)，并在页面中引入

<html lang="en" manifest="cache.manifest">

5-3、书写配置文件

manifest文件结构：
CACHE MANIFEST（必须）
# 第一行必须为CACHE MANIFEST
# v1.0.0
CACHE:（必须）
# 缓存文件
test.css
NETWORK:（可选）
# 不缓存文件
*
FALLBACK:（可选）
# 页面无法访问时
*.html 404.html

CACHE MANIFEST#v1.0.35CACHE:aa.cssabc.js04.jpgNETWORK:*FALLBACK:*.html 404.html

CACHE：
# 在此标题下列出的文件将在首次下载后进行缓存
NETWORK：
# 在此标题下列出的文件需要与服务器连接，不会被缓存
FALLBACK：
# 在此标题下列出的文件规定当页面无法访问时的回退页

单行注释：#开头

6、方法&事件&状态
6-1、update()：方法检测更新manifest文件

6-2、updateready事件：当有新的缓存，并更新完以后，会触发此事件
update方法会触发updateready事件
window.applicationCache.update();
window.applicationCache.addEventListener('updateready',function(){
alert('更新完成')
},false);

6-3、swapCache方法：用来执行本地缓存的更新操作
触发updateready事件时调用swapCache方法
window.applicationCache.update();
window.applicationCache.addEventListener('updateready',function(){
window.applicationCache.swapCache();
},false);

6-4、applicationCache.status 本地缓存的状态
0 === 未缓存
1 === 空闲（缓存为最新状态）
2 === 检查中
3 === 下载中
4 === 更新就绪
5 === 缓存过期

6-5、progress事件：当有新的缓存，并处于正在下载的过程中时，会不断触发此事件。
progress中的event对象包含：loaded和total。
loaded代表当前已经加载完成的文件，total为总共需要更新的文件数。

6-6、其他事件

checking事件：正在检查
noupdate事件：检查更新结束，没有需要更新。
progress事件：正在下载新缓存不断触发
updatereadey事件：更新完成
downloading事件：正在下载
cached事件：空闲，缓存为最新状态
error事件：报错

<!DOCTYPE html><html lang="en" manifest="cache.manifest"><!-- <html lang="en"> --><head><meta charset="UTF-8"><link rel="stylesheet" href="aa.css"><link rel="stylesheet" href="bb.css"><title></title></head><body><div class="box">look my-change</div><h1 id="txt">js 脚本</h1><img src="04.jpg" alt=""><script src="abc.js"></script><script>/*//每隔五秒检查一次更新setInterval(function(){window.applicationCache.update();},5000)*///1、update():检测manifest文件是否更新window.applicationCache.update();//2、updateready事件:当有新的缓存，并更新完以后，会触发此事件window.applicationCache.addEventListener('updateready',function(){// alert('更新完成!');//3、swapCache方法:用来执行本地缓存的更新window.applicationCache.swapCache();//4、重新加载window.location.reload();},false)//5、progress事件：当有新的缓存，并处于正在下载的过程中时，会不断触发此事件。window.applicationCache.addEventListener('progress',function(){console.log(applicationCache.status);//3},false)</script></body></html><!-- 服务器环境下运行 -->

0 0