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

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

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

對(duì)開發(fā)者：

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

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

對(duì)瀏覽器：

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

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

2、h5的新特性

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

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

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

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

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

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

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

移除的元素:

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

對(duì)可用性產(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.請(qǐng)描述一下 cookies，sessionStorage 和localStorage 的區(qū)別?

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

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

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

存儲(chǔ)大小:

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

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

有期時(shí)間:

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

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

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

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

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

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

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

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

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

③、將DOM、CSSOM合并成一個(gè)渲染樹

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

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

注意:

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

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

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

5、重繪和回流

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

回流是指當(dāng)頁(yè)面中的元素發(fā)生布局或幾何屬性發(fā)生變化時(shí)，瀏覽器需要重新計(jì)算元素的幾何屬性和頁(yè)面的布局，并重新繪制頁(yè)面，這個(gè)過程就稱為回流。回流的代價(jià)比較高昂，因?yàn)樗鼤?huì)導(dǎo)致其他元素的布局和繪制也需要重新計(jì)算和執(zhí)行，最終影響整個(gè)頁(yè)面的性能。

重繪是指當(dāng)頁(yè)面中的元素的樣式屬性發(fā)生變化時(shí)，瀏覽器只需要重新繪制這些元素的外觀，而不需要重新計(jì)算元素的幾何屬性和頁(yè)面布局，這個(gè)過程就稱為重繪。重繪的代價(jià)比較低廉，因?yàn)樗恍枰匦吕L制元素的樣式，而不需要重新計(jì)算元素的位置和大小。

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

為了優(yōu)化頁(yè)面性能，我們應(yīng)該盡量減少回流的發(fā)生?？梢圆扇∫韵聨追N方式來減少回流的發(fā)生:

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

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

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

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

（5）、批量修改DOM

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

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