HTML5 애플리케이션 캐싱 및 Web Workers에 대한 자세한 그래픽 및 텍스트 설명-H5 튜토리얼-php.cn

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>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를 누르고 개발자 옵션을 열면 다음과 같은 캐시를 찾을 수 있습니다.
HTML5 애플리케이션 캐싱 및 Web Workers에 대한 자세한 그래픽 및 텍스트 설명

동시에 NETWORK 유형 캐시를 사용하여 온라인으로 다운로드해야 하는 파일을 나타낼 수도 있습니다. 여기에서는 css/style.css 파일을 NETWORK 유형 캐시에 기록합니다.

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

로그인 후 복사

먼저 이전에 캐시된 기록을 수동으로 삭제해야 합니다. 그런 다음 서버를 열고 http://localhost:8080/html5cache/index.html을 탐색하면 표시 효과는 다음과 같습니다.
HTML5 애플리케이션 캐싱 및 Web Workers에 대한 자세한 그래픽 및 텍스트 설명
이때 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(&#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>

로그인 후 복사

applicationcache는 window 개체의 직접적인 하위 개체입니다. 이 개체의 이벤트 목록은 다음과 같습니다.
HTML5 애플리케이션 캐싱 및 Web Workers에 대한 자세한 그래픽 및 텍스트 설명
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

此时运行效果如下：
HTML5 애플리케이션 캐싱 및 Web Workers에 대한 자세한 그래픽 및 텍스트 설명

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

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

로그인 후 복사

此时运行效果如下：
HTML5 애플리케이션 캐싱 및 Web Workers에 대한 자세한 그래픽 및 텍스트 설명

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

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

로그인 후 복사

위 내용은 HTML5 애플리케이션 캐싱 및 Web Workers에 대한 자세한 그래픽 및 텍스트 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!