Maison > Article > interface Web > Explication graphique et textuelle détaillée de la mise en cache des applications HTML5 et des Web Workers
Explication graphique et textuelle détaillée de la mise en cache des applications HTML5 et des Web Workers
- 黄舟original
- 2017-03-31 11:44:532145parcourir
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>style.css
@CHARSET "UTF-8";h1 { color: aqua;}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 , 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
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 : 
CACHE MANIFEST#version 1.0CACHE:index.htmlNETWORK:css/style.cssVous 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 :
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 : 
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: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 cacheDe plus, nous pouvons également utiliser l'applicationcache
object pour mettre à jour automatiquement le cache. Comme suit :
<script type="text/javascript">
//添加页面加载函数
window.addEventListener('load', function(e) {
//为applicationCache对象添加updateready事件
window.applicationCache.addEventListener('updateready', function(e) {
//表示manifest中列举的文件已经重新下载并更新成功
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
//使用swapCache()方法更新到应用程序中
window.applicationCache.swapCache();
if (confirm('A new version of this site is available. Load it?')) {
//重新加载当前页面
window.location.reload();
}
} else { //manifest文件没有变化
console.log("manifest 没有改变");
}
}, false);
}, false); </script>applicationcache est un sous-objet direct de l'objet window La liste des événements de cet objet est la suivante : 方法 web workers是运行在后台的脚本，独立于其他的脚本，不会影响页面的性能。类似于android开发中的handler。将繁重耗时的计算放到web worker中来实现，然后将处理的结果返回给主UI线程来显示。 postMessage() :用于向html页面回传一段消息。 terminate() :终止web workers，并且释放计算机资源。 下面使用web workers简单实现一数字更新的demo： 这里在index.html文件当中引入了index.js文件。 可以看到，这里讲更新数据的具体操作，使用Worker来更新，在worker当中加载了count.js文件来做一些耗时，复杂的计算。然后使用worker的onmessage回调方法，将count.js返回的结果重新显示给nump。 count.js文件比较简单，每隔一秒更新countNum的值，然后回传给调用者，也就是这里的index.js 此时运行效果如下： 下面添加一个开始停止的控制按钮： index.js 此时运行效果如下： 另外我们还可以通过navaigator对象的onLine属性来判断当前浏览器是否在线，该属性属于只读属性，会返回boolean类型的值。
<.>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方法
web workers简单实现
新建一个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.jsvar 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;
};
};
count.jsvar countNum = 0;function count(){
postMessage(countNum);//通过postMessage方法将计算结果回传给调用者
countNum++;
setTimeout(count,1000);
}
count();
<button id="start">start</button>
<button id="stop">stop</button>
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;
}
}
if(window.navigator.onLine) { //在线} else { //离线}
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!