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的更多相关文章

  1. H5学习笔记-应用缓存，Web worker，服务器发送事件

    ↑亮了 应用缓存用法 <!DOCTYPE HTML> <html manifest="demo.appcache"> <body> The co ...

  2. HTML5学习笔记（六）web worker

    当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成.web worker 是运行在后台的 JavaScript,不会影响页面的性能,页面可以响应. 在创建 web worker ...

  3. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  4. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  6. HTML5 学习笔记 1

    1.音频.视频 <!DOCTYPE HTML> <html> <body> <audio controls="controls"> ...

  7. HTML5学习笔记（一）：HTML简介

    Web前端涵盖的内容较多且杂,主要由3个部分组成:HTML标记语言.CSS样式语言和JavaScript脚本语言组成,而下面我们将先学习最新的标记语言HTML5. <!DOCTYPE>标记 ...

  8. CSS3秘笈第三版涵盖HTML5学习笔记6~8章

    第二部分----CSS实用技术 第6章,文本格式化 指定备用字体: font-family:Arial,Helvetica,sans-serif; 当访问者没有安装第一种字体时,浏览器会在列表中继续往 ...

  9. CSS3秘笈第三版涵盖HTML5学习笔记1~5章

    第一部分----CSS基础知识 第1章,CSS需要的HTML HTML越简单,对搜索引擎越友好 div是块级元素,span是行内元素 <section>标签包含一组相关的内容,就像一本书中 ...

随机推荐

  1. php 依赖注入容器

    原文: http://blog.csdn.net/realghost/article/details/35212285 https://my.oschina.net/cxz001/blog/53316 ...

  2. android测试之——mokeyrunner上（二）

    以下是本人原创,如若转载和使用请注明转载地址.本博客信息切勿用于商业,可以个人使用,若喜欢我的博客,请关注我,谢谢!博客地址 感谢您支持我的博客,我的动力是您的支持和关注!如若转载和使用请注明转载地址 ...

  3. Java对文件的16进制读取和操作

    大家可以参考一下源代码的相关部分注释,然后写出自己的16进制处理程序.有几个重点地方: 16进制字符串->10进制数 int input = Integer.parseInt("Str ...

  4. ZOJ 3537 Cake

    区间DP. 首先求凸包判断是否为凸多边形. 如果是凸多边形:假设现在要切割连续的一段点,最外面两个一定是要切一刀的,内部怎么切达到最优解就是求子区间最优解,因此可以区间DP. #include< ...

  5. java.lang.UnsupportedClassVersionError: com/T : Unsupported major.minor version问题解决

    编译的时候jdk版本为1.8 2.运行的时候jdk版本为1.7 解决办法:将编译的jdk版本降为1.7,问题解决

  6. Oracle行转列的3种方法

    测试表为A3 , 有5个字段:ID1, ID2, ID3, ID4, ID5 测试数据如下: ID1 ID2 ID3 ID4 ID5 1 2 3 4 5 11 22 33 44 55 111 222 ...

  7. iOS开源库--最全的整理 分类： ios相关 2015-04-08 09:20 486人阅读 评论(0) 收藏

    youtube下载神器:https://github.com/rg3/youtube-dl 我擦咧 vim插件:https://github.com/Valloric/YouCompleteMe vi ...

  8. Struts2---Result（传统Web应用程序与Ajax应用程序的异同）

    看了很久的struts,在视频和书的引导下,慢慢明白了点,推荐:<struts 2 in action>和马士兵的视频 今天看结果这块时,由于还没有学过ajax等,不太明白,但是必须弄懂嗒 ...

  9. java8 泛型声明 The diamond operator ("<>") should be used

    The diamond operator ("<>") should be used Java 7 introduced the diamond operator (& ...

  10. Prism之使用EventAggregation进行模块间通信

    在开发Silverlight程序的时候,经常需要在不同的组件间进行通信.比如点击一个button,可能就需要改变另一个控件的内容.比较直接的办法是使用事件,当然使用MVVM的时候也可以使用comman ...