## 一、Web語義化 html,head,body,div,span,table,ul,ol,dl,p,b,h1~h6,strong,form,input,img,em,i 等等，另外html5 還新增了很多語義化的標簽，比如，header,acticle,aside,section,footer,audio,radio 等等。Web語義化是指使用語義恰當的標簽，使頁面有良好的結構，頁面元素有含義，能夠讓人和搜索引擎都容易理解。 ## 二、頁面渲染機制 1. 用戶輸入網址，瀏覽器向服務器發出請求，服務器返回html文件； 2. 渲染引擎開始載入html代碼，并將HTML中的標簽轉化為DOM節點，生成DOM樹； 3. 如果中引用了外部css文件，則發出css文件請求，服務器返回該文件； 4. 如果中引用了外部js文件，則發出js文件請求，服務器返回該文件后開始運行； 5. 渲染引擎繼續載入html中的部分的代碼，并開始解析前面返回的css文件，然后根據css選擇器計算出節點的樣式，創建渲染樹； 6. 從根節點遞歸調用，計算每一個元素的大小、位置等，給每個節點所應該出現在屏幕上的精確坐標； 7. 如果body中的引用了圖片資源，則立即向服務器發出請求，此時渲染引擎不會等待圖片下載完畢，而是繼續渲染后面的代碼； 8. 服務器返回圖片文件，由于圖片占用了一定面積，影響了后面段落的排版，因此引擎需要回過頭來重新渲染這部分代碼； 9. 如果此時js腳本中運行了style.display=”none”, 布局被改變，引擎也需要重新渲染這部分代碼； 10. 直到為止，頁面渲染完畢。 ## 三、重繪和回流 當渲染樹中的一部分(或全部)因為元素的規模尺寸，布局，隱藏等改變而需要重新構建。這就稱為回流。比如上面的img文件加載完成后就會引起回流，每個頁面至少需要一次回流，就是在頁面第一次加載的時候。 ## 四、本地存儲 html5提供了兩種在客戶端存儲數據的新方法：localStorage 和 sessionStorage, 它們都是以key/value 的形式來存儲數據，前者是永久存儲，后者的存儲期限僅限于瀏覽器會話(session),即當瀏覽器窗口關閉后，sessionStorage中的數據被清除。 ## 五、瀏覽器緩存機制 瀏覽器緩存機制是指通過 HTTP 協議頭里的 Cache-Control（或 Expires）和 Last-Modified（或 Etag）等字段來控制文件緩存的機制。 ## 六、History路由機制 HTML5 對History Api 進行了增強，新增了兩個Api和一個事件，分別是pushState、replaceState 和 onpopstate ## 七、HTML5離線緩存 HTML5離線緩存又叫Application Cache，是從瀏覽器的緩存中分出來的一塊緩存區，如果要在這個緩存中保存數據，可以使用一個描述文件（manifest file），列出要下載和緩存的資源。 ## 八、Canvas和SVG Canvas 通過Javascript 來繪制 2D 圖形。Canvas 是逐像素進行渲染的。在 Canvas 中，一旦圖形被繪制完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那么整個場景也需要重新繪制，包括任何或許已被圖形覆蓋的對象。 SVG 是一種使用 XML 描述 2D 圖形的語言。SVG 基于 XML，這意味著 SVG DOM 中的每個元素都是可用的。你可以為某個元素附加 JavaScript 事件處理器。在 SVG 中，每個被繪制的圖形均被視為對象。如果 SVG 對象的屬性發生變化，那么瀏覽器能夠自動重現圖形。