热门关键字:
jquery > jquery教程 > jquery教程 > HTML5 应用程序缓存

HTML5 应用程序缓存

355
作者:管理员
发布时间:2021/4/21 17:54:59
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4529
  每个指定了 manifest 的页面在用户对其访问时都会被缓存。如果未指定 manifest 属性,则页面不会被缓存(除非在 manifest 文件中直接指定了该页面)。


  manifest 文件的建议的文件扩展名是:".appcache"。


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


  manifest 文件是简单的文本文件,它告知浏览器被缓存的内容(以及不缓存的内容)。


  manifest 文件可分为三个部分:


  CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存


  NETWORK - 在此标题下列出的文件需要与服务器的连接,且不会被缓存


  FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面(比如 404 页面)


  第一行,CACHE MANIFEST,是必需的:


  CACHE MANIFEST


  /theme.css


  /logo.gif


  /main.js


  上面的 manifest 文件列出了三个资源:一个 CSS 文件,一个 GIF 图像,以及一个 JavaScript 文件。当 manifest 文件加载后,浏览器会从网站的根目录下载这三个文件。然后,无论用户何时与因特网断开连接,这些资源依然是可用的。


  下面的 NETWORK 小节规定文件 "login.php" 永远不会被缓存,且离线时是不可用的:


  可以使用星号来指示所有其他资源/文件都需要因特网连接:


  下面的 FALLBACK 小节规定如果无法建立因特网连接,则用 "offline.html" 替代 /html5/ 目录中的所有文件:


  注意: 第一个 URI 是资源,第二个是替补。


  一旦应用被缓存,它就会保持缓存直到发生下列情况:


  用户清空浏览器缓存


  manifest 文件被修改(参阅下面的提示)


  由程序来更新应用缓存


  提示:以 "#" 开头的是注释行,但也可满足其他用途。应用的缓存会在其 manifest 文件更改时被更新。如果您编辑了一幅图片,或者修改了一个 JavaScript 函数,这些改变都不会被重新缓存。更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。


  请留心缓存的内容。


  一旦文件被缓存,则浏览器会继续展示已缓存的版本,即使您修改了服务器上的文件。为了确保浏览器更新缓存,您需要更新 manifest 文件。


  注意: 浏览器对缓存数据的容量限制可能不太一样(某些浏览器设置的限制是每个站点 5MB)。


  2020-11-23 20:28:22                   更新


  浏览量: 74


  当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。


  web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。


  Internet Explorer 10, Firefox, Chrome, Safari 和 Opera 都支持Web workers.


  下面的例子创建了一个简单的 web worker,在后台计数:


  demo_workers.js 文件代码:


  在创建 web worker 之前,请检测用户的浏览器是否支持它:


  现在,让我们在一个外部 JavaScript 中创建我们的 web worker。


  在这里,我们创建了计数脚本。该脚本存储于 "demo_workers.js" 文件中:


  以上代码中重要的部分是 postMessage() 方法 - 它用于向 HTML 页面传回一段消息。


  注意: web worker 通常不用于如此简单的脚本,而是用于更耗费 CPU 资源的任务。


  我们已经有了 web worker 文件,现在我们需要从 HTML 页面调用它。


  下面的代码检测是否存在 worker,如果不存在,- 它会创建一个新的 web worker 对象,然后运行 "demo_workers.js" 中的代码:


  然后我们就可以从 web worker 发生和接收消息了。


  向 web worker 添加一个 "onmessage" 事件监听器:


  当我们创建 web worker 对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐