了解HTML5和“她”的 API (三)
Web Workers(后台线程)
JavaScript是单线程的,较长的javascript运算会阻塞UI线程。
web worker 是运行在后台的 JavaScript,不会影响页面的性能。
在web worker中执行的脚本不能访问 window对象 document对象 parent对象。
web worker 一般用于更耗费 CPU 资源的任务。
检测 Web Worker 支持
1 2 3 4 5 6 7 8 | //检测浏览器是否支持Web Worker if ( typeof (Worker) !== "undefined" ){ //支持Web Worker console.log( '支持Web Worker' ) } else { //不支持 console.log( '不支持Web Worker' ) } |
创建 web worker
1 2 3 4 5 6 7 8 9 10 11 12 13 | 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
1 | worker.terminate(); |
Web Storage(本地存储)
以前,在客户端存储数据是由 cookie 完成的。但是 cookie 不适合大量数据的存储,因为它们由每个对服务器的请求来传递,这使得 cookie 速度很慢而且效率也不高。
Web Storage API提供了两种在客户端存储数据的方法
1 2 | localStorage - 存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用 sessionStorage - 针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。 |
检测浏览是否支持Web Storage
1 2 3 4 5 6 7 8 9 10 11 12 | //localStorage if (window.localStorage){ //支持 } else { //不支持 } //sessionStorage if (window.sessionStorage ){ //支持 } else { //不支持 } |
设置和获取数据
1 2 3 4 5 6 7 8 9 10 11 12 13 | //设置一个值 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 属性和方法
1 2 3 4 5 6 | length //storage对象中存储的键/值对的数量 key(index) //获取指定位置的对象 getItem(key) //获取指定键的值 如果没有则返回null setItem(key,value) //设置一个值到指定键的位置,如果已经存在则替换 removeItem(key) //删除指定键的值 clear() //清除storage对象中存储的所有数据 |
在一些复杂的情况下,多个网页、标签页或者worker都需要访问存储的数据,应用程序会在存储数据被修改后触发一系列操作。在这种情况下,web storage API提供了一套事件通知机制。
1 2 3 4 5 6 7 8 | window.addEventListener( 'storage' ,displayStorageEvent, true ); function displayStorageEvent(e){ //e.key 更新或删除的键 //e.newValue 更新前键对应的值 //e.oldValue 更新后键对应的值 //e.url storage事件发生的源 //e.storageArea 指向值发生改变的localStorage(或sessionStorage)的一个引用 } |
Application Cache(应用缓存)
应用程序缓存意味着web应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
1 2 3 | 离线浏览 - 用户可在应用离线时使用它们 速度 - 已缓存资源加载得更快 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。 |
检测浏览器是否支持应用缓存
1 2 3 4 5 | if (window.applicationCache){ //支持 } else { //不支持 } |
启用应用程序缓存需在文档的 <html> 标签中包含 manifest 属性
1 | <html manifest= "offline.appcache" > |
manifest 文件需要配置正确的 MIME-type,即 "text/cache-manifest",必须在 web 服务器上进行配置。
1 2 3 4 5 6 7 8 9 10 11 | 如果使用的是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 文件可分为三个部分:
1 2 3 | CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存 NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存 FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面) |
一个参考例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | 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函数,这些改变都不会被重新缓存。 更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。 /* ------------------------------ */ |
离线行为
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | if (navigator.onLine){ //在线 console.log( '在线' ) } else { //离线 console.log( '离线' ) } window.addEventListener( 'online' , function (e){ console.log( '在线' ); }, true ); window.addEventListener( 'offline' , function (e){ console.log( '离线' ); }, true ); |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步