了解HTML5和“她”的 API (三)
Web Workers(后台线程)
JavaScript是单线程的，较长的javascript运算会阻塞UI线程。
web worker 是运行在后台的 JavaScript，不会影响页面的性能。
在web worker中执行的脚本不能访问 window对象 document对象 parent对象。
web worker 一般用于更耗费 CPU 资源的任务。
检测 Web Worker 支持
//检测浏览器是否支持Web Worker
if(typeof(Worker) !== "undefined"){
//支持Web Worker
console.log('支持Web Worker')
}else{
//不支持
console.log('不支持Web Worker')
}
创建 web worker
var worker = new Worker('demoworkers.js');
worker.onmessage = function (e){
console.log(e.data);
};
//demoworkers.js
!function(){
var i = 0;
(function(){
postMessage(++i);
setTimeout(arguments.callee,1000);
})();
}();
创建好web worker后，一般结合postMessage API来发送和接收消息。
终止 Web Worker
worker.terminate();
Web Storage(本地存储)
以前，在客户端存储数据是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
Web Storage API提供了两种在客户端存储数据的方法
localStorage - 存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用
sessionStorage - 针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
检测浏览是否支持Web Storage
//localStorage
if(window.localStorage){
//支持
}else{
//不支持
}
//sessionStorage
if(window.sessionStorage ){
//支持
}else{
//不支持
}
设置和获取数据
//设置一个值
localStorage.setItem('oneKey','oneValue');
localStorage.oneKey = 'oneValue'; sessionStorage.setItem('oneKey','oneValue');
sessionStorage.oneKey = 'oneValue'; //获取一个值
localStorage.getItem('oneKey');
localStorage.oneKey; sessionStorage.getItem('oneKey');
sessionStorage.oneKey;
Storage 属性和方法
length //storage对象中存储的键/值对的数量
key(index) //获取指定位置的对象
getItem(key) //获取指定键的值 如果没有则返回null
setItem(key,value) //设置一个值到指定键的位置，如果已经存在则替换
removeItem(key) //删除指定键的值
clear() //清除storage对象中存储的所有数据
在一些复杂的情况下，多个网页、标签页或者worker都需要访问存储的数据，应用程序会在存储数据被修改后触发一系列操作。在这种情况下，web storage API提供了一套事件通知机制。
window.addEventListener('storage',displayStorageEvent,true);
function displayStorageEvent(e){
//e.key 更新或删除的键
//e.newValue 更新前键对应的值
//e.oldValue 更新后键对应的值
//e.url storage事件发生的源
//e.storageArea 指向值发生改变的localStorage(或sessionStorage)的一个引用
}
Application Cache(应用缓存)
应用程序缓存意味着web应用可进行缓存，并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势：
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
检测浏览器是否支持应用缓存
if(window.applicationCache){
//支持
}else{
//不支持
}
启用应用程序缓存需在文档的 <html> 标签中包含 manifest 属性
<html manifest="offline.appcache">
manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"，必须在 web 服务器上进行配置。
如果使用的是Apache 服务器，需要修改一下.htaccess 文件，追加一行代码：
AddType text/cache-manifest .manifest
这样就保证了.manifest 文件拥有正确的MIME 类型，即text/cache-manifest。
在.htaccess 文件中还可以加入以下代码：
<Files offline.manifest>
ExpiresActive On
ExpiresDefault "access"
</Files>
添加上面这几行代码，可以阻止浏览器缓存缓存文件。
因为offline.manifest是一个静态文件，浏览器默认就会缓存offline.manifest文件。
所以上面这几行代码就是让服务器告诉浏览器不要缓存。
Manifest 文件
manifest 文件是简单的文本文件，它告知浏览器被缓存的内容（以及不缓存的内容）。
manifest 文件可分为三个部分：
CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
一个参考例子：
CACHE MANIFEST
# 2013-08-01 v1.0.0
CACHE:
/main.css
/main.js
/logo.gif NETWORK:
* FALLBACK:
//offline.html /* ------------------------------ */
manifest 文件必须以CACHE MANIFEST 开头
第二行是一句注释，注明了manifest文件的日期、版本号。 CACHE部分罗列了所有离线使用所需的文件。
这些文件的路径都是相对offline.manifest而言的，使用绝对路径也是可以的。 NETWORK部分罗列了所有不需要被缓存的、离线时是不可用的文件。
可以使用星号来指示所有其他资源/文件都需要因特网连接 FALLBACK部分使用/字符定义了一个URL模板。
它的作用是访问每个页面时都会问“缓存中有这个页面吗？”
如果有则显示缓存页面，如果没有则显示指定的offline.html文件 应用的缓存会在其 manifest 文件更改时被更新。
如果更新了一幅图片，或者一个JavaScript函数，这些改变都不会被重新缓存。
更新注释行中的日期和版本号是一种使浏览器重新缓存文件的办法。 /* ------------------------------ */
离线行为
if(navigator.onLine){
//在线
console.log('在线')
}else{
//离线
console.log('离线')
}
window.addEventListener('online',function(e){
console.log('在线');
},true);
window.addEventListener('offline',function(e){
console.log('离线');
},true);
了解HTML5和“她”的 API (三)的更多相关文章
- HTML5之本地文件系统API - File System API
HTML5之本地文件系统API - File System API 新的HTML5标准给我们带来了大量的新特性和惊喜,例如,画图的画布Canvas,多媒体的audio和video等等.除了上面我们提到 ...
- HTML5语音合成Speech Synthesis API简介
by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=5865本文可全文转载,但需得到原作者书面许可,同时保留原作者和出处,摘要引流则随意 ...
- html5获取地理位置信息API
html5获取地理位置信息API 在HTML5中,可以看下如何使用Geolocation API来获得用户的地理位置信息,如果该浏览器支持的话,且设备具有定位功能,就能够直接使用这组API来获取当前位 ...
- HTML5关于上传API的一些使用（上）
HTML5提供了很多有用的API,其中就包括上传的API,XMLHttpRequest2.0,在HTML5时代之前,需要进行二进制的上传一般都会才用flash的方案,但是当XMLHttpRequest ...
- 用JSON-server模拟REST API(三) 进阶使用
用JSON-server模拟REST API(三) 进阶使用 前面演示了如何安装并运行 json server , 和使用第三方库真实化模拟数据 , 下面将展开更多的配置项和数据操作. 目录: 配置项 ...
- HTML5 postMessage 和 onmessage API 具体应用
HTML5 postMessage 和 onmessage API 具体应用 随着 HTML5 的发展.了解并熟悉 HTML5 的 API 接口是很重要的.postMessage(send) 和 on ...
- Express4.x API (三)：Response (译)
Express4.x API 译文 系列文章 Express4.x API (一):application (译) -- 完成 Express4.x API (二):request (译) -- 完成 ...
- 使用HTML5的两个api，前端js完成图片压缩
主要用了两个html5的 API,一个file,一个canvas,压缩主要使用cnavas做的,file是读取文件,之后把压缩好的照片放入内存,最后内存转入表单下img.src,随着表单提交. 照片是 ...
- HTML5 调用百度地图API地理定位
<!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...
随机推荐
- poj1243（经典dp）
题目链接:http://poj.org/problem?id=1243 题意:让你猜一个物品的价格,猜低了或者猜高了都会提示你.G,L,表示你有G次机会猜一个数,如果猜错了,G会减少1次,如果你的错误 ...
- MySQL 全角转换为半角
序言: 用户注冊时候,录入了全角手机号码,所以导致短信系统依据手机字段发送短信失败.如今问题来了,怎样把全角手机号码变成半角手机号码? 1.手机号码全角转换成半角先查询出来全角半角都存在 ...
- 在maven仓库中查找jar
findmaven.net是一个查找Jar和查找Maven的Maven仓库搜索引擎,它能够依据Java开发人员提供的Class名或者Jar名找到包括它的Jar.同一时候提供Jar的Maven仓库链接. ...
- POJ3190 Stall Reservations 【贪婪】
Stall Reservations Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 3106 Accepted: 111 ...
- 详细分析Java中断机制（转）
1. 引言 当我们点击某个杀毒软件的取消按钮来停止查杀病毒时,当我们在控制台敲入quit命令以结束某个后台服务时……都需要通过一个线程去取消另一个线程正在执行的任务.Java没有提供一种安全直接的方法 ...
- 在Eclipse在使用JUnit4单元测试（0基础知识）
自这篇文章: http://www.devx.com/Java/Article/31983/0/page/1 我们在编写大型程序的时候,须要写成千上万个方法或函数.这些函数的功能可能非常强大,但我们在 ...
- 每天一点儿JAVA-向量的操作
package java_prac2; import java.util.*; /** * <p>Title: 矢量操作</p> * <p>Description: ...
- 垂死或涅槃重生 -- Delphi XE5 我们将宣布感情的回归
Delphi 在很大程度上是一个被遗忘我的工具. 无论是在使用RapidSql , 我还没有收到Embarcadero 本公司发行参与邀请Delphi XE5该公告将. 可能有人会问,为什么Embar ...
- GRUB2配置详解：默认启动项，超时时间，隐藏引导菜单，配置文件详解，图形化配置
配置文件详解: /etc/default/grub # 设定默认启动项,推荐使用数字 GRUB_DEFAULT=0 # 注释掉下面这行将会显示引导菜单 #GRUB_HIDDEN_TIMEOUT=0 # ...
- [Windows Phone] 实作不同的地图显示模式
原文:[Windows Phone] 实作不同的地图显示模式 前言 本文章主要示范如何让地图有不同的模式产生,例如平面图.地形图.鸟瞰图.鸟瞰图含街道等. 这部分主要是调整 Map.Cartograp ...