zoukankan      html  css  js  c++  java
  • HTML5应用缓存与Web Workers

    1.什么是应用程序缓存
         HTML5引入了应用程序缓存,这意味着web应用可进行缓存,并可在没有因特网链接时进行访问。
    2.应用缓存的优势
         离线浏览   用户可在应用离线时使用它们
         速度     已缓存资源加载得更快
         减少服务器负载    浏览器将只从服务器下载更新过或更改过的资源
    3.实现缓存
         如需启用应用程序缓存,请在文档的<html>标签中包含manifest属性
         manifest文件的建议的文件扩展名是:“.appcache”
    4.Manifest文件:
         CACHE MANIFEST   在此标题下列出的文件将在首次下载后进行缓存
         NETWORK     在此标题下列出的文件需要与服务器的链接,且不会被缓存
         FALLBACK     在此标题下列出的文件规定当页面无法访问时的回退页面(比如404页面)
     
    <!DOCTYPE html>
    <html manifest="index.appcache">
    <head lang="en">
         <meta charset="UTF-8">
         <title></title>
         <script src="index.js"></script>
    </head>
    <body>
         <h1 class="h1">hello world!</h1>
    </body>
    </html>
     
    需要在 .appcache文件里面写
    CACHE MANIFEST
     
    CACHE:
    index.html
    style.css
    index.js
     
    Web Worker
    1.什么是Web Worker
         web worker 是运行在后台的JavaScript, 独立于其他脚本 , 不会影响页面的性能
    2.方法
         postMessage() 它用于向HTML页面传回一段消息
         terminate() 终止 web worker , 并释放浏览器/计算机资源
    3.事件
         onmessage
     
    <!doctype html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>数字累加</title>
        <script src="app.js"></script>
    </head>
    <body>
        <div id="numDiv">0</div>
        <button id="start">start</button>
        <button id="stop">stop</button>
    </body>
    </html>
     
    //app.js
    var numDiv;
    var work=null;
     
    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("count.js");
        work.onmessage=function(e){
            numDiv.innerHTML= e.data;
        }
    }
     
    //count.js
    var countNum=0;
    function count(){
        postMessage(countNum);
        countNum++;
        setTimeout(count,1000);
    }
    count();
     
     
  • 相关阅读:
    mac 配置环境变量
    c语言中的0UL或1UL是什么意思
    javascript类型系统——正则表达式RegExp类型
    javascript运算符——算术运算符
    javascript类型系统——Number数字类型
    javascript类型系统——包装对象
    javascript基础语法——表达式
    valueOf()方法
    toString()方法
    javascript基础语法——变量和标识符
  • 原文地址:https://www.cnblogs.com/baixuemin/p/6495076.html
Copyright © 2011-2022 走看看