>  기사  >  웹 프론트엔드  >  HTML5 애플리케이션 캐싱 및 Web Workers에 대한 자세한 그래픽 및 텍스트 설명

HTML5 애플리케이션 캐싱 및 Web Workers에 대한 자세한 그래픽 및 텍스트 설명

黄舟
黄舟원래의
2017-03-31 11:44:532177검색


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 스타일 파일을 참조합니다. 그리고 태그에는 캐시 파일 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 파일은 캐시되지 않습니다. 이때 서버를 닫고 페이지를 다시 새로 고치면 다음과 같습니다.
HTML5 애플리케이션 캐싱 및 Web Workers에 대한 자세한 그래픽 및 텍스트 설명
이때는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.