Web文件的缓存(Cache)
manifest 文件的建议的文件扩展名是：".appcache"。
manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
缓存的作用
通过对网页文件的缓存，达到离线浏览的目的
缓存的好处
- 离线浏览 - <small>用户可在应用离线时使用它们</small>
- 优化访问速度 - <small>已缓存资源加载得更快</small>
- 降低服务器负载 - <small>浏览器将只从服务器下载更新过或更改过的资源。</small>
如何实现缓存功能？
- 创建manifest文件(如web.appcache)，并根据manifest文件的结构书写缓存指令
-
manifest文件的结构
- 第一部分：CACHE MANIFEST - <small>在此标题下列出的文件将在首次访问后进行缓存</small>
- 第二部分：NETWORK - <small>在此标题下列出的文件需要与服务器的连接，且不会被缓存</small>
- 第三部分：FALLBACK - <small>在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）</small>
- 以
#开头的是注释行，可写在任何部分中，方便注释及更新缓存使用
-
mainfest文件相关注意点
- CACHE MANIFEST字符的起始点必须位于文件的第一个字符处，否则文件无法解析，导致缓存无法实现；即使有个空格都不行。NETWORK和FALLBACK的书写顺序没有强制要求。
- manifest文件内容一旦被改动，浏览器会根据最新的manifest文件规则更新进行缓存。
- 若web文件同时在CACHE MANIFEST和NETWORK标题下出现，浏览器会将文件进行缓存处理，即CACHE MANIFEST优先级比NETWORK高
- 缓存的文件来源两个地方：一是CACHE MANIFEST标题下的文件，二是FALLBACK中无法访问时的回退页面（如404页面）
- 若manifest属性被定义，那么需要访问网络的所有文件都需要写在NETWORK标题下。因此NETWORK标题下的内容常用
*通配符表示
- 在
<html>标签上添加manifest属性，并指定manifest文件的路径<html manifest="web.appcache">，浏览器会根据manifest文件中的指令进行缓存处理。
HTML代码示例
<!DOCTYPE html>
<!--定义manifest属性，并指定文件路径-->
<html lang="en" manifest="index.appcache">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script src="index.js"></script>
</head>
<body>
<header>
<img src="logo.gif" alt="">
</header>
</body>
</html>
manifest文件内容示例
CACHE MANIFEST
# 2016-10-23 v1.0.3
# 以下文件会被缓存
/index.js
/logo.gif
# 所有文件都需要访问网络
# 若style.css不可访问网络，也没有缓存，
# 那么将无法访问到style.css文件，即网页无法加载style.css
NETWORK:
*
FALLBACK:
#/sub文件，404.html会被缓存
/sub 404.html
#/sub/目录下的所有文件
/sub/ 404.html
如何更新缓存 <small>修改manifest文件内容</small>
- 添加删除或修改manifest缓存文件；
- 更新manifest文件中的注释信息，如版本信息；常用于文件不变但需要浏览器重新下载缓存文件的时候，如css文件、js文件更新。
注：浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。
Web Worker
大部分浏览器都支持Worker，但IE浏览器不支持；判断是否支持的方法：
if(Worker){...}else{不支持};
什么是 Web Worker？
web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。
在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
什么时候使用Web Worker？
当需要js处理复杂度较高的事务时，为了避免影响交互页面的用户体验，可通过Worker后台处理相关事务，处理好之后返回前台简单处理即可。
Web Worker的使用方法
- 创建Worker
var w = new Worker("worker.js") - 设置Worker的消息监听事件
w.onmessage = function(ev){...}，当Worker(即worker.js)传回消息时执行函数（得到回传数据后做前台处理即可） - 发送数据给Worker(即worker.js)处理
w.postMessage(...) - Worker(即worker.js)设置消息监听事件
this.onmessage = function(ev){...}，当Worker(即worker.js)收到w发送的消息后，执行函数 - 当Worker(即worker.js)处理完成之后将数据发送给
w即可，this.postMessage(...) - 触发第二步的消息监听事件
worker.js就是一个Worker实例的文件，复杂的事务就在该js中处理，处理完成后回传给HTML页面。
worker通过postMessage(...)方法发送消息，通过onmessage事件监听接收消息，消息的内容通过ev.data获取
如何终止Worker
通过w.terminate()方法即可终止Worker，并释放其浏览器/计算机资源
Worker相关注意点
- Worker只能在服务端运行；因此需要看Worker效果的话需要搭建Web Server
- 由于 web worker 位于外部文件中，所以无法访问下例 JavaScript 对象：
- window对象
- document对象
- parent对象
代码示例
- HTML代码
<body>
<form>
<label for="first">first:</label>
<input type="number" id="first">
<label for="second">second</label>
<input type="number" id="second">
<output class="result"></output>
</form>
<script src="index.js"></script>
</body>
- index.js代码
"use strict";
var first, second, result, w;
// querySelectorAll(".result") 获取指定CSS选择器的所有元素
// querySelector 获取指定CSS选择器的第一个元素
first = document.querySelector("#first");
second = document.querySelector("#second");
result = document.querySelector(".result");
console.log(w + first.value + "<br/>" + second.value + "<br/>" + result.textContent);
// 判断浏览器是否支持Worker，也可通过typeof(Worker) === "undefined"；这里的window表示self=this，故可以不写
if (window.Worker) {
console.log(typeof(w));
// typeof() 判断对象类型；如果w为undefined类型，即未定义，则创建一个Worker对象
if (typeof(w) === "undefined") {
w = new Worker("plus.js");
}
// second元素的change事件监听
first.onchange = postMsg;
// second元素的change事件监听
second.onchange = postMsg;
// worker的message事件监听
w.onmessage = function(ev) {
result.textContent = ev.data;
};
} else {
result.textContent = "您的浏览器不支持Worker";
}
// 监听到change事件执行的发送信息函数
function postMsg() {
// 判断first数据不为NaN
if (isNaN(first.valueAsNumber)) {
first.valueAsNumber = 0;
}
if (isNaN(second.valueAsNumber)) {
second.valueAsNumber = 0;
}
// 将两个值封装为数组发送给plus.js这个worker对象
w.postMessage([first.valueAsNumber, second.valueAsNumber]);
}
- plus.js代码
// plus.js是一个Worker对象，这里的this可以不写
this.onmessage = function(ev) {
// 将传递过来的first和second相加后发送给该worker对象,即index.js中的w
var result = "result:" + (ev.data[0] + ev.data[1]);
postMessage(result);
}
上述代码示例效果图
服务器消息推送EventSource
服务器消息推送的实现方法
- WebSocket：功能强大，但实现起来技术比较复杂
- HTTP协议的简易轮询：弊端无法很好解决
- 轮询周期过程过长，客户端更新数据不及时
- 轮询周期过程过短，增加服务端的负担
- EventSource：通过客户端实时监听服务端的推送情况，缺点是IE浏览器不支持。
EventSource如何使用？
- 在服务端推送消息页面添加一个内容为
'Content-Type: text/event-stream'的header - 在HTML页面JS中创建EventSource对象
var es = new EventSource("postmsg.php");<small>注：postmsg.php为服务端推送消息页面的访问路径</small> - 为EventSource实例添加事件监听
- es.onopen = function(ev){...}：与服务器建立连接后触发的事件
- es.onerror = function(ev){...}：发生错误时触发的事件，错误包含很多种，网络连接错误，编码错误等等
-
es.onmessage = function(ev){...}：接收到服务器端推送消息的事件；获取消息的方法
ev.data
- 服务端发送消息，消息的格式为
data:消息内容
代码示例
- php服务端
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('Y-m-d H:m:s');
echo "data: {$time}\n\n"; //这里\n\n必须加，否则消息无法被获取
flush();
?>
- HTML页面
<head>
<script>
"use strict";
var serverStatus, serverDate, eventSource;
window.onload = function(ev) {
serverStatus = document.getElementById("serverStatus");
serverDate = document.getElementById("serverDate");
// 判断浏览器是否支持EventSource，IE不支持，其他浏览器都支持
if (typeof(EventSource) !== "undefined") {
startServSendLinstener();
} else {
document.body.innerHTML = "Sorry! No server-sent events support..";
}
};
//运行服务器端推送消息的事件服务
function startServSendLinstener() {
serverStatus.innerHTML = "Server is Connecting...";
eventSource = new EventSource("test.php");
// console输出eventSource调用的URL，即test.php是URL
console.log(eventSource.url);
/*EventSource对象中的三个监听事件*/
// 与服务器建立连接后触发的事件
eventSource.onopen = openHandler;
// 发生错误时触发的事件
eventSource.onerror = errorHandler;
// 接收数据时触发的事件；事件中的data负责传输服务器端发送的数据
// eventSource.onmessage = msgHandler;
// 添加EventSource的message事件监听，效果与eventSource.onmessage一样；
eventSource.addEventListener("message", msgHandler);
}
// 与服务器连接完成后执行的函数
function openHandler(ev) {
// 更新页面中的serverStatus
serverStatus.innerHTML = "Connect Success!"
}
// 出现错误执行的函数，错误包含很多种，网络连接错误，编码错误等等
function errorHandler(ev) {
// 更新页面中的serverStatus
console.log(ev);
serverStatus.innerHTML = "errors";
}
// 获取服务端信息后执行的函数
function msgHandler(ev) {
// 更新页面中的serverDate
serverDate.innerHTML = ev.data;
}
</script>
<meta charset="UTF-8">
<title>Server Sent Event</title>
</head>
<body>
<section>
<h2>Server Status</h2>
<p id="serverStatus"></p>
</section>
<section>
<h2>Server Date</h2>
<p id="serverDate"></p>
</section>
</body>
网友评论