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

就是用正確的標(biāo)簽做正確的事情。

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

對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，便于團(tuán)隊(duì)的開(kāi)發(fā)和維護(hù)，呈現(xiàn)出較好的內(nèi)容結(jié)構(gòu)和代碼結(jié)構(gòu)。

對(duì)瀏覽器來(lái)說(shuō)，有利于SEO，搜索引擎的爬蟲(chóng)依賴于標(biāo)簽來(lái)確定上下文和各個(gè)關(guān)鍵字的權(quán)重,利于無(wú)障礙說(shuō)讀等。

2.HTML5的新特性？

html現(xiàn)在主要是關(guān)于圖像，位置，存儲(chǔ)，多任務(wù)等功能的增加。

(1). video和audio元素可以用于音頻，視頻

(2).可以使用localStorage和sessionStrage進(jìn)行

本地存儲(chǔ)

• localStorage:長(zhǎng)期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉之后不會(huì)數(shù)據(jù)丟失
• sessionStrage：瀏覽器關(guān)閉之后自動(dòng)刪除數(shù)據(jù)

(3).語(yǔ)意化更好的內(nèi)容元素 比如 article， footer，header，nav，section

(4).表單控件(自行控件)：calendar(日歷)，date，time，

email，url，search

(5).新技術(shù)

• webworker：是html5中的一個(gè)API，它允許在瀏覽器中創(chuàng)建一個(gè)后臺(tái)線程，以便執(zhí)行消耗時(shí)的任務(wù)，而不會(huì)阻塞主線程。
• websocket：是html5中的一種通信協(xié)議，它提供了在web瀏覽器和服務(wù)器之間進(jìn)行實(shí)時(shí)雙向通信的能力。
• Geolocation：是html5中的一個(gè)API，它可以獲取用戶設(shè)備的地理位置信息。

支持html5新標(biāo)簽

• IE8/IE7/IE6 支持通過(guò)document.createElement方法產(chǎn)生的標(biāo)簽。
• 可以利用這一特征讓這些瀏覽器支持html5新標(biāo)簽
• 瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的一些樣式

可以直接使用成熟的框架

比如：html5shim

如何區(qū)分HTML5：

• doctype聲明
• 新增的結(jié)構(gòu)元素
• 功能元素

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

使用上面

• cookie：是網(wǎng)站為了標(biāo)示用戶身份而存儲(chǔ)在用戶本地終端上的數(shù)據(jù)（通常經(jīng)過(guò)加密）
• cookie：數(shù)據(jù)始終在同源的http請(qǐng)求中攜帶，會(huì)在瀏覽器和服務(wù)器之間來(lái)回傳遞。
• sessionStorage和localStorage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅是在本地保存。

存儲(chǔ)大小

• cookie：數(shù)據(jù)大小不能超過(guò)4k
• sessionStorage和localStorage雖然有存儲(chǔ)大小的限制，但比cookie大的多，可以達(dá)到5M或者更大

有期時(shí)間

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

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

cookie：設(shè)置過(guò)期時(shí)間，在有效期時(shí)間內(nèi)就一直有效，即使窗口或?yàn)g覽器關(guān)閉數(shù)據(jù)不會(huì)丟失。

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

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

js渲染注意的問(wèn)題：

• 在構(gòu)建 CSSOM 樹(shù)時(shí)，會(huì)塞染，直至 CSSOM 構(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ì)影響布局的，比如改變字體顏色...就稱為重繪。

回流是指布局或者幾何屬性需要改變就成為回流(需要計(jì)算它們?cè)谠O(shè)備視口內(nèi)的確切位置和大小)

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

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

• 添加或者刪除可見(jiàn)的DOM元素
• 元素的位置發(fā)生改變
• 元素的尺寸發(fā)生變化
• 內(nèi)容發(fā)生變化，比如文本變化或者圖片被另一個(gè)不同的尺寸的圖片所代替
• 定位或者浮動(dòng)
• 瀏覽器的窗口發(fā)生變化(因?yàn)榛亓魇歉鶕?jù)視口的大小來(lái)計(jì)算元素的位置和大小的)

如何減少回流和重繪？

• 批量的修改DOM
• 對(duì)于復(fù)雜的動(dòng)畫(huà)效果，使用絕對(duì)定位讓其脫離文檔流
• css硬件加速（GPU加速）transform、opacity、filters這些動(dòng)畫(huà)不會(huì)引起回流重繪。