Explication graphique et textuelle détaillée de la mise en cache des applications HTML5 et des Web Workers-Tutoriel H5-php.cn

Explication graphique et textuelle détaillée de la mise en cache des applications HTML5 et des Web Workers

黄舟

Libérer： 2017-03-31 11:44:53

original

2210 Les gens l'ont consulté

Introduit dans l'application html5 mise en cache signifie que les applications Web peuvent être mises en cache et accessibles lorsqu'il n'y a pas de connexion réseau

Avantages de la mise en cache des applications

Hors ligne Lors de la navigation, les utilisateurs peuvent parcourir les données chargées et mises en cache lorsqu'ils sont hors ligne
Accélérer la vitesse de chargement
Réduire la charge du serveur

Implémenter la mise en cache

Si vous activez la mise en cache des applications, vous devez inclure l'attribut manifeste dans la balise L'extension recommandée pour le fichier manifeste est :".appcache"

fichier manifeste

le fichier manifeste nous fournit trois méthodes de mise en cache :
version n.n : version représente la version actuelle du manifeste, lorsque la version change, lorsque l'utilisateur charge à nouveau, tous les fichiers répertoriés sous le CACHE le tag sera à nouveau téléchargé
. - CACHE MANIFEST : les fichiers répertoriés sous cette rubrique seront mis en cache après le premier téléchargement.
- RÉSEAU : les fichiers répertoriés sous cette rubrique nécessitent un lien vers le serveur et ne seront pas mis en cache.
- FALLBACK : Les fichiers répertoriés sous ce titre spécifient les ressources auxquelles accéder après l'échec du cache d'accès. Le premier est la source d'accès et le second est le fichier de remplacement *.html /offline. .html , tel que page 404.

Application en cache

Ici, je crée un projet web et crée un nouveau fichier 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>This is my HTML page</h1>
  </body></html>

Copier après la connexion

style.css

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

Copier après la connexion

Comme vous pouvez le voir ici, ma page est très simple, et référence un fichier de style style.css. Et dans la balise <html>, le fichier cache index.appcache est spécifié. Le contenu de
index.appcache est le suivant :

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

Copier après la connexion

Comme vous pouvez le voir, nous utilisons ici le type CACHE. cache, ce qui signifie que l'index doit être mis en cache les fichiers .html et css/style.css. À ce moment, ouvrez le serveur et parcourez la page Web. Après avoir fermé le serveur, vous constaterez que la page Web est également accessible. À ce moment, appuyez sur F12, ouvrez les options du développeur et vous trouverez le cache suivant : <🎜. >
Explication graphique et textuelle détaillée de la mise en cache des applications HTML5 et des Web Workers

En même temps, vous pouvez également utiliser le cache de type NETWORK pour indiquer quels fichiers doivent être téléchargés en ligne. Ici, j'écris le fichier css/style.css dans le cache de type NETWORK.

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

Copier après la connexion

Vous devez d'abord effacer manuellement les enregistrements précédemment mis en cache. Ouvrez ensuite le serveur et parcourez http://localhost:8080/html5cache/index.html L'effet d'affichage est le suivant :

Explication graphique et textuelle détaillée de la mise en cache des applications HTML5 et des Web Workers Vous pouvez voir que seule la page html est mise en cache à ce moment, et le fichier css/ n'est pas mis en cache, fermez le serveur à ce moment, actualisez à nouveau la page, l'effet est le suivant :

Explication graphique et textuelle détaillée de la mise en cache des applications HTML5 et des Web Workers Vous pouvez voir qu'à ce moment, seul le La page html est chargée et aucun fichier CSS n'est chargé, donc la balise h1 La police est la valeur par défaut.

Mettre à jourle cache

Si vous devez mettre à jour le cache, par exemple, ici j'ai modifié le texte dans le html, lorsque je visite localhost:8080/html5cache/index .html à nouveau, le texte de la dernière page ne sera pas chargé, car le navigateur recherchera dans le cache par défaut. S'il est dans le cache, il sera extrait directement du cache. Nous devons donc mettre à jour la version. dans le fichier cache "index.appcache". Oui, comme suit :

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

Copier après la connexion

Ici, j'ai changé la version en 1.1. Lorsque je visiterai à nouveau la page, j'irai sur le service pour télécharger la dernière. À ce stade, les défauts de la mise en cache apparaissent. Oui, même si je ne mets à jour qu'une seule ligne de texte sur une page, lorsque je modifie la valeur de version dans le fichier "index.appcache", tout le contenu défini dans le CACHE. sera à nouveau téléchargé.

Utilisez js pour mettre à jour automatiquement le cache

De plus, nous pouvons également utiliser l'applicationcache

object pour mettre à jour automatiquement le cache. Comme suit :

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

Copier après la connexion

applicationcache est un sous-objet direct de l'

objet window La liste des événements de cet objet est la suivante :
Explication graphique et textuelle détaillée de la mise en cache des applications HTML5 et des Web Workers <. 🎜>status renvoie le
Status mis en cache

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

Copier après la connexion

这里在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;
    };
};

Copier après la connexion

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

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

Copier après la connexion

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

此时运行效果如下：

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

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

Copier après la connexion

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

Copier après la connexion

此时运行效果如下：

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

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

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!