了解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 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/69208.html
