# HTML5 API 大盤點
閱讀 3903
收藏 280
2016-09-25
原文鏈接：[jartto.wang](http://jartto.wang/2016/07/25/make-an-inventory-of-html5-api/)
在地鐵里偶然聽見有些人在談論著html5，我聽到了這樣的聲音：“不就是一些簡單的網頁嗎，炒作的太厲害了”。真的只是一些簡單的頁面嗎？
我決定順著《HTML5高級教程》捋一捋，咱們來說道說道。嗯，好戲來了，不只是打臉哦～??
都說了API大盤點，所以“簡寫，語義化，表單支持”均不在本文的盤點范圍內。
#### [](http://jartto.wang/2016/07/25/make-an-inventory-of-html5-api/#%E4%B8%80%E3%80%81Canvas "一、Canvas")一、Canvas
Canvas本質上是一個位圖畫步。
使用canvas編程，首先要獲取其上下文（context）。接著在上下文中執行動作，最后將這些動作應用到上下文中。可以將canvas的這種編輯方式想象成數據庫事務：開發人員先發起一個事務，然后執行某些操作，最后提交事務。
html結構：
js代碼：
~~~
function drawDiagonal(){
var canvas = document.getElementById(‘diagonal’);
var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(70,140);
context.lineTo(140,70);
context.stroke();
window.addEventListener('load',drawDiagonal,true);
~~~
#### [](http://jartto.wang/2016/07/25/make-an-inventory-of-html5-api/#%E4%BA%8C%E3%80%81Audio%E5%92%8CVideo "二、Audio和Video")二、Audio和Video
html5中的多媒體支持。
~~~
play
~~~
~~~
function toggleSound() {
var music = document.getElementById('clickSound');
var toggle = document.getElementById('toggle');
if(music.paused){
music.play();
toggle.innerHTML = 'Pause';
}else{
music.pause();
toggle.innerHTML = 'Play';
~~~
#### [](http://jartto.wang/2016/07/25/make-an-inventory-of-html5-api/#%E4%B8%89%E3%80%81Geolocation "三、Geolocation")三、Geolocation
請求一個位置信息，如果用戶同意，瀏覽器就會返回位置信息，該位置信息是通過支持HTML5地理定位功能的底層設備提供給瀏覽器。位置信息由緯度／經度坐標和一些其他的元數據組成。有了這些位置信息就可以構建引人注意目的位置感知類應用程序。
兩種類型的定位請求API：單次定位請求和重復性的位置更新請求；
~~~
window.addEventListener('load',loadDemo,true);
function loadDemo(){
if(navigator.geolocation){
navigator.geolocation.watchPosition(
updateLocation,
handleLocationError,
{maximumAge:20000}
function updateLocation(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var accuracy = position.coords.accuracy;
var timestamp = position.timestamp;
~~~
#### [](http://jartto.wang/2016/07/25/make-an-inventory-of-html5-api/#%E5%9B%9B%E3%80%81WebSockets "四、WebSockets")四、WebSockets
WebSocket作為HTML5一種新的協議，實現了瀏覽器與服務器的雙向通訊。在 WebSocket API 中，瀏覽器和服務器只需要要做一個握手的動作，然后，瀏覽器和服務器之間就形成了一條快速通道。兩者之間就直接可以數據互相傳送。
WebSocket protocol 是HTML5一種新的協議。它實現了瀏覽器與服務器全雙工通信(full-duplex)。
在此WebSocket 協議中，為我們實現即時服務帶來了兩大好處：
1. Header
互相溝通的Header是很小的-大概只有 2 Bytes
2. Server Push
~~~
var wsServer = 'ws://localhost:8888/Demo';
var websocket = new WebSocket(wsServer);
websocket.onopen = function (evt) { onOpen(evt) };
websocket.onclose = function (evt) { onClose(evt) };
websocket.onmessage = function (evt) { onMessage(evt) };
websocket.onerror = function (evt) { onError(evt) };
function onOpen(evt) {
console.log("Connected to WebSocket server.");
function onClose(evt) {
console.log("Disconnected");
function onMessage(evt) {
console.log('Retrieved data from server: ' + evt.data);
function onError(evt) {
console.log('Error occured: ' + evt.data);
~~~
在實現websocket連線過程中，需要通過瀏覽器發出websocket連線請求，然后服務器發出回應，這個過程通常稱為“握手” (handshaking)。
作為這一設計原則的一部分,WebSocket連接的協議規范定義了一個HTTP連接作為其開始生命周期,進而保證其與pre-WebSocket世界的完全向后兼容。通常來說從HTTP協議切換WebSocket稱為WebSocket握手。
#### [](http://jartto.wang/2016/07/25/make-an-inventory-of-html5-api/#%E4%BA%94%E3%80%81Web-storage "五、Web storage")五、Web storage
①localStorage和sessionStorage大同小異，主要區別在生存周期，下面細說。
~~~
localStorage.backtoken='jartto';
localStorage.setItem('backtoken','');
localStorage.getItem('backtoken');
localStorage.removeItem('backtoken');
~~~
* localStorage生命周期是永久，這意味著除非用戶顯示在瀏覽器提供的UI上清除localStorage信息，否則這些信息將永遠存在。
* sessionStorage生命周期為當前窗口或標簽頁，一旦窗口或標簽頁被永久關閉了，那么所有通過sessionStorage存儲的數據也就被清空了。
* localStorage和sessionStorage一樣都是用來存儲客戶端臨時信息的對象。
他們均只能存儲字符串類型的對象（雖然規范中可以存儲其他原生類型的對象，但是目前為止沒有瀏覽器對其進行實現）。
* 不同瀏覽器無法共享localStorage或sessionStorage中的信息。相同瀏覽器的不同頁面間可以共享相同的localStorage（頁面屬于相同域名和端口），但是不同頁面或標簽頁間無法共享sessionStorage的信息。
②離線存儲
HTML5 的 Web storage API 采用了離線緩存，會生成一個清單文件（manifest file)，這個清單文件實質就是一系列的URL列表文件，這些URL分別指向頁面當中的html,css,javascript,圖片等相關內容。當使用離線應用時，應用會引入這一清單文件，瀏覽器會讀取這一文件，下載相應的文件，并將其緩存到本地。使得這些web應用能夠脫離網絡使用，而用戶在離線時的更改也同樣會映射到清單文件中，并在重新連線之后將更改返回應用，工作方式與我們現在所使用的網盤有著異曲同工之處。
首先，需要在頁面頭加入manifest屬性：
~~~
...
~~~
然后cache.manifest文件的書寫方式為：
~~~
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
~~~
離線存儲的manifest一般由三個部分組成:
1.CACHE:表示需要離線存儲的資源列表，由于包含manifest文件的頁面將被自動離線存儲，所以不需要把頁面自身也列出來。
2.NETWORK:表示在它下面列出來的資源只有在在線的情況下才能訪問，他們不會被離線存儲，所以在離線情況下無法使用這些資源。不過，如果在CACHE和NETWORK中有一個相同的資源，那么這個資源還是會被離線存儲，也就是說CACHE的優先級更高。
3.FALLBACK:表示如果訪問第一個資源失敗，那么就使用第二個資源來替換他，比如上面這個文件表示的就是如果訪問根目錄下任何一個資源失敗了，那么就去訪問offline.html。
#### [](http://jartto.wang/2016/07/25/make-an-inventory-of-html5-api/#%E5%85%AD%E3%80%81Communication "六、Communication")六、Communication
出于安全方面的考慮，運行在同一瀏覽器中的框架，標簽頁，窗口間的通信一直都受到了嚴格的限制。
如果瀏覽器內部能提供直接的通信機制，就能更好的組織這些應用。
為了滿足上述需求，瀏覽器廠商和標準制定機構一致同意引入一種新功能：跨文檔消息通信。
跨文檔消息通信可以確保iframe，標簽頁，窗口間安全的進行跨源通信。它把postMessage API定義為發送消息的標準方式。利用postMessage發送消息非常簡單，代碼如下：
~~~
chatFrame.contentWindow.postMessage(‘Hello,world’,’http:
~~~
接收消息時僅需在頁面中增加一個事件處理函數。當某個消息到達時，通過檢查消息的來源來決定是否對這條消息進行處理。
~~~
window.addEventListener('message',messageHandler,true);
function messageHandler(e){
switch(e.origin) {
case 'friend.example.com':
processMessage(e.data);
break;
default:
~~~
#### [](http://jartto.wang/2016/07/25/make-an-inventory-of-html5-api/#%E4%B8%83%E3%80%81Web-Workers "七、Web Workers")七、Web Workers
HTML5 Web Workers可以讓Web 應用程序具備后臺處理能力，它對多線程的支持非常好，因此，使用了HTML5的Javascript應用程序可以充分利用多核CPU帶來的優勢。將耗時長的任務分配給HTML5 Web Workers執行，可以避免彈出腳本運行緩慢的警告。
Web Workers不能直接訪問Web 頁面和DOM API。
Web Workers的另一個用途是監聽由后臺服務器廣播的新聞消息，收到后臺服務的消息后，將其顯示在Web頁面上。
#### [](http://jartto.wang/2016/07/25/make-an-inventory-of-html5-api/#%E5%85%AB%E3%80%81requestAnimationFrame "八、requestAnimationFrame")八、requestAnimationFrame
瀏覽器可以優化并行的動畫動作，更合理的重新排列動作序列，并把能夠合并的動作放在一個渲染周期內完成，從而呈現出更流暢的動畫效果。比如，通過requestAnimationFrame()，JS動畫能夠和CSS動畫/變換或SVG SMIL動畫同步發生。另外，如果在一個瀏覽器標簽頁里運行一個動畫，當這個標簽頁不可見時，瀏覽器會暫停它，這會減少CPU，內存的壓力，節省電池電量。
~~~
window.requestAnimFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ){
window.setTimeout(callback, 1000 / 60);
})();
(function animloop(){
requestAnimFrame(animloop);
render();
})();
~~~
