1、web語義化和SEO

web語義化是根據內容的結構化（內容語義化），選擇合適的標籤（程式碼語義化），便於開發者閱讀和寫出更優雅的程式碼，同時讓瀏覽器的爬蟲和機器更好地解析程式碼。

SEO是指在瞭解搜尋引擎自然排名的機制的基礎上，對網站進行內部及外部的調整優化，改進網站在搜尋引擎關鍵字中的排名，獲得等多的展現量，吸引更多目標客戶點選訪問網站，從而達到網路營銷及品牌建設的目標。

搜尋引擎通過爬蟲技術獲取的頁面就是由一堆HTML標籤組成的程式碼，人可以通過視覺化的方式來判斷頁面上哪些內容是重點，而機器做不到。但搜尋引擎會根據標籤的含義來判斷內容的權重，因而在合適的位置使用合適的標籤，使整個頁面的語義明確，結構清晰，搜尋引擎才能正確視訊頁面中的重要內容，並予以較高的權重。

2、頁面渲染機制

頁面渲染就是瀏覽器的渲染引擎將HTML程式碼根據css定義的規則顯示在瀏覽器視窗的過程。大致工作原理如下：

a.使用者輸入網址，瀏覽器享伺服器請求，伺服器返回HTML檔案；

b.渲染引擎開始載入HTML程式碼，並將HTML中的標籤轉化為DOM節點，生成DOM數；

c.如果引用了外部css檔案，則發出css檔案請求，伺服器返回該檔案；

d.如果引用了外部js檔案，則發出js檔案請求，伺服器返回該檔案後開始執行；

e.渲染引擎繼續載入HTML中的部分程式碼，並開始解析前面返回的css檔案，然後根據css選擇器計算出節點的樣式，建立渲染樹；

f.從根節點遞迴呼叫，計算每一個元素的大小、位置等，給出每個節點所應該出現在螢幕上的精確座標；

g.如果body中引用了圖片資源，則立即向伺服器傳送請求，此時，渲染引擎不會等待圖片下載完畢，而是繼續渲染後面的程式碼；

h.伺服器返回圖片，由於圖片佔用了一定面積，影響了後面段落的排版，因而搜尋引擎需要回過頭來重新渲染這部分程式碼；

i.如果此時js指令碼中運行了style.display="none"，佈局被改變，引擎也需要重新渲染這部分程式碼。

3、重繪和迴流

渲染樹中過的一部分或全部因元素的規模尺寸、佈局、隱藏等改變而需要重新構建，就稱為迴流。每個頁面至少需要一次迴流，就是在頁面第一次載入的時候。

渲染樹中的一些元素需要更新屬性，但這些屬性只是影響元素的外觀、風格，而不會影響的佈局的，就稱為重繪。

4、本地儲存

本地儲存原始的方式就是cookie，cookie是存放在本地的一段文字，資料以鍵值對的形式儲存，可以設定過期時間。但是cookie不適合存大量資料，cookie的大小被限制在4k左右。因為每次請求頁面，cookie都會發送給伺服器，這使得cookie速度很慢而且效率也不高。

HTML5還提供了兩種在客戶端儲存資料的方法：永久儲存localStorage和臨時儲存sessionStorage，它們都是以key：value對的形式來儲存資料。

此外HTML5還提供了逆天的websql和indexedDB，允許前端以關係型資料庫的方式來儲存本地資料。

5、瀏覽器快取機制

瀏覽器快取機制是通過HTTP協議中的Cache-Control和Last-Modified等欄位來控制檔案快取的機制。

Cache-Control用於控制檔案在本地快取的有效時長，Cache-Control標識檔案在伺服器上的最新更新時間。二者通常一起使用，一個用於控制快取有效時間，一個在快取失效後，向伺服器查詢是否有更新。

注意兩種特殊情況：

a.手動重新整理（F5），瀏覽器會直接任務快取已過期，在請求中加上欄位Cache-Control: max-age=0，發包向伺服器查詢時候有檔案更新；

b.強制重新整理頁面（CTRL+F5），瀏覽器會直接忽略本地的快取，在請求中加上欄位Cache-Control: no-cache或Pragma: no-cache，發包向伺服器重新拉取檔案。

6、History

使用者訪問頁面的歷史紀錄，通常會被儲存在一個類似棧物件的history物件中，點選返回就出棧，下一頁就進棧。

window.history.back()返回上一個頁面

window.history.forward()跳到下一個頁面

window.history.go([detal])跳轉到指定頁面

HTML5為history新增了兩個api和一個事件：

pushState：壓棧，往history物件裡新增一個新的歷史記錄；

replaceState：替換history物件中的當前歷史記錄；

onhashchanage：點選瀏覽器後退按鈕或js呼叫history.back都會出發這個事件。

7、HTML5離線快取

即application cache，是從瀏覽器的快取中分出來的一塊快取區，如果要在這個快取中儲存資料，可以使用一個描述檔案manifest file，列出要下載和快取的資源。

描述檔案是簡單的文字檔案，它告知瀏覽器要快取的內容。

離線快取具有以下優勢：

流線瀏覽：使用者可以在離線時使用它們；

速度：已快取的資源載入地更快；

減少瀏覽器負載：瀏覽器將只從伺服器下載更新過或更改過地資源。

8、canvas和SVG

canvas通過JavaScript來繪製2D圖形，是逐畫素進行渲染的。在canvas中，一旦圖形被繪製完成，它就不會繼續得到瀏覽器的關注，如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或已經被圖形覆蓋的物件。

SVG是基於XML的一種使用XML描述2D圖形的語言，SVG DOM中的每個元素都是可用的，可以為某個元素新增JavaScript事件處理器。在SVG中，每個被繪製的圖形均被視為物件，如果SVG物件屬性發生變化，瀏覽器就會自動重現圖形。

canvas與SVG相比，canvas更以來解析度，不支援事件處理器，文字渲染能力弱，比較適合密集型遊戲，其中許多物件會被頻繁繪製，而SVG則比較適合類似谷歌地圖帶有大型渲染區域的應用遊戲。