html5應用程式快取與Web Workers的圖文詳解-H5教程-PHP中文網

首頁

web前端

H5教程

html5應用程式快取與Web Workers的圖文詳解

黄舟

Mar 31, 2017 am 11:44 AM

在html5當中引入了應用程式快取，這意味著web應用程式可以進行緩存，並且可以在沒有網路連線的時候進行存取。

離線瀏覽，使用者可以在離線的時候瀏覽已經載入並且快取好的資料

加快載入速度。 #減少伺服器負載。 manifest檔案的建議副檔名是:”.appcache”
manifest檔
manifest檔為我們提供了三種快取的方式：
version n.n ：version表示目前manifest的版本，當version發生變化的時候，此時當使用者再次載入的時候，會將CACHE標籤下列出的所有檔案重新下載一次。 - CACHE MANIFEST:在此標題下列出的文件，將在首次下載後進行快取。
- NETWORK: 在此標題下列出的檔案需要與伺服器的鏈接，且不會被快取。
ALL
BACK: 在此標題下列出的文件，規定存取快取失敗後，備用存取的資源，第一個是存取來源，第二個是替換文件*.html /offline.html，例如
404頁面

快取的應用程式

這裡我建立一個web工程，並且新建一個html檔：index.html

<!DOCTYPE html><html manifest="index.appcache">
  <head>
    <title>index.html</title>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
  </head> 
  <body>
    <h1 id="This-nbsp-is-nbsp-my-nbsp-HTML-nbsp-page">This is my HTML page</h1>
  </body></html>

style.css

@CHARSET "UTF-8";h1 {    color: aqua;}

可以看到這裡，我的頁面很簡單，並且

引用
了一個style.css樣式檔。並且在

標籤當中，指定了快取檔案index.appcache.
index.appcache 內容如下：

CACHE MANIFEST#version 1.0CACHE:index.htmlcss/style.css

可以看到，這裡我們使用CACHE類型的緩存，表示需要快取index.html和css/style.css這兩個檔案。此時開啟伺服器，瀏覽該網頁，在關閉伺服器，會發現該網頁同樣可以訪問，此時按下F12，開啟開發者選項，會發現有以下快取：

同時也可以使用NETWORK類型的緩存，來表示那些檔案是需要連網下載的，這裡我將css/style.css檔案寫入到NETWORK類型的快取當中。

CACHE MANIFEST#version 1.0CACHE:index.htmlNETWORK:css/style.css

首先需要手動清除一下先前快取的記錄。然後開啟伺服器，瀏覽http://localhost:8080/html5cache/index.html，此時顯示效果如下：

可以看到此時只是快取了html頁面，並沒有快取css/ style.css文件，此時關閉伺服器，再次刷新該頁面，效果如下：

可以看到此時，就只是加載了html頁面，並麼有加載css文件，所以h1標籤的字體是預設的。更新
快取

如果需要更新緩存，例如這裡我更改了html中的文字，此時再次訪問localhost:8080/html5cache/index.html 的時候，是不會載入最新的頁面文字的，這是因為瀏覽器預設會到快取中查找，如果快取中有，則直接從快取中取出，因此我們需要更新快取檔案”index.appcache”中的version即可，如下：

CACHE MANIFEST#version 1.1CACHE:css/style.cssindex.htmlNETWORK:FALLBACK:

這裡，我將version更改了1.1，此時再次訪問該頁面的時候，是會到服務其下載最新的頁面，說到這裡，緩存的缺點就出來了，就是即使我一個頁面中只更新一行文字，但是當我更改了”index.appcache”文件中的version值之後，就會重新將CACHE中定義的所有內容，重新下載一次。

使用js自動更新快取

另外，我們也可以使用applicationcache
物件 html5應用程式快取與Web Workers的圖文詳解來自動更新快取。如下：

<script type="text/javascript">
         //添加页面加载函数
        window.addEventListener(&#39;load&#39;, function(e) {

          //为applicationCache对象添加updateready事件 
          window.applicationCache.addEventListener(&#39;updateready&#39;, function(e) {
            //表示manifest中列举的文件已经重新下载并更新成功
            if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {              
            //使用swapCache()方法更新到应用程序中
              window.applicationCache.swapCache();              
              if (confirm(&#39;A new version of this site is available. Load it?&#39;)) {                
              //重新加载当前页面
                window.location.reload();

              }

            } else {                //manifest文件没有变化
                console.log("manifest 没有改变");
            }

          }, false);

        }, false);    </script>

applicationcache是 html5應用程式快取與Web Workers的圖文詳解

window物件
的直接子對象，該物件的事件清單如下：

##status 傳回快取的狀態

可选值	匹配常量	描述
0	appCache.UNCACHED	未缓存
1	appCache.IDLE	闲置
2	appCache.CHECKING	检查中
3	appCache.DOWNLOADING	下载中
4	appCache.UPDATEREADY	已更新
5	appCache.OBSOLETE	失效

方法

方法名	匹配常量
update()	发起应用程序缓存下载进程
abort()	取消正在进行的缓存下载
swapcache()	切换成本地最新的缓存环境

web workers

web workers是运行在后台的脚本，独立于其他的脚本，不会影响页面的性能。类似于android开发中的handler。将繁重耗时的计算放到web worker中来实现，然后将处理的结果返回给主UI线程来显示。

web workers方法

postMessage() :用于向html页面回传一段消息。
terminate() :终止web workers，并且释放计算机资源。

web workers简单实现

下面使用web workers简单实现一数字更新的demo：
新建一个web工程，创建index.html

<!DOCTYPE html><html><head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="index.js"></script></head><body>
    <p id="nump">0</p></body></html>

这里在index.html文件当中引入了index.js文件。
index.js

var nump;
window.onload = function(){
    nump = document.getElementById("nump");    var work = new Worker("count.js");
    work.onmessage = function(e) {
        //alert(e.data);
        nump.innerHTML = e.data;
    };
};

可以看到，这里讲更新数据的具体操作，使用Worker来更新，在worker当中加载了count.js文件来做一些耗时，复杂的计算。然后使用worker的onmessage回调方法，将count.js返回的结果重新显示给nump。
count.js

var countNum = 0;function count(){
    postMessage(countNum);//通过postMessage方法将计算结果回传给调用者
    countNum++;
    setTimeout(count,1000);
}
count();

count.js文件比较简单，每隔一秒更新countNum的值，然后回传给调用者，也就是这里的index.js

此时运行效果如下：
html5應用程式快取與Web Workers的圖文詳解

下面添加一个开始停止的控制按钮：

 <button id="start">start</button>
 <button id="stop">stop</button>

index.js

var nump;var work;
window.onload = function(){
    nump = document.getElementById("nump");    
    var start = document.getElementById("start");    
    var stop = document.getElementById("stop");
    start.onclick = startWorker;
    stop.onclick = stopWorker;

};function startWorker() {
    if (work) { //如果work存在，则直接返回
        return;
    } else {
        work = new Worker("count.js");
        work.onmessage = function(e) {
            nump.innerHTML = e.data;
        };
    }
}function stopWorker() {
    if (work) {//如果worker存在，则终止并且为其重新赋值
        work.terminate();
        work = null;
    }
}

此时运行效果如下：
html5應用程式快取與Web Workers的圖文詳解

另外我们还可以通过navaigator对象的onLine属性来判断当前浏览器是否在线，该属性属于只读属性，会返回boolean类型的值。

if(window.navigator.onLine) {    //在线} else {    //离线}

以上是html5應用程式快取與Web Workers的圖文詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

H5：如何增強網絡上的用戶體驗Apr 19, 2025 am 12:08 AM

H5通過多媒體支持、離線存儲和性能優化提升網頁用戶體驗。 1）多媒體支持：H5的和元素簡化開發，提升用戶體驗。 2）離線存儲：WebStorage和IndexedDB允許離線使用，提升體驗。 3）性能優化：WebWorkers和元素優化性能，減少帶寬消耗。

解構H5代碼：標籤，元素和屬性Apr 18, 2025 am 12:06 AM

HTML5代碼由標籤、元素和屬性組成：1.標籤定義內容類型，用尖括號包圍，如。 2.元素由開始標籤、內容和結束標籤組成，如內容。 3.屬性在開始標籤中定義鍵值對，增強功能，如。這些是構建網頁結構的基本單位。

了解H5代碼：HTML5的基本原理Apr 17, 2025 am 12:08 AM

HTML5是構建現代網頁的關鍵技術，提供了許多新元素和功能。 1.HTML5引入了語義化元素如、、等，增強了網頁結構和SEO。 2.支持多媒體元素和，無需插件即可嵌入媒體。 3.表單增強了新輸入類型和驗證屬性，簡化了驗證過程。 4.提供了離線和本地存儲功能，提升了網頁性能和用戶體驗。

H5代碼：Web開發人員的最佳實踐Apr 16, 2025 am 12:14 AM

H5代碼的最佳實踐包括：1.使用正確的DOCTYPE聲明和字符編碼；2.採用語義化標籤；3.減少HTTP請求；4.使用異步加載；5.優化圖像。這些實踐能提升網頁的效率、可維護性和用戶體驗。

H5：網絡標準和技術的發展Apr 15, 2025 am 12:12 AM

Web标准和技术从HTML4、CSS2和简单的JavaScript演变至今，经历了显著的发展。1)HTML5引入了Canvas、WebStorage等API，增强了Web应用的复杂性和互动性。2)CSS3增加了动画和过渡功能，使页面效果更加丰富。3)JavaScript通过Node.js和ES6的现代化语法，如箭头函数和类，提升了开发效率和代码可读性，这些变化推动了Web应用的性能优化和最佳实践的发展。

H5是HTML5的速記嗎？探索細節Apr 14, 2025 am 12:05 AM

H5不僅僅是HTML5的簡稱，它代表了一個更廣泛的現代網頁開發技術生態：1.H5包括HTML5、CSS3、JavaScript及相關API和技術；2.它提供更豐富、互動、流暢的用戶體驗，能在多設備上無縫運行；3.使用H5技術棧可以創建響應式網頁和復雜交互功能。

H5和HTML5：網絡開發中常用的術語Apr 13, 2025 am 12:01 AM

H5與HTML5指的是同一個東西，即HTML5。 HTML5是HTML的第五個版本，帶來了語義化標籤、多媒體支持、畫布與圖形、離線存儲與本地存儲等新功能，提升了網頁的表現力和交互性。

H5指的是什麼？探索上下文Apr 12, 2025 am 12:03 AM

H5referstoHTML5,apivotaltechnologyinwebdevelopment.1)HTML5introducesnewelementsandAPIsforrich,dynamicwebapplications.2)Itsupportsmultimediawithoutplugins,enhancinguserexperienceacrossdevices.3)SemanticelementsimprovecontentstructureandSEO.4)H5'srespo

See all articles