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. SDUT 3503 有两个正整数，求N!的K进制的位数

    有两个正整数,求N!的K进制的位数 题目链接:action=showproblem&problemid=3503">http://sdutacm.org/sdutoj/prob ...

  2. Android之——监听手机开机事件

    转载请注明出处:http://blog.csdn.net/l1028386804/article/details/47028535 本文中,主要通过监听开机广播来达到监听手机开机状态的操作.在Andr ...

  3. Java对象的创建过程

    //TODO https://www.cnblogs.com/chenyangyao/p/5296807.html

  4. Library Project里面使用Case语句判断R.id值报错。case expressions must be constant expressions

    原文地址:http://blog.csdn.net/wchinaw/article/details/7325641 在一般的Android项目里R里面的资源声明看起来是这样的: public stat ...

  5. 优化tomcat配置(从内存、并发、缓存)优化

    一.Tomcat内存优化 ** Tomcat内存优化主要是对 tomcat 启动参数优化,我们可以在 tomcat 的启动脚本 catalina.sh 中设置 java_OPTS 参数. JAVA_O ...

  6. CodeChef - CHEFPRAD Chef and Pairs 树形DP

     题意 给你一棵由 N 个节点构成的树 T.节点按照 1 到 N 编号,每个节点要么是白色,要么是黑色.有 Q 组询问,每组询问形如 (s, b).你需要检查是否存在一个连通子图,其大小恰好是 s,并 ...

  7. NYOJ110 剑客决斗

    剑客决斗 来源:Polish Olympiad in Informatics(波兰信息学奥林匹克竞赛) 时间限制:5000 ms  |  内存限制:65535 KB 难度:5   描述 在路易十三和红 ...

  8. codeforces 739E - Gosha is hunting

    这道题有三种做法,感受一下: 感觉到了歪果仁费尽脑汁想出来的神仙贪心脑洞题被中国人套路算法踩爆的凄凉...(我的名字是不是暴露了我的真实实力) ============================ ...

  9. POJ1182 食物链 —— 种类并查集

    题目链接:http://poj.org/problem?id=1182 食物链 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: ...

  10. Win10 开启 Hyper-V 安装 CentOS 7 minimal

    Win10 开启 Hyper-V 安装 CentOS 7 minimal 日常使用的 PC 环境一般都是 Windows 环境,如果需要偶尔使用 Linux 环境,一般情况下,大家的选择是安装虚拟机 ...