HTML5——应用缓存与Web Workers

最新推荐文章于 2021-06-04 00:29:37 发布

唐小狼

最新推荐文章于 2021-06-04 00:29:37 发布

阅读量608

点赞数

分类专栏： HTML5 前端工程师学习笔记

本文链接：https://blog.csdn.net/tangxiaolang101/article/details/51404329

版权

前端工程师学习笔记同时被 2 个专栏收录

85 篇文章 0 订阅

订阅专栏

HTML5

20 篇文章 0 订阅

订阅专栏

1、应用缓存

（1）什么是应用程序缓存：
HTML5引入了应用程序缓存，这意味着web应用可进行缓存，并可在没有因特网链接时进行访问
（2）应用缓存的优势：
a:离线浏览-用户可在应用离线时使用它们
b:速度-已缓存资源加载得更快
c:减少服务器负载-浏览器将只从服务器下载更新过或更改过的资源
（3）实现缓存：
如需启用应用程序缓存，请在文档的<html>标签中包含manifest属性。
manifest文件的建议的文件扩展名是：“.appcache”
(4)Manifest文件：
a:CACHE MANIFEST-在此标题下列出的文件将在首次下载后进行缓存
b:NETWORK-在此标题下列出的文件需要与服务器的链接，且不会被缓存
c:FALLBACK-在此标题下列出的文件规定当页面无法访问时的回退页面（比如404页面）

 
 
  
  
   
   <!DOCTYPE html>
  
  
  
  
   
   <html manifest="index.appcache">
  
  
  
  
   
   <head lang="en">
  
  
  
  
   
       <meta charset="UTF-8">
  
  
  
  
   
       <title>appCache</title>
  
  
  
  
   
       <link rel="stylesheet" href="style.css">
  
  
  
  
   
   </head>
  
  
  
  
   
   <body>
  
  
  
  
   
       <h1 class="h1">Hello HTML5!</h1>
  
  
  
  
   
   </body>
  
  
  
  
   
   </html>

style.css

 
 
  
  
   
   .h1{
  
  
  
  
   
       background-color: yellow;
  
  
  
  
   
   }

index.appcache

 
 
  
  
   
   CACHE MANIFEST
  
  
  
  
   
   CACHE:
  
  
  
  
   
   index.html
  
  
  
  
   
   index.js
  
  
  
  
   
   style.css

2、Web Workers

（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>webWorker</title>
  
  
  
  
   
       <script src="index.js"></script>
  
  
  
  
   
   </head>
  
  
  
  
   
   <body>
  
  
  
  
   
       <div id="numDiv">0</div>
  
  
  
  
   
       <button id="start">start</button>
  
  
  
  
   
       <button id="stop">stop</button>
  
  
  
  
   
   </body>
  
  
  
  
   
   </html>

index.js

 
 
  
  
   
   var numDiv;
  
  
  
  
   
   var work = null;
  
  
  
  
   
   var index = 0;
  
  
  
  
   
   window.onload = function () {
  
  
  
  
   
       numDiv = document.getElementById("numDiv");
  
  
  
  
   
       document.getElementById("start").onclick = startWorker;
  
  
  
  
   
       document.getElementById("stop").onclick = function(){
  
  
  
  
   
           if(work){
  
  
  
  
   
               index = numDiv.innerHTML;
  
  
  
  
   
               work.terminate();          
  
  
  
  
   
               work = null;
  
  
  
  
   
           }
  
  
  
  
   
    
  
  
  
  
   
    
  
  
  
  
   
   }
  
  
  
  
   
   }
  
  
  
  
   
   function startWorker(){
  
  
  
  
   
       if(work){
  
  
  
  
   
           return;
  
  
  
  
   
       }
  
  
  
  
   
       work = new Worker("count.js");
  
  
  
  
   
       work.onmessage = function (e) {
  
  
  
  
   
           numDiv.innerHTML =parseInt(index)+parseInt(e.data);
  
  
  
  
   
       }
  
  
  
  
   
   }

count.js

 
 
  
  
   
   var countNum=0;
  
  
  
  
   
   function count(){
  
  
  
  
   
       postMessage(countNum);
  
  
  
  
   
       countNum++;
  
  
  
  
   
       setTimeout(count,1000);
  
  
  
  
   
   }
  
  
  
  
   
    
  
  
  
  
   
   count();