interface Web
Tutoriel H5
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
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 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;}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
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.css
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:
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>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类型的值。 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!
<. 🎜>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 { //离线}
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Bordure de tableau en HTML
Sep 04, 2024 pm 04:49 PM
Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.
Marge gauche HTML
Sep 04, 2024 pm 04:48 PM
Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.
Tableau imbriqué en HTML
Sep 04, 2024 pm 04:49 PM
Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.
Disposition du tableau HTML
Sep 04, 2024 pm 04:54 PM
Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.
Espace réservé d'entrée HTML
Sep 04, 2024 pm 04:54 PM
Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.
Déplacer du texte en HTML
Sep 04, 2024 pm 04:45 PM
Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.
Liste ordonnée HTML
Sep 04, 2024 pm 04:43 PM
Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.
Bouton HTML onclick
Sep 04, 2024 pm 04:49 PM
Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.
