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. android真机调试 INSTALL_FAILED_MEDIA_UNAVAILABLE 问题解决方案

    前提是手机用数据线连到电脑,安装好手机对应的驱动. 1:打开cmd 2:cd切换到sdk安装目录的platform-tools目录,比如我安装到了D盘根目录,则输入: cd d:\android-sd ...

  2. （转）SQL中使用or影响性能的解决办法

    原文地址:https://www.cnblogs.com/xuxiaona/p/4962727.html 近期做了一个存储过程,执行时发现非常的慢,竟然需要6.7秒! 经排查,发现时间主要都耗在了其中 ...

  3. UVA11383 Golden Tiger Claw —— KM算法

    题目链接:https://vjudge.net/problem/UVA-11383 题解: 根据KM()算法,标杆满足:l(x) + l(y) >= w(x, y) . 当求完最大权匹配之后,所 ...

  4. C# WinForm开发系列 - Form/Window

    Form是WinForm开发中非常重要的一个控件, 本文将包含如何制作一个关于对话框,系统载入提示窗体, 创建类似于QQ提示框以及创建不规则窗体等(文章及相关代码搜集自网络,仅供学习参考,版权属于原作 ...

  5. 【SCOI 2005】 繁忙的都市

    [题目链接] 点击打开链接 [算法] 题目描述比较繁琐,但细心观察后,发现其实就是用kruskal算法求最小生成树 [代码] #include<bits/stdc++.h> using n ...

  6. 【黑金教程笔记之005】【建模篇】【Lab 04 消抖模块之二】—笔记

    实验四和实验三的区别在于输出.实验三是检测到由高到低的电平变化时就拉高输出,检测到由低到高的电平变化时就拉低输出.而实验四检测到由高到低的电平变化时产生一个100ms的高脉冲.当检测到由低到高的电平变 ...

  7. Ubuntu 14.04.1 配置 Android 源码开发环境（jdk版本切换）（转载）

    转自:http://www.cnblogs.com/ren-gh/p/4248407.html # Ubuntu 14.04.1 1.更新源: sudo apt-get update 安装vim工具: ...

  8. bzoj 2303: [Apio2011]方格染色【并查集】

    画图可知,每一行的状态转移到下一行只有两种:奇数列不变,偶数列^1:偶数列不变,奇数列^1 所以同一行相邻的变革染色格子要放到同一个并查集里,表示这个联通块里的列是联动的 最后统计下联通块数(不包括第 ...

  9. 洛谷 P3732 [HAOI2017]供给侧改革【trie树】

    参考:http://blog.csdn.net/di4covery/article/details/73065684 我以为是后缀数组+某某数据结构,结果居然是01trie!!题解说"因为是 ...

  10. bzoj2720: [Violet 5]列队春游（概率期望+组合数学）

    Description Input Output Sample Input   Sample Output   HINT 数学题都这么骚的么……怎么推出来的啊……我是真的想不出来…… 首先,要算总的视 ...