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 스타일 파일을 참조합니다. 그리고 태그에는 캐시 파일 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
H5 : 웹에서 사용자 경험을 향상시키는 방법Apr 19, 2025 am 12:08 AMH5는 멀티미디어 지원, 오프라인 스토리지 및 성능 최적화로 웹 사용자 경험을 향상시킵니다. 1) 멀티미디어 지원 : H5 및 요소는 개발을 단순화하고 사용자 경험을 향상시킵니다. 2) 오프라인 스토리지 : WebStorage 및 IndexedDB는 오프라인으로 사용하여 경험을 향상시킵니다. 3) 성능 최적화 : 웹 워즈 및 요소는 성능을 최적화하여 대역폭 소비를 줄입니다.
H5 코드 해체 : 태그, 요소 및 속성Apr 18, 2025 am 12:06 AMHTML5 코드는 태그, 요소 및 속성으로 구성됩니다. 1. 태그는 컨텐츠 유형을 정의하고 다음과 같은 각도 브래킷으로 둘러싸여 있습니다. 2. 요소는 컨텐츠와 같은 시작 태그, 내용 및 엔드 태그로 구성됩니다. 3. 속성 시작 태그에서 키 값 쌍을 정의하고 기능을 향상시킵니다. 웹 구조를 구축하기위한 기본 단위입니다.
H5 코드 이해 : HTML5의 기본 사항Apr 17, 2025 am 12:08 AMHTML5는 현대적인 웹 페이지를 구축하는 핵심 기술로 많은 새로운 요소와 기능을 제공합니다. 1. HTML5는 웹 페이지 구조 및 SEO를 향상시키는 의미 론적 요소를 소개합니다. 2. 멀티미디어 요소를 지원하고 플러그인없이 미디어를 포함시킵니다. 3. 양식은 새로운 입력 유형 및 검증 속성을 향상시켜 검증 프로세스를 단순화합니다. 4. 웹 페이지 성능 및 사용자 경험을 향상시키기 위해 오프라인 및 로컬 스토리지 기능을 제공합니다.
H5 코드 : 웹 개발자를위한 모범 사례Apr 16, 2025 am 12:14 AMH5 코드에 대한 모범 사례는 다음과 같습니다. 1. 올바른 문서 선언 및 문자 인코딩 사용; 2. 시맨틱 태그를 사용하십시오. 3. HTTP 요청을 줄입니다. 4. 비동기 부하 사용; 5. 이미지 최적화. 이러한 관행은 웹 페이지의 효율성, 유지 관리 및 사용자 경험을 향상시킬 수 있습니다.
H5 : 웹 표준 및 기술의 발전Apr 15, 2025 am 12:12 AM웹 표준과 기술은 현재까지 HTML4, CSS2 및 간단한 JavaScript에서 발전했으며 중대한 개발을 거쳤습니다. 1) HTML5는 캔버스 및 웹 스토리지와 같은 API를 도입하여 웹 응용 프로그램의 복잡성과 상호 작용을 향상시킵니다. 2) CSS3은 애니메이션 및 전환 기능을 추가하여 페이지를보다 효과적으로 만듭니다. 3) JavaScript는 화살표 기능 및 클래스와 같은 Node.js 및 ES6의 최신 구문을 통해 개발 효율 및 코드 가독성을 향상시킵니다. 이러한 변경으로 인해 웹 애플리케이션의 성능 최적화 및 모범 사례의 개발이 촉진되었습니다.
H5는 HTML5의 속기입니까? 세부 사항을 탐색합니다Apr 14, 2025 am 12:05 AMH5는 HTML5의 약어 일뿐 만 아니라 더 넓은 현대 웹 개발 기술 생태계를 나타냅니다. 1. H5는 HTML5, CSS3, JavaScript 및 관련 API 및 기술을 포함합니다. 2. 그것은 더 풍부하고 대화식이며 부드러운 사용자 경험을 제공하며 여러 장치에서 원활하게 실행할 수 있습니다. 3. H5 기술 스택을 사용하여 반응 형 웹 페이지와 복잡한 대화식 기능을 만들 수 있습니다.
H5 및 HTML5 : 웹 개발에 일반적으로 사용되는 용어Apr 13, 2025 am 12:01 AMH5 및 HTML5는 동일한 것을, 즉 html5를 나타냅니다. HTML5는 HTML의 다섯 번째 버전으로 시맨틱 태그, 멀티미디어 지원, 캔버스 및 그래픽, 오프라인 스토리지 및 로컬 스토리지와 같은 새로운 기능을 제공하여 웹 페이지의 표현성 및 상호 작용성을 향상시킵니다.
H5는 무엇을 언급합니까? 맥락 탐색Apr 12, 2025 am 12:03 AMh5referstohtml5, apivotaltechnologyinwebdevelopment.1) html5introducesnewelements 및 dynamicwebapplications.2) itsupp ortsmultimediawithoutplugins, enovannangeserexperienceacrossdevices.3) SemanticLementsImproveContentsTructUreAndSeo.4) H5'Srespo
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
Dreamweaver Mac版
시각적 웹 개발 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
mPDF
mPDF는 UTF-8로 인코딩된 HTML에서 PDF 파일을 생성할 수 있는 PHP 라이브러리입니다. 원저자인 Ian Back은 자신의 웹 사이트에서 "즉시" PDF 파일을 출력하고 다양한 언어를 처리하기 위해 mPDF를 작성했습니다. HTML2FPDF와 같은 원본 스크립트보다 유니코드 글꼴을 사용할 때 속도가 느리고 더 큰 파일을 생성하지만 CSS 스타일 등을 지원하고 많은 개선 사항이 있습니다. RTL(아랍어, 히브리어), CJK(중국어, 일본어, 한국어)를 포함한 거의 모든 언어를 지원합니다. 중첩된 블록 수준 요소(예: P, DIV)를 지원합니다.
안전한 시험 브라우저
안전한 시험 브라우저는 온라인 시험을 안전하게 치르기 위한 보안 브라우저 환경입니다. 이 소프트웨어는 모든 컴퓨터를 안전한 워크스테이션으로 바꿔줍니다. 이는 모든 유틸리티에 대한 액세스를 제어하고 학생들이 승인되지 않은 리소스를 사용하는 것을 방지합니다.
Eclipse용 SAP NetWeaver 서버 어댑터
Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.
