1.如何理解HTML5結(jié)構(gòu)語(yǔ)義化？

HTML5結(jié)構(gòu)語(yǔ)義化是指:用正確的標(biāo)簽做正確的事情。

對(duì)開(kāi)發(fā)者:

1.便于團(tuán)隊(duì)的開(kāi)發(fā)和維護(hù)。

2.在沒(méi)有加載CSS的情況下也能呈現(xiàn)出較好的內(nèi)容結(jié)構(gòu)與代碼結(jié)構(gòu)，易于閱讀。

對(duì)瀏覽器:

1.有利于seo搜索引擎的爬蟲(chóng)依賴(lài)于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重。

2.方便其他設(shè)備的解析，利于無(wú)障礙閱讀，提高可訪問(wèn)性。

2.HTML5的新特新？

• HTML5已經(jīng)不是SGML的子集，主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。

1.用于媒介回放的video和audio元素

2.本地離線存儲(chǔ)localStorage長(zhǎng)期儲(chǔ)存數(shù)據(jù)，瀏覽器關(guān)閉之后數(shù)據(jù)會(huì)丟失

3.sessionStorage的數(shù)據(jù)在瀏覽器關(guān)閉之后自動(dòng)將數(shù)據(jù)刪除

4.語(yǔ)義化更好的內(nèi)容元素有：article、footer、header、nav、section

5.表單控件：calendar、date、time、Email、url、search

6.新的技術(shù)：

(1) webworker : 子線程：web worker是運(yùn)行在瀏覽器后臺(tái)的js程序，他不影響主程序的運(yùn)行，是另開(kāi)的一個(gè)js線程，可以用這個(gè)線程執(zhí)行復(fù)雜的數(shù)據(jù)操作，然后把操作結(jié)果通過(guò)postMessage傳遞給主線程，這樣在進(jìn)行復(fù)雜且耗時(shí)的操作時(shí)就不會(huì)阻塞主線程了。

(2) websocket : WebSocket 使用ws或wss協(xié)議，Websocket是一個(gè)持久化的協(xié)議，相對(duì)于HTTP這種非持久的協(xié)議來(lái)說(shuō)。WebSocket API最偉大之處在于服務(wù)器和客戶(hù)端可以在給定的時(shí)間范圍內(nèi)的任意時(shí)刻，相互推送信息。WebSocket并不限于以Ajax(或XHR)方式通信，因?yàn)锳jax技術(shù)需要客戶(hù)端發(fā)起請(qǐng)求，而WebSocket服務(wù)器和客戶(hù)端可以彼此相互推送信息；XHR受到域的限制，而WebSocket允許跨域通信。

(3)Geolocation : 位置信息的獲取依據(jù)

W3C定義geolocation-API實(shí)現(xiàn)標(biāo)準(zhǔn)解釋為：接口與底層位置信息無(wú)關(guān)。常見(jiàn)的位置信息來(lái)源包括全球定位系統(tǒng)(GPS)和從網(wǎng)絡(luò)信號(hào)推斷出的位置，如IP地址、RFID、WiFi和藍(lán)牙MAC地址、GSM/CDMA小區(qū)id，以及用戶(hù)輸入。不能保證API返回設(shè)備的實(shí)際位置。

規(guī)范中沒(méi)有規(guī)定使用這些設(shè)備的先后順序。在HTML5的實(shí)現(xiàn)中，手機(jī)等移動(dòng)設(shè)備優(yōu)先使用GPS定位。筆記本和部分平板，最準(zhǔn)確的定位是WIFI。網(wǎng)線上網(wǎng)的臺(tái)式機(jī)，一般就只能使用IP來(lái)定位了，IP準(zhǔn)確度最低。

出于隱私保護(hù)考慮，標(biāo)準(zhǔn)規(guī)范獲取地理位置必須得用戶(hù)授權(quán)后才能得到地理位置信息，并且在HTTP協(xié)議下除locahost / 127.0.0.1，其它地址必須使用HTTPS協(xié)議才可正確獲取。

• 移除的元素：

1. 純表現(xiàn)的元素： basefont,big,center,font,s,strike,tt,u

2. 對(duì)可用性產(chǎn)生負(fù)面影響的元素：

frame,frameset,noframes

• 支持HTML5新標(biāo)簽：

(1)IE8、 IE7、 IE6支持通過(guò) document.createElement方法產(chǎn)生的標(biāo)簽

(2)可以利用這一特性讓這些瀏覽器支持HTML5新標(biāo)簽

(3)瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式

• 也可以使用成熟的框架：html5shim

3. 描述一下cookies,sessionStorage和localStorage的區(qū)別？

• cookie:是網(wǎng)站為了表示用戶(hù)身份而 而存儲(chǔ)用戶(hù)本地終端上的數(shù)據(jù)(通常經(jīng)過(guò)加密)
• cookie數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶（即使不需要），會(huì)在瀏覽器和服務(wù)器之間來(lái)回傳遞
• sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)送給服務(wù)器，僅在本地保存
• cookie數(shù)據(jù)大小不能超過(guò)4k
• C和localStorage雖然也有存儲(chǔ)大小的限制，但比cookie大，可以達(dá)到5M甚至更大。
• 有期時(shí)間：
• localStorage：存儲(chǔ)持久的數(shù)據(jù)，瀏覽器關(guān)閉后，數(shù)據(jù)不會(huì)丟失除非主動(dòng)刪除數(shù)據(jù)
• sessionStorage:數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除
• cookie設(shè)置的cookie過(guò)期時(shí)間之前一直有效，即使窗口或者瀏覽器關(guān)閉

4. 瀏覽器的渲染機(jī)制一般分為幾個(gè)步驟？

• 處理HTML并構(gòu)建DOM樹(shù)
• 處理css 構(gòu)建CSSOM樹(shù)（對(duì)象模型）
• 將DOM和CSSOM合并成一個(gè)渲染樹(shù)
• 根據(jù)渲染數(shù)據(jù)進(jìn)行布局，計(jì)算每個(gè)節(jié)點(diǎn)的位置
• 調(diào)用GPU繪制，合成圖層，顯示在屏幕上。

注意：

• 在構(gòu)建cssom樹(shù)時(shí)，會(huì)阻塞渲染，直到cssom樹(shù)構(gòu)建完成，并且構(gòu)建cssom樹(shù)是一個(gè)十分消耗性能的過(guò)程，所以應(yīng)該盡量保證層級(jí)扁平，減少過(guò)度層疊，越是具體的css選擇器，執(zhí)行的速度越慢
• 當(dāng)HTML解析到script標(biāo)簽時(shí)，會(huì)暫停構(gòu)建DOM，完成后才會(huì)從暫停的地方重新開(kāi)始，也就是說(shuō)，如果想讓首屏渲染的越快，就不應(yīng)該在首屏就加載js文件。

5.重繪(Repaint)和回流(Reflow)

• 重繪是指當(dāng)節(jié)點(diǎn)需要更改外觀而不會(huì)影響布局的，比如改變字體顏色...就稱(chēng)為重繪。
• 回流是指布局或者幾何屬性需要改變就成為回流(需要計(jì)算它們?cè)谠O(shè)備視口內(nèi)的確切位置和大小)

注意：回流必定會(huì)發(fā)生重繪，重繪不一定會(huì)引發(fā)回流?；亓魉璧某杀颈戎乩L高得多，改變深層次的節(jié)點(diǎn)很可能導(dǎo)致父節(jié)點(diǎn)的一系列回流。

• 可能導(dǎo)致性能問(wèn)題：

（1）添加或者刪除可見(jiàn)的DOM元素

（2）元素的位置發(fā)生改變

（3）元素的尺寸發(fā)生變化

（4）內(nèi)容發(fā)生變化，比如文本變化或者圖片被另一個(gè)不同的尺寸的圖片所代替

（5）定位或者浮動(dòng)

（6）瀏覽器的窗口發(fā)生變化(因?yàn)榛亓魇歉鶕?jù)視口的大小來(lái)計(jì)算元素的位置和大小的)

• 如何減少回流和重繪？

（1）批量的修改DOM

（2）對(duì)于復(fù)雜的動(dòng)畫(huà)效果，使用絕對(duì)定位讓其脫離文檔流

(3)css硬件加速（GPU加速）transform、opacity、filters這些動(dòng)畫(huà)不會(huì)引起回流重繪。