HTML5——应用缓存与Web Workers

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

原创最新推荐文章于 2021-06-04 00:29:37 发布 · 729 阅读

0 ·

CC 4.0 BY-SA版权

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

85 篇文章

订阅专栏

HTML5

20 篇文章

订阅专栏

本文介绍了HTML5的应用程序缓存特性，使Web应用能够离线访问并提高加载速度，同时减轻服务器负载。此外，还探讨了Web Workers的工作原理及其实现方式，包括如何通过后台JavaScript进程提升页面性能。

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();