应用缓存

应用缓存：把资源缓存到web应用中

优势：

离线浏览：不联网就可以访问，之前访问的页面与数据。
速度：已缓存的资源加载的更快
减少服务器负载：浏览器只需要从服务器下载更新过或者更改过的资源

缓存实现

只需要在文档中标签中包含manifest属性，manifest建议的文件拓展名为“.appcache”

manifest文件：

CACHE MANIFEST：在次标签下列出的文件将在首次下载后进行缓存。（缓存）
NETWORK：在此标题下列出的文件需要与服务器链接，并且不会缓存。（不缓存）
FALLBACK：在此标题下列出的文件规定当也页面无法访问时的回退页面（比如404）

index.html文件
<!DOCTYPE html>
<html manifest='index.appcache'>
   <body>
       <h1>html5 wellcome</h1>
   </body>
</html>

//index.appcache文件
CACHE MANIFEST

//需要缓存的文件
CACHE:
index.html
index.js

//不需要缓存的文件
NETWORK:
style.css

//页面无法访问时，跳转页面
FALLBACK:
404.html

web workers

早期计算机浏览器是单核的，随着时代的发展计算机演变成了多核，这样如果还是使用单线程就会导致一些资源的浪费，所以HTML5的规范中提供了一个多线程的解决方案，这就是WEB-WORKER。

web workers 是运行在后台的JavaScript，独立于其他脚本，不会影响页面的性能。

浏览器支持

IE10及以上版本，Firefox，Chrome，Safari和Opera都支持WebWorker
一般会在使用前增加前置校验,检测当前浏览器版本是否支持

方法

postMessage()：向html页面传递数据。
terminate()：中止web workers，并释放浏览器/计算器资源。

事件

onmessage：监听通过postMessage方法发送过来的数据变化

// count.js文件
var contNum = 0;
function count(){
   
   postMessage(contNum);
   contNum++;
   setTimeout(count,1000);
   
}

contNum()


//index.js文件
var numDiv;
window.onload = function(){
   
   var work = new worker('count.js')
   work.onmessage = function(e){
   
       console.log(1)
   }
   work.terminate();
}


<html manifest='index.appcache'>
   <script src='index.js'></script>
   <body>
       <h1>html5 wellcome</h1>
   </body>
</html>

优缺点

优点

独立于主线程,不造成阻塞
非常适合处理高频、高延时的任务
可以内部做队列机制,做为延时任务的缓冲层

缺点

无法操作DOM,无法获取window, document等对象
遵守同源限制, Worker线程的脚本文件，必须于主线程同源。并且加载脚本文件是阻塞的

阮一峰的网络日志

HTML5服务器推送事件介绍

1、服务器推送事件介绍：服务器事件推送事件是一个HTML5规范中的一个组成部分，可以用来从服务器端实时推送数据。

2、传统的服务器推送数据技术：webSocket规范是HTML5中的一个重要组成部分，可以实现双向数据传输

3、HTTP协议轮询：定期向服务器发送请求，获取最新的服务器数据。对服务器负担中

数据存储

websql（关系型数据库）

websql基于sqlite数据库,目前websql只有部分浏览器拥有websql功能呢，因为websql目前不在HTML5规范中。

创建数据库

openDatabase('数据库名',版本号,'数据库描述'，数据库内存大小（默认m）)

创建表

db.transaction(tx => {
   
   tx.executeSql('create table if not exists student (id unique,name)')
})

添加数据

db.transaction(tx => {
   
   tx.executeSql('insert into student (id,name) value s(?,?),[1,"张三"]'),
   tx.executeSql('insert into student (id,name) value s(?,?),[2,"张三"]'),
})

indexedDB

是一种非关系型数据库，存储上线>5M

创建

var request = window.indexedDB.open('db',1);

var db;

request.onsuccess = function(e){
   
   db = request.result;
   console.log('数据库打开成功')
}

request.onupgradeneeded = function(e){
   
   db = event.tarfet.result;
   var objectStore;
   if(!db.objectStoreNames.contains('person')){
   
       objectStore = db.createObjectStore('person',{
   keyPath:'id'});
   }
   console.log('person created')
}

添加数据

db.transaction(['person'],'readwrite')
.objectStore('person')
.add({
   id:1,name:'hahah',age:23})

修改

db.transaction(['person'],'readwrite')
.objectStore('person')
.put({
   id:1,name:'hahah',age:23})

删除

db.transaction(['person'],'readwrite')
.objectStore('person')
.delete({
   1)

查询

var request = db.transaction(['person'],'readwrite')
.objectStore('person')
.get(1)

request.onsuccess = function(){
   
   console.log(request.result)
}

上面的操作有点复杂这里我们可以使用第三方库dexie

HTML5缓存机制