[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>标签包含一组相关的内容,就像一本书中 ...
随机推荐
- (一)phoneGap之环境搭建教程及其example分析
phoneGap之环境搭建教程及其example分析 一.环境搭建 与普通的开发android应用一样,phoneGap也同于原生android应用一样,环境相同,只是有部分不同,下面就我做理解,进行 ...
- 基于Keepalvied的Mysql主主漂移(切换)
Keepalived实现原理:Keepalived详细介绍简介 实验环境 Master1.Amoeba--IP:192.168.1.5 Master2---IP:192.168.1.10 同时安装ke ...
- OPENCV形态学算法-2
一.漫水填充算法 该算法通过一个指定的种子点,来分析整张图片上的像素,并设置像素差异阈值,在阈值类的点,最后变成相同的颜色.该方法通过上下限和连通方式来达到不同的连通效果. 该方法常用与标记和分离图像 ...
- iOS推送的众多坑
新来的一家公司,昨天和同事解决推送问题(工程里有集成百度推送和环信即时通讯),信誓旦旦的声称:" app在前台和后台运行时,推送触发的是didReceiveRemoteNotificatio ...
- tp框架实现ajax注册验证
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- iOS开发——浅谈构架与用户体验
工作不是千篇一律的重复,从中寻找乐趣才是我们应该做的. 作为一名码农,做过几个项目,每次做项目的时候都会自己构思,如果完全是我自己设计,会怎么去设计?心里一直没有满意的答案,不管怎么布局,好像都感觉差 ...
- Practice Round China New Grad Test 2014 报告
今天有Google of Greater China Test for New Grads of 2014的练习赛,主要是为了过几天的校园招聘测试做练习用的,帮助熟悉平台,题目嘛,个人觉得除了A题外, ...
- EALayout 实践
步骤: 1. 导入framework 1.0. 下载网址 1.1. 修改Build Setting -> other linker flags,添加 “-ObjC”(连接实现文件)和" ...
- 为什么32位操作系统最大支持4GB内存
因为32位操作系统的地址空间为32位,地址总数为2^32,每个地址对应1Byte内存空间,这样,32位操作系统管理的最大内存空间限制为2^32Byte=4*1024*1024*1024Byte,即4G ...
- Python计算一个项目中含有的代码行数
最近想要知道以前做过的project有多少行代码,因为文件太多,直接手工数效率太低,于是编写一个python程序用来计算一个project有多少代码行. 首先,在一个项目中,有很多子文件夹,子文件夹中 ...