HTML5

(第七天)HTML5应用程序的缓存与Web Worker&

2016-10-23  本文已影响43人  IOLG

Web文件的缓存(Cache)

manifest 文件的建议的文件扩展名是：".appcache"。
manifest 文件需要配置正确的 MIME-type，即 "text/cache-manifest"。必须在 web 服务器上进行配置。

缓存的作用

通过对网页文件的缓存，达到离线浏览的目的

缓存的好处
如何实现缓存功能？
  1. 创建manifest文件(如web.appcache)，并根据manifest文件的结构书写缓存指令
  1. 在<html>标签上添加manifest属性，并指定manifest文件的路径 <html manifest="web.appcache">，浏览器会根据manifest文件中的指令进行缓存处理。
HTML代码示例
<!DOCTYPE html>
<!--定义manifest属性，并指定文件路径-->
<html lang="en" manifest="index.appcache">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css" type="text/css">
    <script src="index.js"></script>
</head>

<body>
<header>
    <img src="logo.gif" alt="">
</header>
</body>

</html>
manifest文件内容示例
CACHE MANIFEST
# 2016-10-23 v1.0.3
# 以下文件会被缓存
/index.js
/logo.gif

# 所有文件都需要访问网络
# 若style.css不可访问网络，也没有缓存，
# 那么将无法访问到style.css文件，即网页无法加载style.css
NETWORK:
* 

FALLBACK:
#/sub文件，404.html会被缓存
/sub    404.html
#/sub/目录下的所有文件
/sub/   404.html
如何更新缓存 <small>修改manifest文件内容</small>

注：浏览器对缓存数据的容量限制可能不太一样（某些浏览器设置的限制是每个站点 5MB）。

Web Worker

大部分浏览器都支持Worker，但IE浏览器不支持；判断是否支持的方法：if(Worker){...}else{不支持};

什么是 Web Worker？

web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。

在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。

什么时候使用Web Worker？

当需要js处理复杂度较高的事务时，为了避免影响交互页面的用户体验，可通过Worker后台处理相关事务，处理好之后返回前台简单处理即可。

Web Worker的使用方法

worker.js就是一个Worker实例的文件，复杂的事务就在该js中处理，处理完成后回传给HTML页面。
worker通过postMessage(...)方法发送消息，通过onmessage事件监听接收消息，消息的内容通过ev.data获取

如何终止Worker

通过w.terminate()方法即可终止Worker，并释放其浏览器/计算机资源

Worker相关注意点
代码示例
<body>
    <form>
        <label for="first">first:</label>
        <input type="number" id="first">
        <label for="second">second</label>
        <input type="number" id="second">
        <output class="result"></output>
    </form>
    <script src="index.js"></script>
</body>

"use strict";
var first, second, result, w;
// querySelectorAll(".result") 获取指定CSS选择器的所有元素 
// querySelector 获取指定CSS选择器的第一个元素
first = document.querySelector("#first");
second = document.querySelector("#second");
result = document.querySelector(".result");
console.log(w + first.value + "<br/>" + second.value + "<br/>" + result.textContent);
// 判断浏览器是否支持Worker，也可通过typeof(Worker) === "undefined"；这里的window表示self=this，故可以不写
if (window.Worker) {
  console.log(typeof(w));
  // typeof() 判断对象类型；如果w为undefined类型，即未定义，则创建一个Worker对象
  if (typeof(w) === "undefined") {
      w = new Worker("plus.js");
  }
  // second元素的change事件监听
  first.onchange = postMsg;
  // second元素的change事件监听
  second.onchange = postMsg;
  // worker的message事件监听
  w.onmessage = function(ev) {
      result.textContent = ev.data;
  };
} else {
  result.textContent = "您的浏览器不支持Worker";
}
// 监听到change事件执行的发送信息函数
function postMsg() {
  // 判断first数据不为NaN
  if (isNaN(first.valueAsNumber)) {
      first.valueAsNumber = 0;
  }
  if (isNaN(second.valueAsNumber)) {
      second.valueAsNumber = 0;
  }
  // 将两个值封装为数组发送给plus.js这个worker对象
  w.postMessage([first.valueAsNumber, second.valueAsNumber]);
}

// plus.js是一个Worker对象，这里的this可以不写
this.onmessage = function(ev) {
  // 将传递过来的first和second相加后发送给该worker对象,即index.js中的w
  var result = "result:" + (ev.data[0] + ev.data[1]);
  postMessage(result);
}
上述代码示例效果图

服务器消息推送EventSource

服务器消息推送的实现方法
EventSource如何使用？
代码示例
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('Y-m-d H:m:s');
echo "data: {$time}\n\n"; //这里\n\n必须加，否则消息无法被获取
flush();
?>

<head>
    <script>
    "use strict";
    var serverStatus, serverDate, eventSource;
    window.onload = function(ev) {
        serverStatus = document.getElementById("serverStatus");
        serverDate = document.getElementById("serverDate");
        // 判断浏览器是否支持EventSource，IE不支持，其他浏览器都支持
        if (typeof(EventSource) !== "undefined") {
            startServSendLinstener();
        } else {
            document.body.innerHTML = "Sorry! No server-sent events support..";
        }
    };
    //运行服务器端推送消息的事件服务
    function startServSendLinstener() {
        serverStatus.innerHTML = "Server is Connecting...";
        eventSource = new EventSource("test.php");
        // console输出eventSource调用的URL，即test.php是URL
        console.log(eventSource.url);
        /*EventSource对象中的三个监听事件*/
        // 与服务器建立连接后触发的事件
        eventSource.onopen = openHandler;
        // 发生错误时触发的事件
        eventSource.onerror = errorHandler;
        // 接收数据时触发的事件；事件中的data负责传输服务器端发送的数据
        // eventSource.onmessage = msgHandler;

        // 添加EventSource的message事件监听，效果与eventSource.onmessage一样；
        eventSource.addEventListener("message", msgHandler);
    }

    // 与服务器连接完成后执行的函数
    function openHandler(ev) {
        // 更新页面中的serverStatus
        serverStatus.innerHTML = "Connect Success!"
    }

    // 出现错误执行的函数，错误包含很多种，网络连接错误，编码错误等等
    function errorHandler(ev) {
        // 更新页面中的serverStatus
        console.log(ev);
        serverStatus.innerHTML = "errors";
    }

    // 获取服务端信息后执行的函数
    function msgHandler(ev) {
        // 更新页面中的serverDate
        serverDate.innerHTML = ev.data;
    }
    </script>
    <meta charset="UTF-8">
    <title>Server Sent Event</title>
</head>
<body>
    <section>
        <h2>Server Status</h2>
        <p id="serverStatus"></p>
    </section>
    <section>
        <h2>Server Date</h2>
        <p id="serverDate"></p>
    </section>
</body>
上一篇 下一篇

猜你喜欢

热点阅读