對HTML語義化的理解（語義化標籤有哪些）

對html語義化的瞭解

div佈局是否符合html語義化（爲什麼要用div佈局）

div佈局和table佈局的比較
不符合。

速度快，增強用戶體驗。DIV+CSS佈局較Table佈局減少了頁面代碼，加載速度得到很大的提高。
符合w3c標準，在w3c標準中，table是用來存儲數據的。
佈局更加靈活多樣，能夠通過樣式選擇來實現界面設計方面的更多要求。。
佈局改版方便，不需要過多地變動頁面內容，通常只要更換相應的css樣式就可以將網頁變成另外一種風格展現出來。
佈局可以讓一些重要的鏈接和文字信息等優先讓搜索引擎抓取，內容更便於搜索。
table的表格嵌套問題，搜索引擎一般不抓取三層以上的表格嵌套。所以爲了提升網站排名，使用div佈局。

HTML本地存儲(localStorage、sessionStorage)

cookies、sessionStorage和localStorage解釋及區別

webStorage分爲哪兩類，有什麼區別

localStorage（本地存儲）：將數據保存在客戶端本地的硬件設備(通常指硬盤，也可以是其他硬件設備)中，即使瀏覽器被關閉了，該數據仍然存在，下次打開瀏覽器訪問網站時仍然可以繼續使用。
sessionStorage（會話存儲）：將數據保存在session對象中。所謂session，是指用戶在瀏覽某個網站時，從進入網站到瀏覽器關閉所經過的這段時間，也就是用戶瀏覽這個網站所花費的時間。session對象可以用來保存在這段時間內所要求保存的任何數據。
這兩者的區別在於，sessionStorage爲臨時保存，而localStorage爲永久保存。

webStorage的優點

（1）存儲空間更大：cookie爲4KB，而WebStorage是5MB；

（2）節省網絡流量：WebStorage不會傳送到服務器，存儲在本地的數據可以直接獲取，也不會像cookie一樣每次請求都會傳送到服務器，所以減少了客戶端和服務器端的交互，節省了網絡流量；

（3）對於那種只需要在用戶瀏覽一組頁面期間保存而關閉瀏覽器後就可以丟棄的數據，sessionStorage會非常方便；

（4）快速顯示：有的數據存儲在WebStorage上，再加上瀏覽器本身的緩存。獲取數據時可以從本地獲取會比從服務器端獲取快得多，所以速度更快；

（5）安全性：WebStorage不會隨着HTTP header發送到服務器端，所以安全性相對於cookie來說比較高一些，不會擔心截獲，但是仍然存在僞造問題；

（6）WebStorage提供了一些方法，數據操作比cookie方便；

　　　      setItem (key, value) ——  保存數據，以鍵值對的方式儲存信息。
  
      　　  getItem (key) ——  獲取數據，將鍵值傳入，即可獲取到對應的value值。

        　　removeItem (key) ——  刪除單個數據，根據鍵值移除對應的信息。

        　　clear () ——  刪除所有的數據

        　　key (index) —— 獲取某個索引的key

webStorage的特點

存儲位置：localStorage和sessionStorage都保存在客戶端，不與服務器進行交互通信。
存儲內容類型：localStorage和sessionStorage只能存儲字符串類型，對於複雜的對象可以使用ECMAScript提供的JSON對象的stringify和parse來處理
獲取方式：localStorage：window.localStorage，sessionStorage：window.sessionStorage。
應用場景：localStoragese：常用於長期登錄（+判斷用戶是否已登錄），適合長期保存在本地的數據。sessionStorage：敏感賬號一次性登錄

HTML5 WebSocket

瞭解webSocket
webSocket心跳重連機制

爲什麼需要WebSocket

因爲 HTTP 協議有一個缺陷：通信只能由客戶端發起。這種單向請求的特點，註定瞭如果服務器有連續的狀態變化，客戶端要獲知就非常麻煩。我們只能使用"輪詢"來了解服務器有沒有新的信息。最典型的場景就是聊天室。
輪詢的效率低，非常浪費資源（因爲短輪詢必須不停連接，長輪詢HTTP 連接必須始終打開）。因此，工程師們一直在思考，有沒有更好的方法。WebSocket 就是這樣發明的。

WebSocket的優勢

服務器可以主動向客戶端推送信息，客戶端也可以主動向服務器發送信息

其他特點包括

（1）建立在 TCP 協議之上，服務器端的實現比較容易。

（2）與 HTTP 協議有着良好的兼容性。默認端口也是80和443，並且握手階段採用 HTTP 協議，因此握手時不容易屏蔽，能通過各種 HTTP 代理服務器。

（3）數據格式比較輕量，性能開銷小，通信高效。

（4）可以發送文本，也可以發送二進制數據。

（5）沒有同源限制，客戶端可以與任意服務器通信。

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

WebSocket有哪些api

創建webSocket實例

var url = '';
var ws =  new WebSocket(url);

webSocket.readyState

0 connecting，正在連接
1 open，連接成功，可以通信了
2 closing，連接正在關閉
3 closed 連接已經關閉，或是連接打開失敗

webSocket.onopen

用於指定連接成功後的回調函數

ws.onopen = function(){
	ws.send('hello server');
}

webSocket.onclose

用於指定連接關閉後的回調函數

ws.onclose = function(event) {
  var code = event.code;
  var reason = event.reason;
  var wasClean = event.wasClean;
  // handle close event
};

webSocket.onmessage

用於指定接收到服務器數據後的回調函數

ws.onmessage = function(event) {
  var data = event.data;
  // 處理數據
};

webSocket.send

實例對象的send()方法用於向服務器發送信息

發文本

ws.send('your message')

發blob對象

var file = document
  .querySelector('input[type="file"]')
  .files[0];
ws.send(file);

發ArrayBuffer(二進制數據緩衝區)


// Sending canvas ImageData as ArrayBuffer
var img = canvas_context.getImageData(0, 0, 400, 320);
var binary = new Uint8Array(img.data.length);
for (var i = 0; i < img.data.length; i++) {
  binary[i] = img.data[i];
}
ws.send(binary.buffer);

webSocket.bufferedAmount

實例的bufferedAmount屬性，表示還有多少字節的二進制數據還沒有發送出去，它可以用來判斷髮送是否結束

var data = new ArrayBuffer(10000000);
socket.send(data);

if (socket.bufferedAmount === 0) {
  // 發送完畢
} else {
  // 發送還沒結束
}

webSocekt.onerror

用於指定報錯時的回調函數

socket.onerror = function(event) {
  // handle error event
};

爲什麼需要心跳重連機制

遇到網絡斷開的情況時，服務器沒有觸發onclose的事件，這樣服務器就會繼續給客戶端發送多餘的鏈接，並且這些數據還會丟失。所以就需要一種機制來檢測客戶端和服務器是否處於正常的連接狀態。因此就有了websocket的心跳，有心跳，說明還活着，沒有心跳說明已經死了。

用自己的話歸納一下心跳重連機制的原理

心跳機制是，每隔一段事件向服務器發送一個數據包，告訴服務器自己還活着，同時服務器會給予迴應，客戶端也能確認服務器是否還活着。如果一定時間內，服務器沒有發來迴應，那麼就會開啓重連。如果服務器發來迴應，那麼就重置心跳檢測（重置倒計時）。

HTML5 SSE

Server-Sent Events 教程
 詳解Web端通信方式的演進：從Ajax、JSONP 到 SSE、Websocket

什麼是SSE

SSE使用的是http協議，該協議無法做到服務器主動推送信息。但是有一種變通方法，服務器向客戶端聲明，接下來發送的是流信息。

和webSocket的異同以及優勢

相同點
都是建立瀏覽器與服務器之間的通信渠道，然後服務器向瀏覽器推送信息。
不同點
WebSocket 更強大和靈活。因爲它是全雙工通道，可以雙向通信；SSE 是單向通道，只能服務器向瀏覽器發送，因爲流信息本質上就是下載。如果瀏覽器向服務器發送信息，就變成了另一次 HTTP 請求。
優勢
- SSE 使用 HTTP 協議，現有的服務器軟件都支持。WebSocket 是一個獨立協議。
- SSE 屬於輕量級，使用簡單；WebSocket 協議相對複雜。
- SSE 默認支持斷線重連，WebSocket 需要自己實現。
- SSE 一般只用來傳送文本，二進制數據需要編碼後傳送，WebSocket 默認支持傳送二進制數據。

和ajax的區別

數據類型不同: SSE 只能接受 type/event-stream 類型，AJAX 可以接受任意類型；
結束機制不同: 雖然使用AJAX長輪詢也可以實現這樣的效果，但是服務器端(以nodeJS爲例)必須在一定時間內執行res.end()才行。而SSE只需要執行res.write() 即可。

SSE的API

SSE 的客戶端 API 部署在EventSource對象上。下面的代碼可以檢測瀏覽器是否支持 SSE。

if ('EventSource' in window) {
  // ...
}

創建

var source = new EventSource(url);

EventSource.readyState

0：相當於常量EventSource.CONNECTING，表示連接還未建立，或者斷線正在重連。
1：相當於常量EventSource.OPEN，表示連接已經建立，可以接受數據。
2：相當於常量EventSource.CLOSED，表示連接已斷，且不會重連。

EventSource.onopen

連接一旦建立，就會觸發open事件，可以在onopen屬性定義回調函數。

source.onopen = function (event) {
  // ...
};

EventSource.onmessage

客戶端收到服務器發來的數據，就會觸發message事件，可以在onmessage屬性的回調函數。

source.onmessage = function (event) {
  var data = event.data;
  // handle message
};

上面代碼中，事件對象的data屬性就是服務器端傳回的數據（文本格式）。

EventSource.onerror

如果發生通信錯誤（比如連接中斷），就會觸發error事件，可以在onerror屬性定義回調函數。

source.onerror = function (event) {
  // handle error event
};

面試準備之html

文章目錄