H5_Node6_worker&cache

最新推荐文章于 2025-12-10 17:22:48 发布

原创最新推荐文章于 2025-12-10 17:22:48 发布 · 543 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#多线程 #html5

html/css篇专栏收录该内容

12 篇文章

订阅专栏

本文介绍Webworker实现多线程以提升浏览器性能的方法，包括创建Worker对象、数据交互及停止Worker进程等内容。同时，文章还讲解了离线缓存的应用优势、配置流程与注意事项。

-->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.35

CACHE:
aa.css
abc.js
04.jpg

NETWORK:
*

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>
<!-- 服务器环境下运行 -->