前端HTML5 一些你沒用過的特性

時間 2019-12-05

標籤前端 html5 html 一些沒用特性欄目 HTML5 简体版

原文原文鏈接

1、H5的離線緩衝

HTML5的離線存儲是基於一個新建的.appcache文件的，經過這個文件上的解析清單離線存儲資源，這些資源就會像cookie同樣被存儲了下來。以後當網絡在處於離線狀態下時，瀏覽器會經過被離線存儲的數據進行頁面展現。HTML5離線緩存又名Application Cache，是從瀏覽器的緩存中分出來的一塊緩存區，要想在這個緩存中保存數據，可使用一個描述文件（manifest file），列出要下載和緩存的資源。javascript

<html manifest="haorooms.appcache">
複製代碼

解析清單css

在開始以前要先了解下manifest（即.appcache文件），上面的解析清單要怎麼寫,大體就長這樣子。html

CACHE MANIFEST
#version 1.2.2

CACHE:
#css
http://www.haorooms.com/theme/assets/style.css
#js
http://www.haorooms.com/theme/assets/js/main.js

#img
http://static.hyb.dev.ipo.com/css/wifi/pc/images/logo-fk1.png
http://static.hyb.dev.ipo.com/css/wifi/images/favicon.ico

NETWORK:  
# 這裏寫的全部資源永遠都不會被緩衝
# 可使用星號來指示全部其餘資源/文件都須要因特網鏈接（除去CACHE下面列出來的）
*
FALLBACK:
/html5/ /404.html
# 下面的 FALLBACK 小節規定若是沒法創建因特網鏈接，則用 "404.html" 替代 /html5/ 目錄中的全部文件：
複製代碼

manifest 文件可分爲三個部分：html5

CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存
NETWORK        - 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存
FALLBACK       - 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面）
複製代碼

在線的狀況下,用戶代理每次訪問頁面，都會去讀一次manifest.若是發現其改變, 則從新加載所有清單中的資源java

更新緩衝web

1、更新manifest文件：給manifest添加或刪除文件，均可更新緩存，若是咱們更改了js，而沒有新增或刪除，前面例子中註釋中的版本號、時間戳或者md5碼等進行修改，均可以很好的用來更新manifest文件ajax

2、經過javascript操做：html5中引入了js操做離線緩存的方法，下面的js能夠手動更新本地緩存。window.applicationCache.update();瀏覽器

3、清除瀏覽器緩存：若是用戶清除了瀏覽器緩存（手動或用其餘一些工具）都會從新下載文件。緩存

2、Web Worker

js是單線程的，也就是說當前只能容許幹一件事，其餘任務須要等待執行，隨着計算機領域的不斷髮展，尤爲是多核CPU的出現，使得單線程帶來許多的不便，沒法充分發揮計算機的計算能力。bash

web worker的做用將是容許咱們建立多個進程，建立的子線程，收到主線程的控制，主線程能夠適當的分配一些任務給子線程，讓子線程可以在後臺運行，互不干擾，等到子線程執行完畢後再返回給主線程。這樣的好處是，一些計算密集型或高延遲的任務，被 Worker 線程負擔了，主線程（一般負責 UI 交互）就會很流暢，不會被阻塞或拖慢。

使用web worker須要注意的一些點

一、DOM限制，worker子線程沒法調用咱們的document、window、parent對象，可使用navigator、location對象。
二、Worker 線程和主線程不在同一個上下文環境，它們不能直接通訊，必須經過消息完成。
三、不能使用alert、confirm可是可使用XMLHttpRequest發送ajax請求。
四、Worker 線程沒法讀取本地文件，即不能打開本機的文件系統（file://），它所加載的腳本，必須來自網絡。
複製代碼

基本用法

// 主線程
var worker = new Worker('work.js'); // 建立一個web worker
// Worker()構造函數的參數是一個腳本文件，該文件就是 Worker 線程所要執行的任務。因爲 Worker 不能讀取本地文件，因此這個腳本必須來自網絡。若是下載沒有成功（好比404錯誤），Worker 就會默默地失敗。

// 發送消息給子線程
worker.postMessage('Hello World');
worker.postMessage({method: 'echo', args: ['Work']});

// 監聽子線程傳回的消息
worker.onmessage = function (event) {
  console.log('Received message ' + event.data);
  // event.data 能夠拿到數據
  doSomething();
}

function doSomething() {
  // 執行任務
  worker.postMessage('Work done!');
  
  worker.terminate(); // 關閉子線程
}

// 主線程監聽錯誤
worker.onerror(function (event) {
  console.log([
    'ERROR: Line ', e.lineno, ' in ', e.filename, ': ', e.message
  ].join(''));
});
複製代碼

// 接收消息
self.addEventListener('message', function (e) {
  self.postMessage('You said: ' + e.data);
}, false);
// self表明子線程自身，即子線程的全局對象。

// 或者能夠這麼寫
self.addEventListener('message', function (e) {
  var data = e.data; // 接收傳入的消息內容
  switch (data.cmd) {
    case 'start':
      self.postMessage('WORKER STARTED: ' + data.msg);
      break;
    case 'stop':
      self.postMessage('WORKER STOPPED: ' + data.msg);
      self.close(); // 關閉自身
      break;
    default:
      self.postMessage('Unknown command: ' + data.msg);
  };
}, false);
複製代碼

3、WebSocket

webSocket是一種網絡通訊協議，許多高級功能都須要它來實現。咱們可能會有疑問，網絡通訊咱們不是已經有HTTP協議了嗎，爲啥還須要這個協議呢？很簡單，咱們都知道HTTP協議只能是客戶端發起請求，服務端不能主動推送內容。以前咱們的解決辦法就是在客戶端輪詢，可是這樣至關消耗資源。webSocket就提供瞭解決方法。

協議標識符是ws（若是加密，則爲wss），服務器網址就是 URL。

客戶端腳本例子

var ws = new WebSocket("wss://echo.websocket.org"); // 建立socket

// 鏈接成功後的回調
ws.onopen = function(evt) { 
  console.log("Connection open ..."); 
  // 發送消息過去
  ws.send("Hello WebSockets!");
};

// 監聽消息的返回
ws.onmessage = function(event) {
  console.log( "Received Message: " + event.data);
  // 服務器數據多是文本，也多是二進制數據（blob對象或Arraybuffer對象）。
  if(typeof event.data === String) {
    console.log("Received data string");
  }

  if(event.data instanceof ArrayBuffer){
    var buffer = event.data;
    console.log("Received arraybuffer");
  }
  // 關閉鏈接
  ws.close();
};

// 關閉的回調函數
ws.onclose = function(evt) {
  console.log("Connection closed.");
};      

// 發生錯誤的回調
socket.onerror = function(event) {
  // handle error event
};

複製代碼