了解HTML5和“她”的 API (三)

　　Web Workers(后台线程)

　　JavaScript是单线程的，较长的javascript运算会阻塞UI线程。

　　web worker 是运行在后台的 JavaScript，不会影响页面的性能。

　　在web worker中执行的脚本不能访问 window对象 document对象 parent对象。

　　web worker 一般用于更耗费 CPU 资源的任务。

　　检测 Web Worker 支持

//检测浏览器是否支持Web Worker
if(typeof(Worker) !== "undefined"){
	//支持Web Worker
	console.log('支持Web Worker')
}else{
	//不支持 
	console.log('不支持Web Worker')
}

　　创建 web worker

var worker = new Worker('demoworkers.js');
worker.onmessage = function (e){
    console.log(e.data);
};

//demoworkers.js
!function(){
    var i = 0;
    (function(){
        postMessage(++i);
        setTimeout(arguments.callee,1000);
    })();
}();

　　创建好web worker后，一般结合postMessage API来发送和接收消息。

　　 终止 Web Worker

worker.terminate();

　　Web Storage(本地存储)

　　以前，在客户端存储数据是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

　　Web Storage API提供了两种在客户端存储数据的方法　

localStorage - 存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用
sessionStorage - 针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

　　检测浏览是否支持Web Storage

//localStorage
if(window.localStorage){
	//支持
}else{
	//不支持
}
//sessionStorage
if(window.sessionStorage ){
	//支持
}else{
	//不支持
}

　　设置和获取数据

//设置一个值
localStorage.setItem('oneKey','oneValue');
localStorage.oneKey = 'oneValue';

sessionStorage.setItem('oneKey','oneValue');
sessionStorage.oneKey = 'oneValue';

//获取一个值
localStorage.getItem('oneKey');
localStorage.oneKey;

sessionStorage.getItem('oneKey');
sessionStorage.oneKey;

　　Storage 属性和方法

length //storage对象中存储的键/值对的数量
key(index) //获取指定位置的对象
getItem(key) //获取指定键的值 如果没有则返回null
setItem(key,value) //设置一个值到指定键的位置，如果已经存在则替换
removeItem(key) //删除指定键的值 
clear() //清除storage对象中存储的所有数据

　　在一些复杂的情况下，多个网页、标签页或者worker都需要访问存储的数据，应用程序会在存储数据被修改后触发一系列操作。在这种情况下，web storage API提供了一套事件通知机制。

window.addEventListener('storage',displayStorageEvent,true);
function displayStorageEvent(e){
	//e.key 更新或删除的键
	//e.newValue 更新前键对应的值
	//e.oldValue 更新后键对应的值
	//e.url storage事件发生的源
	//e.storageArea 指向值发生改变的localStorage(或sessionStorage)的一个引用
}

　　Application Cache(应用缓存)

　　应用程序缓存意味着web应用可进行缓存，并可在没有因特网连接时进行访问。

　　 应用程序缓存为应用带来三个优势：

离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。

　　检测浏览器是否支持应用缓存

if(window.applicationCache){
	//支持
}else{
	//不支持
}

　　启用应用程序缓存需在文档的 <html> 标签中包含 manifest 属性

 <html manifest="offline.appcache">

　　manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"，必须在 web 服务器上进行配置。

如果使用的是Apache 服务器，需要修改一下.htaccess 文件，追加一行代码：
AddType text/cache-manifest .manifest
这样就保证了.manifest 文件拥有正确的MIME 类型，即text/cache-manifest。
在.htaccess 文件中还可以加入以下代码：
<Files offline.manifest>
	ExpiresActive On
	ExpiresDefault "access"
</Files>
添加上面这几行代码，可以阻止浏览器缓存缓存文件。
因为offline.manifest是一个静态文件，浏览器默认就会缓存offline.manifest文件。
所以上面这几行代码就是让服务器告诉浏览器不要缓存。

　　Manifest 文件

　　 manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。

　　 manifest 文件可分为三个部分：

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

　　一个参考例子：

CACHE MANIFEST
# 2013-08-01 v1.0.0
CACHE:
/main.css
/main.js
/logo.gif

NETWORK:
*

FALLBACK:
//offline.html

/* ------------------------------ */
manifest 文件必须以CACHE MANIFEST 开头
第二行是一句注释，注明了manifest文件的日期、版本号。

CACHE部分罗列了所有离线使用所需的文件。
这些文件的路径都是相对offline.manifest而言的，使用绝对路径也是可以的。

NETWORK部分罗列了所有不需要被缓存的、离线时是不可用的文件。
可以使用星号来指示所有其他资源/文件都需要因特网连接

FALLBACK部分使用/字符定义了一个URL模板。
它的作用是访问每个页面时都会问“缓存中有这个页面吗？”
如果有则显示缓存页面，如果没有则显示指定的offline.html文件

应用的缓存会在其 manifest 文件更改时被更新。
如果更新了一幅图片，或者一个JavaScript函数，这些改变都不会被重新缓存。
更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。

/* ------------------------------ */

　　离线行为

if(navigator.onLine){
	//在线
	console.log('在线')
}else{
	//离线
	console.log('离线')
}

window.addEventListener('online',function(e){
	console.log('在线');
},true);
window.addEventListener('offline',function(e){
	console.log('离线');
},true);

秒客网

了解HTML5和“她”的 API (三)

相关文章