suchen

Heim >Web-Frontend >H5-Tutorial >Detaillierte Grafik- und Texterklärung zum HTML5-Anwendungscaching und zu Web Workern

Detaillierte Grafik- und Texterklärung zum HTML5-Anwendungscaching und zu Web Workern

黄舟
黄舟Original
2017-03-31 11:44:532205Durchsuche


Eingeführt in der html5-Anwendung Caching bedeutet, dass Webanwendungen zwischengespeichert werden können und auf sie zugegriffen werden kann, wenn keine Netzwerkverbindung besteht

Vorteile des Anwendungs-Caching

  • Offline Beim Surfen können Benutzer geladene und zwischengespeicherte Daten durchsuchen, während sie offline sind

  • Beschleunigen Sie die Ladegeschwindigkeit

  • Reduzieren Sie die Serverlast

Caching implementieren

Wenn Sie Anwendungscaching aktivieren, müssen Sie das Manifest-Attribut in das -Tag einschließen. Die empfohlene Erweiterung für die Manifestdatei ist :.appcache

Manifestdatei

Manifestdatei bietet uns drei Caching-Methoden:
Version n.n: Version stellt die aktuelle Manifestversion dar. Wenn sich die Version ändert und der Benutzer sie erneut lädt, werden alle Dateien im CACHE aufgelistet Tag wird erneut heruntergeladen
. - CACHE MANIFEST: Die unter dieser Überschrift aufgeführten Dateien werden nach dem ersten Download zwischengespeichert.
- NETZWERK: Die unter dieser Überschrift aufgeführten Dateien erfordern eine Verbindung zum Server und werden nicht zwischengespeichert.
- FALLBACK: Die unter diesem Titel aufgeführten Dateien geben die Ressourcen an, auf die zugegriffen werden soll, nachdem der Zugriffscache fehlgeschlagen ist. Die erste ist die Zugriffsquelle und die zweite ist die Ersatzdatei *.html /offline .html, z. B. 404-Seite.

Zwischengespeicherte Anwendung

Hier erstelle ich ein Webprojekt und erstelle eine neue HTML-Datei:
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>This is my HTML page</h1>
  </body></html>

style.css

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

Wie Sie hier sehen können, ist meine Seite sehr einfach und referenziert eine style.css-Stildatei. Und im -Tag wird die Cache-Datei index.appcache angegeben. Der Inhalt von
index.appcache lautet wie folgt: 

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

Wie Sie sehen können, verwenden wir hier den Typ CACHE Cache, was bedeutet, dass der Index .html- und css/style.css-Dateien zwischengespeichert werden muss. Öffnen Sie zu diesem Zeitpunkt den Server und durchsuchen Sie die Webseite. Nachdem Sie den Server geschlossen haben, werden Sie feststellen, dass auf die Webseite zugegriffen werden kann. Drücken Sie zu diesem Zeitpunkt F12, öffnen Sie die Entwickleroptionen und Sie finden den folgenden Cache:
Detaillierte Grafik- und Texterklärung zum HTML5-Anwendungscaching und zu Web Workern

Gleichzeitig können Sie den Cache vom Typ NETWORK auch verwenden, um anzugeben, welche Dateien online heruntergeladen werden müssen. Hier schreibe ich die Datei css/style.css in den Cache vom Typ NETWORK. 

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

Zuerst müssen Sie die zuvor zwischengespeicherten Datensätze manuell löschen. Öffnen Sie dann den Server und durchsuchen Sie http://localhost:8080/html5cache/index.html. Der Anzeigeeffekt ist wie folgt:
Detaillierte Grafik- und Texterklärung zum HTML5-Anwendungscaching und zu Web Workern
Sie können sehen, dass derzeit nur die HTML-Seite zwischengespeichert ist. und die Datei style.css wird nicht zwischengespeichert. Schließen Sie den Server zu diesem Zeitpunkt und aktualisieren Sie die Seite erneut. Der Effekt ist wie folgt:
Detaillierte Grafik- und Texterklärung zum HTML5-Anwendungscaching und zu Web Workern
Sie können das zu diesem Zeitpunkt nur sehen Die HTML-Seite wird geladen, es wird keine CSS-Datei geladen, daher ist die Schriftart des h1-Tags die Standardschrift.

UpdateCache

Wenn der Cache beispielsweise aktualisiert werden muss, habe ich hier den Text im HTML geändert, wenn ich localhost:8080/html5cache/index besuche .html erneut wird der neueste Seitentext nicht geladen. Dies liegt daran, dass der Browser standardmäßig im Cache sucht. Daher müssen wir die Version aktualisieren in der Cache-Datei „index.appcache“. An diesem Punkt treten die Mängel des Cachings zutage. Ja, selbst wenn ich nur eine Textzeile auf einer Seite aktualisiere, wird der gesamte im CACHE definierte Inhalt angezeigt wird erneut heruntergeladen. 

CACHE MANIFEST#version 1.1CACHE:css/style.cssindex.htmlNETWORK:FALLBACK:
Verwenden Sie js, um den Cache automatisch zu aktualisieren

Darüber hinaus können wir auch das Applicationcache

Objekt

verwenden, um den Cache automatisch zu aktualisieren. Wie folgt:

applicationcache ist ein direktes Unterobjekt des

window-Objekts
<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>
. Die Ereignisliste dieses Objekts lautet wie folgt:


status gibt den zwischengespeicherten Detaillierte Grafik- und Texterklärung zum HTML5-Anwendungscaching und zu Web WorkernStatus
zurück

可选值 匹配常量 描述
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

此时运行效果如下：
Detaillierte Grafik- und Texterklärung zum HTML5-Anwendungscaching und zu Web Workern

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

 <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;
    }
}

此时运行效果如下：
Detaillierte Grafik- und Texterklärung zum HTML5-Anwendungscaching und zu Web Workern

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

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

Das obige ist der detaillierte Inhalt vonDetaillierte Grafik- und Texterklärung zum HTML5-Anwendungscaching und zu Web Workern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML5-Beispielcode zum Abrufen von GPS-Informationen für MobiltelefoneNächster Artikel：HTML5-Beispielcode zum Abrufen von GPS-Informationen für Mobiltelefone

In Verbindung stehende Artikel

Mehr sehen