注意:以 "#" 开头的是注释行,但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果你编辑了一张图片,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。
(5)、关于应用程序缓存的说明
需要留心缓存的内容。
一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使你修改了服务器上的文件。为了确保浏览器更新缓存,你需要更新 manifest 文件。
注意:浏览器对缓存数据的容量限制可能不太一样,某些浏览器设置的限制是每个站点 5MB。
9、HTML5 Web Workersweb worker 是运行在后台的 JavaScript,不会影响页面的性能。
什么是 Web Worker?
当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。
你可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
IE10,Firefox,Chrome,Safari 和 Opera 都支持 Web Worker。
下面的例子,创建一个简单的 Web Worker,在后台计数:
Web Workers计数: 开始工作停止工作 w; 14 function startWorker(){ ){ ){ ); 18 } (event) { event.data; 21 }; 22 } 23 else{ ; 25 } 26 } stopWorker(){ 29 w.terminate(); 30 }
下面是例子中所用的外部 JS 文件:
1 var i = 0; 2 function timedCount(){ 3 i = i + 1; 4 postMessage(i); 5 setTimeout("timedCount()",500); 6 } 7 timedCount();
注意:在 Chrome 下调试该程序会报安全错误:Uncaught SecurityError: Failed to construct 'Worker': Script at 'file:///C:/Users/.../html5/setworkers.js' cannot be accessed from origin 'null'. 构建 'Worker' 失败,原因在于 Chrome 不允许在本地文件中运行脚步时加载 Web Workers,可以在 IE 和 Firefox 中查看效果。
JS 是单线程运行的,浏览器进程中只有一个 JS 的执行线程,同一时刻内只会有一段代码运行。浏览器的内核是多线程的,它们在内核制控下相互配合以保持同步,一个浏览器至少实现三个常驻线程:javascript 引擎线程,GUI 渲染线程,浏览器事件触发线程。JS 引擎是基于事件驱动单线程执行的,JS 引擎一直等待着任务队列中任务的到来,然后加以处理,浏览器无论在什么时候都只且只有一个 JS 线程在运行 JS 程序。JS 既是单线程又是异步的,异步的机制是浏览器的两个或以上常驻线程共同完成的,异步请求就是由两个常驻线程:JS 引擎线程和事件触发线程共同完成的,JS 的执行线程发起异步请求,这时浏览器会开一条新的 HTTP 请求线程来执行请求,此时 JS 的任务已完成,继续执行线程队列中剩下的其他任务,然后在未来的某一时刻事件触发线程监视到之前发起的 HTTP 请求已完成,它就会把完成事件插入到 JS 执行队列的尾部等待 JS 处理。比如定时触发(settimeout 和 setinterval)是由浏览器的定时器线程执行的定时计数,然后在定时时间把定时处理函数的执行请求插入到 JS 执行队列的尾端,所以用这两个函数时,实际的执行时间是大于或等于指定时间的,并不保证能准确定时。
正常形况下,浏览器执行某段程序时会阻塞直到运行结束后再恢复到正常状态,而 HTML5 的 Web Workers 就是为了解决这个问题,Web Workers 是 HTML5 提供的一个 JS 多线程解决方案,他的作用是可以解决程序阻塞问题,并提升效率。比如例子中的后台计数,用 Web Worker 实现另起一个线程,将计数工作运行在后台的 JS 文件,并返回累加后的结果,该 js 文件运行于后台,独立于其他脚本,不会影响页面的性能,HTML 页面可以继续做任何事情,而此时 web worker 在后台运行,互不干扰。所以使用 Web Worker 可以运行一些大计算量的代码,而不阻塞用户界面。
下面是对上面例子的解析:
(1)、检测 Web Worker 支持
在创建 web worker 之前,可以使用下面代码检测浏览器是否支持:
1 if(typeof(Worker) !== 'undefined'){ 2 alert('OK,支持') 3 else{ 4 alert('NO,不支持'); 5 }
(2)、创建 web worker 文件
然后在一个外部 JavaScript 文档中创建 Web Worker。
上面的例子创建了一个计数脚本,该脚本存储在 html5 文件夹下 "setworkers.js" 文件中。
该文件重要的部分是 postMessage() 方法,他用于向 HTML 页面传回一段消息。
在实际项目中 Web Worker 肯定不会用于如此简单的脚本,他常被用于更耗费 CPU 资源的任务。
(3)、创建 Web Worker 对象
创建好 Web Worker 文件之后,接下来就需要从 HTML 页面调用它。
下面的代码用于检测是否存在 Worker,如果不存在,它会创建一个新的 Web Worker 对象,然后运行 "setworkers.js" 中的代码: