HTML5 애플리케이션 캐싱 및 Web Workers에 대한 자세한 그래픽 및 텍스트 설명
html5 애플리케이션에 도입됨 캐싱은 웹 애플리케이션을 캐시하고 네트워크 연결이 없어도 액세스할 수 있음을 의미합니다.
애플리케이션 캐싱의 장점
오프라인 브라우징을 통해 사용자는 오프라인 상태에서 로드 및 캐시된 데이터를 탐색할 수 있습니다.
로딩 속도 향상
서버 부하 감소
캐싱 구현
애플리케이션 캐싱을 활성화하는 경우 태그에 매니페스트 속성을 포함해야 합니다. 매니페스트 파일의 권장 확장자는 ".appcache"입니다.
매니페스트 파일
매니페스트 파일은 세 가지 캐싱 방법을 제공합니다.
버전 n.n: 버전은 현재 매니페스트 버전을 나타내며, 버전이 변경될 때, 사용자가 다시 로드할 때, 아래에 나열된 모든 파일 CACHE 태그가 다시 다운로드됩니다
.
- 캐시 매니페스트: 이 제목 아래에 나열된 파일은 첫 번째 다운로드 후 캐시됩니다.
- 네트워크: 이 제목 아래 나열된 파일에는 서버에 대한 링크가 필요하며 캐시되지 않습니다.
- FALLBACK: 이 제목 아래 나열된 파일은 액세스 캐시 실패 후 액세스할 리소스를 지정합니다. 첫 번째는 액세스 소스이고 두 번째는 대체 파일 *.html /offline입니다. .html (예: 404 페이지).
캐시된 애플리케이션
여기서 웹 프로젝트를 만들고 새 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 스타일 파일을 참조합니다. 그리고 <html> 태그에는 캐시 파일 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 페이지만 캐시되는 것을 볼 수 있습니다. style.css 파일은 캐시되지 않습니다. 이때 서버를 닫고 페이지를 다시 새로 고치면 다음과 같습니다. 
이때는 html 페이지가 로드되고 CSS 파일이 로드되지 않으므로 h1 태그 글꼴이 기본값입니다.
업데이트캐시
예를 들어 캐시를 업데이트해야 하는 경우 여기에서 html의 텍스트를 변경하고 localhost:8080/html5cache/를 방문하면 index.html을 다시 클릭하면 최신 페이지 텍스트가 로드되지 않습니다. 이는 브라우저가 기본적으로 캐시에 있는 경우 캐시에서 직접 검색하기 때문입니다. 네, 다음과 같습니다:
CACHE MANIFEST#version 1.1CACHE:css/style.cssindex.htmlNETWORK:FALLBACK:
여기서 버전을 1.1로 변경했습니다. 다시 페이지를 방문하면 서비스에 가서 최신 페이지를 다운로드하겠습니다. 이때 캐싱의 단점이 드러납니다. 한 페이지의 텍스트 한 줄만 업데이트하더라도 "index.appcache" 파일의 버전 값을 변경하면 CACHE에 정의된 모든 콘텐츠가 다운로드됩니다. 다시.
js를 사용하여 캐시 자동 업데이트
또한 applicationcache객체를 사용하여 캐시를 자동으로 업데이트할 수도 있습니다.
<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는 window 개체의 직접적인 하위 개체입니다. 이 개체의 이벤트 목록은 다음과 같습니다. 
status는 캐시된 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
此时运行效果如下： 
下面添加一个开始停止的控制按钮：
<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;
}
}此时运行效果如下： 
另外我们还可以通过navaigator对象的onLine属性来判断当前浏览器是否在线，该属性属于只读属性，会返回boolean类型的值。
if(window.navigator.onLine) { //在线} else { //离线}위 내용은 HTML5 애플리케이션 캐싱 및 Web Workers에 대한 자세한 그래픽 및 텍스트 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
Video Face Swap
완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7697
15
1640
14
1393
52
1287
25
1229
29
HTML의 테이블 테두리
Sep 04, 2024 pm 04:49 PM
HTML의 테이블 테두리 안내. 여기에서는 HTML의 테이블 테두리 예제를 사용하여 테이블 테두리를 정의하는 여러 가지 방법을 논의합니다.
HTML의 중첩 테이블
Sep 04, 2024 pm 04:49 PM
HTML의 Nested Table에 대한 안내입니다. 여기에서는 각 예와 함께 테이블 내에 테이블을 만드는 방법을 설명합니다.
HTML 여백-왼쪽
Sep 04, 2024 pm 04:48 PM
HTML 여백-왼쪽 안내. 여기에서는 HTML margin-left에 대한 간략한 개요와 코드 구현과 함께 예제를 논의합니다.
HTML 테이블 레이아웃
Sep 04, 2024 pm 04:54 PM
HTML 테이블 레이아웃 안내. 여기에서는 HTML 테이블 레이아웃의 값에 대해 예제 및 출력 n 세부 사항과 함께 논의합니다.
HTML 입력 자리 표시자
Sep 04, 2024 pm 04:54 PM
HTML 입력 자리 표시자 안내. 여기서는 코드 및 출력과 함께 HTML 입력 자리 표시자의 예를 논의합니다.
HTML 정렬 목록
Sep 04, 2024 pm 04:43 PM
HTML 순서 목록에 대한 안내입니다. 여기서는 HTML Ordered 목록 및 유형에 대한 소개와 각각의 예에 대해서도 설명합니다.
HTML에서 텍스트 이동
Sep 04, 2024 pm 04:45 PM
HTML에서 텍스트 이동 안내. 여기서는 Marquee 태그가 구문과 함께 작동하는 방식과 구현할 예제에 대해 소개합니다.
HTML 온클릭 버튼
Sep 04, 2024 pm 04:49 PM
HTML onclick 버튼에 대한 안내입니다. 여기에서는 각각의 소개, 작업, 예제 및 다양한 이벤트의 onclick 이벤트에 대해 설명합니다.
