[html5] 学习笔记-应用缓存与Web workers
1、应用缓存
HTML5引入了应用缓存程序，这意味着Web应用可进行缓存，并可在没有因特网连接时访问。
应用缓存的优势：
1）离线浏览--用户可在应用离线时使用它们
2）速度--已缓存是从本地加载，加载得更快
3）减少服务器负载--浏览器将只从服务器下载更新过或更改过的资源
实现缓存：
如需启动应用程序缓存，需在文档的<html>标签中包含manifest属性，manifest文件建议的文件扩展名是 “.appcache”
manifest文件的属性：
1）CACHE MANIFEST --在此标题下列出的文件将在首次下载后缓存
2）NETWORK --在此标题下列出的文件需要与服务器的连接，且不会被缓存
3）FALLBACK --在此标题下列出的文件规定当页面无法访问时回退页面（比如404页面）
首先启动apache服务器，在apcache服务器的安装目录下，进入htdocs文件夹，将要执行的工程文件夹MyProject 放在这里。笔者安装apache服务器时，指定的servername是localhost，因此，在本地服务器执行html时，输入的Url为:locahost/MyProject/1.html。
html内容如下：
<!doctype html>
<html manifest="1.appcache">
<head lang="en">
<meta charset="utf-8">
<title></title>
<link href="style.css" rel="stylesheet" type="text/css">
<script src="1.js"></script>
</head>
<body>
<h1 class="h1">hello html5!</h1>
</body>
</html>
对应的1.appcache如下，表示缓存1.html，1.js，style.css这3个文件：
CACHE MANIFEST CACHE: 1.html 1.js style.css
在应用中，可以把不需要更换的数据进行缓存，只把需要更新的数据向服务器重新请求。
如果style.css这个文件不需要缓存，则对应的1.appcache为：
CACHE MANIFEST CACHE: 1.html 1.js NETWORK: style.css
2、Web Worker
Web Worker是运行在后台的javascript，独立于其他脚本，不会影响页面的性能。在创建新程序时，会存在一个主线程，来支持程序的运行；如果让这个主线程去做事，可能会很卡，很难响应用户的操作；因此，可以把这些事交给后台的脚本来做，最后返回给主线程。Web Worker底层也是使用多线程来实现的。
方法：
postMessage():用于向HTML页面传回一段消息
terminate():终止Web Worker，并释放浏览器/计算机资源
事件：
onmessage
例子：1.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="1.js"></script>
</head>
<body>
<div id="numDiv">0</div>
<button id="start">start</button>
<button id="stop">stop</button>
</body>
</html>
1.js:
var numDiv;
var work;
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("2.js");
work.onmessage = function (e) {
numDiv.innerHTML = e.data;
}
}
2.js:
var countNum =0;
function count(){
postMessage(countNum);
countNum++;
setTimeout(count,100);
}
count();
[html5] 学习笔记-应用缓存与Web workers的更多相关文章
- H5学习笔记-应用缓存，Web worker，服务器发送事件
↑亮了 应用缓存用法 <!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The co ...
- HTML5学习笔记（六）web worker
当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成.web worker 是运行在后台的 JavaScript,不会影响页面的性能,页面可以响应. 在创建 web worker ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
- HTML5 学习笔记 1
1.音频.视频 <!DOCTYPE HTML> <html> <body> <audio controls="controls"> ...
- HTML5学习笔记（一）：HTML简介
Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...
- CSS3秘笈第三版涵盖HTML5学习笔记6~8章
第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...
- CSS3秘笈第三版涵盖HTML5学习笔记1~5章
第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...
随机推荐
- express4.x中路由中间件和挂载路径的关系
express4.x 中一个路由中间件可以挂载到多个路由上,一个路由也可以绑定多个路由中间件,如: //多个路由匹配一个路由中间件 app.use(['/gre+t', '/hel{2}o'], gr ...
- 攻入Javascript，究竟什么是AJAX
什么是AJAX 时隔半年,当AJAX再一次出现在我脑海中时,从最初的模糊到现在的越来越明确.那么究竟什么是AJAX?它和form表单提交有什么区别? 如果你使用过AJAX和表单提交的话,想必会发现一件 ...
- (中等) POJ 2482 Stars in Your Window，静态二叉树。
Description Here comes the problem: Assume the sky is a flat plane. All the stars lie on it with a l ...
- MYSQL一次性能优化实战经历[转]
每次经历数据库性能调优,都是对性能优化的再次认识.对自己知识不足的有力验证,只有不断总结.学习才能少走弯路. 一.性能问题描述 应用端反应系统查询缓慢,长时间出不来结果.SQLServer数据库服务器 ...
- win7 下安装 ubuntu 16.04双系统
Ubuntu 每年发布两个版本,目前最新正式版版本也升到了 16.04.Ubuntu 16.04 开发代号为"Xenial Xerus",为第六个长期支持(LTS)版本,其主要特色 ...
- Set笔记
Set 继承自Collection的一个接口,特点是:无序,不可重复.注意啊!!只有Collection实现了迭代器!也就是说Map是没有实现迭代器的,需要keySet,values,entrySet ...
- IOS开发－UI学习－sqlite数据库的操作
IOS开发-UI学习-sqlite数据库的操作 sqlite是一个轻量级的数据库,它占用资源非常的低,在嵌入式设备中,可能只需要几百K的内存就够了,而且它的处理速度比Mysql.PostgreSQL这 ...
- Object修改链表
以前学习过链表的时候由于类型的接收不同,每次要重写链表 下面修改可用链表 class Link{ private class Node{ private Object data ; private N ...
- gridview里item是textView、Button单击事件相应，以及按下效果的取去除
1.响应事件的区别: gridview的item是textView的时候,gridview的itemonclick事件可以正常相应,但是换了Button后不能,原因如下: public class B ...
- Ubuntu14.04下搭建VPN服务
直接上步骤: 1.第一步需要安装PPTP,以用来提供VPN服务. sudo apt-get install pptpd 如果有问题的话比如提示找不到之类的,apt-get update 一下应该就可以 ...