Web文件的缓存(Cache)
manifest 文件的建议的文件扩展名是：".appcache"。
manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。
缓存的作用
通过对网页文件的缓存，达到离线浏览的目的
缓存的好处
离线浏览 - 用户可在应用离线时使用它们
优化访问速度 - 已缓存资源加载得更快
降低服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
如何实现缓存功能？
创建manifest文件(如web.appcache)，并根据manifest文件的结构书写缓存指令
manifest文件的结构
第一部分：CACHE MANIFEST - 在此标题下列出的文件将在首次访问后进行缓存
第二部分：NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
第三部分：FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)
以#开头的是注释行，可写在任何部分中，方便注释及更新缓存使用
mainfest文件相关注意点
CACHE MANIFEST字符的起始点必须位于文件的第一个字符处，否则文件无法解析，导致缓存无法实现；即使有个空格都不行。NETWORK和FALLBACK的书写顺序没有强制要求。
manifest文件内容一旦被改动，浏览器会根据最新的manifest文件规则更新进行缓存。
若web文件同时在CACHE MANIFEST和NETWORK标题下出现，浏览器会将文件进行缓存处理，即CACHE MANIFEST优先级比NETWORK高
缓存的文件来源两个地方：一是CACHE MANIFEST标题下的文件，二是FALLBACK中无法访问时的回退页面(如404页面)
若manifest属性被定义，那么需要访问网络的所有文件都需要写在NETWORK标题下。因此NETWORK标题下的内容常用*通配符表示
在标签上添加manifest属性，并指定manifest文件的路径 ，浏览器会根据manifest文件中的指令进行缓存处理。
HTML代码示例
Document 
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
如何更新缓存 修改manifest文件内容
添加删除或修改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代码
first:
second
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 + "
" + second.value + "
" + 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");注：postmsg.php为服务端推送消息页面的访问路径
为EventSource实例添加事件监听
es.onopen = function(ev){...}：与服务器建立连接后触发的事件
es.onerror = function(ev){...}：发生错误时触发的事件，错误包含很多种，网络连接错误，编码错误等等
es.onmessage = function(ev){...}：接收到服务器端推送消息的事件；获取消息的方法ev.data
服务端发送消息，消息的格式为data:消息内容
代码示例
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页面
"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;
}
Server Sent Event
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
