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

在合適的時候用合適的標(biāo)簽做合適的事情

段落用p標(biāo)簽，標(biāo)題用h系列標(biāo)簽，邊欄用aside標(biāo)簽，主要內(nèi)容用main標(biāo)簽

對開發(fā)者：

①、便于團(tuán)隊開發(fā)和維護(hù)

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

對瀏覽器：

有利于SEO，搜索引擎的爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重

方便其他設(shè)備的解析（如屏幕閱讀器、盲人閱讀器等），利于無障礙閱讀，提高可訪問性

2、h5的新特性

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

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

②本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失

③sessionStorage 的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除

④語意化更好的內(nèi)容元素，比如 article、footer、header、nav、section

⑤表單控件，calendar（日歷）、date、time、email、url、search

⑥新的技術(shù)webworker：開啟一個子線程, websocket, Geolocation：獲取地理位置

移除的元素:

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

對可用性產(chǎn)生負(fù)面影響的元素: frame，frameset，noframes

支持HTML5新標(biāo)簽

IE8/IE7/1E6支持通過document.createElemert方法產(chǎn)生的標(biāo)簽。

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

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

3.請描述一下 cookies，sessionStorage 和localStorage 的區(qū)別?

cookie是網(wǎng)站為了標(biāo)示用戶身份而儲存在用戶本地終端 (Client Side) 上的數(shù)據(jù)(通常經(jīng)過加密)

cookie數(shù)據(jù)始終在同源的http請求中攜帶 (即使不需要)，記會在瀏覽器和服務(wù)器間來回傳遞

sessionstorage和localstorage 不會自動把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存

存儲大小:

cookie數(shù)據(jù)大小不能超過4k

sessionstorage和localstorage 雖然也有存儲大小的限制，但比cookie大得多，可以達(dá)到5M或更大

有期時間:

localstorage 存儲持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動刪除數(shù)據(jù)

sessionstorage 數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動刪除

cookie 設(shè)置的 cookie過期時間之前一直有效，即使窗口或瀏覽器關(guān)閉

【cookie】：有一個無狀態(tài)的http協(xié)議，每次請求，對于服務(wù)端而言并不知道你是誰，可以使用cookie來標(biāo)識當(dāng)前使用者的身份，所以引入了cookie。一旦被人竊取，別人有可能會模擬自己登錄網(wǎng)站。cookie是在在本地存儲的，可以理解為在瀏覽器下的某個文件夾中進(jìn)行加密存儲，document.cookie獲取，cookie數(shù)據(jù)始終在同源的http請求中自動攜帶到服務(wù)端，服務(wù)端也可以自動設(shè)置本地的cookie，這樣就可以與服務(wù)端進(jìn)行交互，這是與localStorage和sessionStorage的不同之處，localStorage和sessionStorag不會自動的把數(shù)據(jù)發(fā)給服務(wù)器，僅可以在前端中對js進(jìn)行設(shè)置

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

①、處理HTML并構(gòu)建DOM樹

瀏覽器開始處理HTML，根據(jù)HTML標(biāo)簽構(gòu)建DOM樹，并且實現(xiàn)對于DDOM樹操作的api渲染完成

②、處理css構(gòu)建CSSOM樹

操作css的api做好了準(zhǔn)備

③、將DOM、CSSOM合并成一個渲染樹

④、根據(jù)渲染樹來布局，計算每個節(jié)點的位置

⑤、調(diào)用GPU繪制，合成圖層，顯示在屏幕上

注意:

在構(gòu)建 CSSOM 樹時，會阻塞頁面渲染【非常消耗性能】，直至 CSSOM 樹構(gòu)建完成。并且構(gòu)建 CSSOM 樹是一個十分消耗性能的過程，所以應(yīng)該盡量保證層級扁平，減少過度層疊，越是具體的 CSS 選擇器，執(zhí)行速度越慢

當(dāng)HTML 解析到 script 標(biāo)簽時，會暫停構(gòu)建 DOM，完成后才會從暫停的地方重新開始。也就是說，如果你想首屏渲染的越快，就越不應(yīng)該在首屏就加載JS 文件

【這種問題的另外問法【我要把一個網(wǎng)頁渲染在瀏覽器端發(fā)生了什么，網(wǎng)頁是如何被渲染在瀏覽器端的】】

5、重繪和回流

重繪和回流也會影響頁面性能，怎樣優(yōu)化頁面（少做回流相關(guān)的操作）

回流是指當(dāng)頁面中的元素發(fā)生布局或幾何屬性發(fā)生變化時，瀏覽器需要重新計算元素的幾何屬性和頁面的布局，并重新繪制頁面，這個過程就稱為回流?；亓鞯拇鷥r比較高昂，因為它會導(dǎo)致其他元素的布局和繪制也需要重新計算和執(zhí)行，最終影響整個頁面的性能。

重繪是指當(dāng)頁面中的元素的樣式屬性發(fā)生變化時，瀏覽器只需要重新繪制這些元素的外觀，而不需要重新計算元素的幾何屬性和頁面布局，這個過程就稱為重繪。重繪的代價比較低廉，因為它只需要重新繪制元素的樣式，而不需要重新計算元素的位置和大小。

回流一定發(fā)生重繪，重繪不一定發(fā)生回流，回流所需的成本比重繪高，改變深層次的節(jié)點很可能導(dǎo)致父節(jié)點的一系列回流

為了優(yōu)化頁面性能，我們應(yīng)該盡量減少回流的發(fā)生。可以采取以下幾種方式來減少回流的發(fā)生:

（1）、避免頻繁操作樣式:多次修改元素的樣式會導(dǎo)致多次回流，可以將樣式的修改集中在一起，減少回流的次數(shù)。

（2）、使用文檔碎片(DocumentFragment): 將多個元素的修改先保存在文檔碎片中，最后一次性添加到頁面中，可以減少回流的次數(shù)。

（3）、緩存布局信息:在JavaScript中，獲取元素的布局信息(如位置、大小等)會觸發(fā)回流，可以將布局信息緩存起來，避免重復(fù)獲取。

（4）、避免強(qiáng)制同步布局:在JavaScript中，使用某些方法(如offsetLeft、scrollLeft等)獲取元素的布局信息時，會強(qiáng)制瀏覽器同步布局，可以使用異步的方式獲取布局信息，避免強(qiáng)制同步布局。

（5）、批量修改DOM

（6）、對于復(fù)雜動畫效果，使用絕對定位讓其脫離文檔流

（7）、css3硬件加速（GPU加速）transform、opacity、filters這些動畫不會引起回流重繪