1.什么是应用程序缓存
     HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网链接时进行访问。
2.应用缓存的优势
     离线浏览   用户可在应用离线时使用它们
     速度     已缓存资源加载得更快
     减少服务器负载    浏览器将只从服务器下载更新过或更改过的资源
3.实现缓存
     如需启用应用程序缓存，请在文档的<html>标签中包含manifest属性
     manifest文件的建议的文件扩展名是：“.appcache”
4.Manifest文件：
     CACHE MANIFEST   在此标题下列出的文件将在首次下载后进行缓存
     NETWORK     在此标题下列出的文件需要与服务器的链接，且不会被缓存
     FALLBACK     在此标题下列出的文件规定当页面无法访问时的回退页面（比如404页面）
 
<!DOCTYPE html>
<html manifest="index.appcache">
<head lang="en">
     <meta charset="UTF-8">
     <title></title>
     <script src="index.js"></script>
</head>
<body>
     <h1 class="h1">hello world!</h1>
</body>
</html>
 
需要在 .appcache文件里面写
CACHE MANIFEST
 
CACHE:
index.html
style.css
index.js
 
Web Worker
1.什么是Web Worker
     web worker 是运行在后台的JavaScript, 独立于其他脚本 ， 不会影响页面的性能
2.方法
     postMessage() 它用于向HTML页面传回一段消息
     terminate() 终止 web worker , 并释放浏览器/计算机资源
3.事件
     onmessage
 
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数字累加</title>
    <script src="app.js"></script>
</head>
<body>
    <div id="numDiv">0</div>
    <button id="start">start</button>
    <button id="stop">stop</button>
</body>
</html>
 
//app.js
var numDiv;
var work=null;
 
window.onload=function(){
    numDiv=document.getElementById("numDiv");
    document.getElementById("start").onclick=startWorker;
    document.getElementById("stop").onclick=function(){
        if(work){
            work.terminate();
            work=null;
        }
    }
 
}
 
function startWorker(){
    if(work){
        return;
    }
    work= new Worker("count.js");
    work.onmessage=function(e){
        numDiv.innerHTML= e.data;
    }
}
 
//count.js
var countNum=0;
function count(){
    postMessage(countNum);
    countNum++;
    setTimeout(count,1000);
}
count();
 
 

HTML5应用缓存与Web Workers的更多相关文章

  1. HTML5（八）Web Workers

    HTML 5 Web Workers web worker 是运行在后台的 JavaScript,不会影响页面的性能. 什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不 ...

  2. [html5] 学习笔记-应用缓存与Web workers

    1.应用缓存 HTML5引入了应用缓存程序,这意味着Web应用可进行缓存,并可在没有因特网连接时访问. 应用缓存的优势: 1)离线浏览--用户可在应用离线时使用它们 2)速度--已缓存是从本地加载,加 ...

  3. HTML 5 Web 存储、应用程序缓存、Web Workers

    在客户端存储数据 HTML5 提供了两种在客户端存储数据的新方法: localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前, ...

  4. HTML5——web存储 Web SQL 数据库 应用程序缓存 Web Workers 服务器发送事件 WebSocket

    web存储 比cookie更好的本地存储方式 localStorage - 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除. sessionStorage - 用于临时保存同一窗口( ...

  5. HTML5权威指南--Web Storage,本地数据库,本地缓存API,Web Sockets API,Geolocation API(简要学习笔记二)

    1.Web Storage HTML5除了Canvas元素之外,还有一个非常重要的功能那就是客户端本地保存数据的Web Storage功能. 以前都是用cookies保存用户名等简单信息.   但是c ...

  6. html5 Web Workers

    虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行,单实际上JavaScript使单线程的,一次只能做一件事情(关于JavaSc ...

  7. 【HTML5】Web Workers

    什么是 Web Worker? 当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成. web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性 ...

  8. HTML5学习(十)---Web Workers

    参考教程:http://www.w3school.com.cn/html5/html_5_webworkers.asp web worker 是运行在后台的 JavaScript,不会影响页面的性能. ...

  9. HTML5 Web Workers来加速您的移动Web应用

    一直以来,Web 应用程序被局限在一个单线程世界中.这的确限制了开发人员在他们的代码中的作为,因为任何太复杂的东西都存在冻结应用程序 UI 的风险.通过将多线程引入 Web 应用程… 在本文中,您将使 ...

随机推荐

  1. leetcode：122. Best Time to Buy and Sell Stock II（java）解答

    转载请注明出处:z_zhaojun的博客 原文地址 题目地址 Best Time to Buy and Sell Stock II Say you have an array for which th ...

  2. QT学习笔记（一）——ui的认识

    ////////////2015/08/06/////////////////// ///////////by xbw////////////////////////// //////////环境 Q ...

  3. NHibernate查询导致Update问题

    用NHibernate,总感觉怪事多罗罗. 比如说,明明我们是在查询,却报错,刨根问底找到出错原因,竟然是因为执行了一些Update甚至Insert!老天,我们明明只是查询而已,什么时候有更新过数据? ...

  4. asp.net mvc + javascript生成下载文件

    近期做的是对现有项目进行重构.WEB FROM改成MVC,其实也算是推倒重来了. 里面有一个导出功能,将数据输出成txt文件,供下载.原先的做法是有一个隐藏的iframe,在这个iframe的页面中设 ...

  5. 2016/05/05 smarty ①分页 ② 查询后分页 ③缓存

    samrty  分页   查询后分页 0505fch.php <?php include("init.inc.php"); include("DBDA.php&qu ...

  6. SSH三大框架整合配置详细步骤（1）

    配置Struts2.0 3.1 基础配置 1)引入Struts必需的五个jar包.下载struts-2.1.6-all.zip解压后,struts-2.1.6\lib目录下是struts所有的相关ja ...

  7. YTU 2440: C++习题 复数类--重载运算符+,-,*,/

    2440: C++习题 复数类--重载运算符+,-,*,/ 时间限制: 1 Sec  内存限制: 128 MB 提交: 1189  解决: 774 题目描述 定义一个复数类Complex,重载运算符& ...

  8. POSTMAN模拟数组数据

    有时候写接口,需要传入数据数据.比如购物车中的一组商品.它们的数量是不固定的,只能用数组才能更好的处理. 怎么用POSTMAN模拟呢? 万能的POSTMAN.

  9. 在Main Thread中使用异步

    Whenever you first start an Android application, a thread called "main" is automatically c ...

  10. I.MX6 U-boot编译找不到用户目录

    /**************************************************************************** * I.MX6 U-boot编译找不到用户目 ...