内容简介：HTML5的离线存储是基于一个新建的在开始之前要先了解下manifest（即.appcache文件），上面的解析清单要怎么写,大致就长这样子。manifest 文件可分为三个部分：
HTML5的离线存储是基于一个新建的 .appcache 文件的，通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。HTML5离线缓存又名 Application Cache ，是从浏览器的缓存中分出来的一块缓存区，要想在这个缓存中保存数据，可以使用一个描述文件 （manifest file） ，列出要下载和缓存的资源。
<html manifest="haorooms.appcache"> 复制代码
解析清单
在开始之前要先了解下manifest（即.appcache文件），上面的解析清单要怎么写,大致就长这样子。
CACHE MANIFEST #version 1.2.2 CACHE: #css http://www.haorooms.com/theme/assets/style.css #js http://www.haorooms.com/theme/assets/js/main.js #img http://static.hyb.dev.ipo.com/css/wifi/pc/images/logo-fk1.png http://static.hyb.dev.ipo.com/css/wifi/images/favicon.ico NETWORK: # 这里写的所有资源永远都不会被缓冲 # 可以使用星号来指示所有其他资源/文件都需要因特网连接（除去CACHE下面列出来的） * FALLBACK: /html5/ /404.html # 下面的 FALLBACK 小节规定如果无法建立因特网连接，则用 "404.html" 替代 /html5/ 目录中的所有文件： 复制代码
manifest 文件可分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存 NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存 FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面） 复制代码
在线的情况下,用户代理每次访问页面，都会去读一次manifest.如果发现其改变, 则重新加载全部清单中的资源
更新缓冲
一、更新manifest文件：给manifest添加或删除文件，都可更新缓存，如果我们更改了js，而没有新增或删除，前面例子中注释中的版本号、时间戳或者md5码等进行修改，都可以很好的用来更新manifest文件
二、通过javascript操作：html5中引入了js操作离线缓存的方法，下面的js可以手动更新本地缓存。 window.applicationCache.update();
三、清除浏览器缓存：如果用户清除了浏览器缓存（手动或用其他一些工具）都会重新下载文件。
二、Web Worker
js是单线程的，也就是说当前只能允许干一件事，其他任务需要等待执行，随着计算机领域的不断发展，尤其是多核CPU的出现，使得单线程带来许多的不便，无法充分发挥计算机的计算能力。
web worker的作用将是允许我们创建多个进程，创建的子线程，收到主线程的控制，主线程可以适当的分配一些任务给子线程，让子线程能够在后台运行，互不干扰，等到子线程执行完毕后再返回给主线程。这样的好处是，一些计算密集型或高延迟的任务，被 Worker 线程负担了，主线程（通常负责 UI 交互）就会很流畅，不会被阻塞或拖慢。
使用web worker需要注意的一些点
1、DOM限制，worker子线程无法调用我们的document、window、parent对象，可以使用navigator、location对象。 2、Worker 线程和主线程不在同一个上下文环境，它们不能直接通信，必须通过消息完成。 3、不能使用alert、confirm但是可以使用XMLHttpRequest发送ajax请求。 4、Worker 线程无法读取本地文件，即不能打开本机的文件系统（file://），它所加载的脚本，必须来自网络。 复制代码
基本用法
// 主线程
var worker = new Worker('work.js'); // 创建一个web worker
// Worker()构造函数的参数是一个脚本文件，该文件就是 Worker 线程所要执行的任务。由于 Worker 不能读取本地文件，所以这个脚本必须来自网络。如果下载没有成功（比如404错误），Worker 就会默默地失败。
// 发送消息给子线程
worker.postMessage('Hello World');
worker.postMessage({method: 'echo', args: ['Work']});
// 监听子线程传回的消息
worker.onmessage = function (event) {
console.log('Received message ' + event.data);
// event.data 可以拿到数据
doSomething();
}
function doSomething() {
// 执行任务
worker.postMessage('Work done!');
worker.terminate(); // 关闭子线程
}
// 主线程监听错误
worker.onerror(function (event) {
console.log([
'ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message
].join(''));
});
复制代码
// 接收消息
self.addEventListener('message', function (e) {
self.postMessage('You said: ' + e.data);
}, false);
// self代表子线程自身，即子线程的全局对象。
// 或者可以这么写
self.addEventListener('message', function (e) {
var data = e.data; // 接收传入的消息内容
switch (data.cmd) {
case 'start':
self.postMessage('WORKER STARTED: ' + data.msg);
break;
case 'stop':
self.postMessage('WORKER STOPPED: ' + data.msg);
self.close(); // 关闭自身
break;
default:
self.postMessage('Unknown command: ' + data.msg);
};
}, false);
复制代码
三、WebSocket
webSocket是一种网络通信协议，许多高级功能都需要它来实现。我们可能会有疑问，网络通信我们不是已经有HTTP协议了吗，为啥还需要这个协议呢？很简单，我们都知道HTTP协议只能是客户端发起请求，服务端不能主动推送内容。之前我们的解决办法就是在客户端轮询，但是这样相当消耗资源。webSocket就提供了解决方法。
协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。
客户端脚本例子
var ws = new WebSocket("wss://echo.websocket.org"); // 创建socket
// 连接成功后的回调
ws.onopen = function(evt) {
console.log("Connection open ...");
// 发送消息过去
ws.send("Hello WebSockets!");
};
// 监听消息的返回
ws.onmessage = function(event) {
console.log( "Received Message: " + event.data);
// 服务器数据可能是文本，也可能是二进制数据（blob对象或Arraybuffer对象）。
if(typeof event.data === String) {
console.log("Received data string");
}
if(event.data instanceof ArrayBuffer){
var buffer = event.data;
console.log("Received arraybuffer");
}
// 关闭连接
ws.close();
};
// 关闭的回调函数
ws.onclose = function(evt) {
console.log("Connection closed.");
};
// 发生错误的回调
socket.onerror = function(event) {
// handle error event
};
复制代码
以上所述就是小编给大家介绍的《前端HTML5 一些你没用过的特性》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！
猜你喜欢:
- 可怕，原来 HTTPS 也没用
- 抓包神器：tcpdump! 我还真没用过
- 校招面试心得看得再多也没用
- 应用层加密普及后，网络层压缩就没用了
- [译] 求你不要再写没用的提交信息了
- 暴力堆数据没用！NLP 和语音技术突破难在哪？
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
