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

簡單來說，我們可以理解為:用正確的標(biāo)簽做正確的事情。

段落用p標(biāo)簽，標(biāo)題用h系列標(biāo)簽，邊欄用aside標(biāo)簽，主要內(nèi)容用rmain標(biāo)簽。對開發(fā)者:

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

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

對瀏覽器:

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

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

2.html5的新特性?

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

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

。本地離線存儲(chǔ)localStorage長期存儲(chǔ)數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失o sessionStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動(dòng)刪除

。語意化更好的內(nèi)容元素，比如article、footer.

header、nav、section

。表單控件，calendar、date、time、email、url、search

。新的技術(shù)webworker, websocket, Geolocatiol

n

移除的元素:

。純表現(xiàn)的元素: basefont，big,center，for

nt, s,strike,tt,u

。對可用性產(chǎn)生負(fù)面影響的元素: frame,frameset,noframes支持HTML5新標(biāo)簽:

o IE8/IE7/IE6支持通過document.createElement方法產(chǎn)生的標(biāo)簽?？梢岳眠@一特性讓這些瀏覽器支持HTML53

新標(biāo)簽

。瀏覽器支持新標(biāo)簽后，還需要添加標(biāo)簽?zāi)J(rèn)的樣式當(dāng)然也可以直接使用成熟的框架、比如html5shim

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

. cookie是網(wǎng)站為了標(biāo)示用戶身份而儲(chǔ)存在用戶本地終端(Client Side)上的數(shù)據(jù)（通常經(jīng)過加密)cookie數(shù)據(jù)始終在同源的http請求中攜帶（即使不需要)，記會(huì)在瀏覽器和服務(wù)器間來回傳遞sessionstorage和1oca1storage不會(huì)自動(dòng)把數(shù)據(jù)發(fā)給服務(wù)器，僅在本地保存

·存儲(chǔ)大小:

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

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

I

·有期時(shí)間:

o loca1storage存儲(chǔ)持久數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失除非主動(dòng)刪除數(shù)據(jù)o sessionstorage數(shù)據(jù)在當(dāng)前瀏覽器窗口關(guān)閉后自動(dòng)刪除

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

4.瀏覽器的渲染機(jī)制一般分為幾個(gè)步驟?·處理HTML并構(gòu)建DoM樹。

。處理css構(gòu)建csSOM樹。

將DoM與cSSOM合并成一個(gè)渲染樹。根據(jù)渲染樹來布局，計(jì)算每個(gè)節(jié)點(diǎn)的位置。調(diào)用GPU 繪制，合成圖層，顯示在屏幕上。注意:

·在構(gòu)建 CSSOM樹時(shí)，會(huì)阻塞渲染，直至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文件。

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

·重繪是當(dāng)節(jié)點(diǎn)需要更改外觀而不會(huì)影響布局的，比如改變color就叫稱為重繪

·回流是布局或者幾何屬性需要改變就稱為回流（需要計(jì)算它們在設(shè)備視口(viewport)內(nèi)的確切位置和大小)

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

所以以下幾個(gè)動(dòng)作可能會(huì)導(dǎo)致性能問題:

添加或刪除可見的DOM元素

·元素的位置發(fā)生變化

·元素的尺寸發(fā)生變化(包括外邊距、內(nèi)邊框、邊框大小、

高度和寬度等)

·內(nèi)容發(fā)生變化，比如文本變化或圖片被另一個(gè)不同尺寸的圖片所替代。·定位或者浮動(dòng)

瀏覽器的窗口尺寸變化(因?yàn)榛亓魇歉鶕?jù)視口的大小來計(jì)算元素的位置和大小的)

減少重繪和回流

批量修改DOM

·對于復(fù)雜動(dòng)畫效果,使用絕對定位讓其脫離文檔流

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

6.簡述data:屬性的用法（如何設(shè)置，如何獲取)，有何優(yōu)勢?data-*的值的獲取和設(shè)置，2種方法:

1）傳統(tǒng)方法getAttribute()獲取data-屬性值; setAttribute()設(shè)置data-屬性值getAttribute()獲取data-屬性值;

setAttribute()設(shè)置data-屬性值2)HTML5新方法

例如data-kerwin

dataset.kerwin 獲取data-kerwin屬性值

dataset.kerwin =“趙錢孫李”設(shè)置data-kerwin屬性值注意:

·傳統(tǒng)方法無兼容性問題，但是不夠優(yōu)雅、方便HTML5新方法很優(yōu)雅、方便，但是有兼容性問題。

優(yōu)勢:自定義的數(shù)據(jù)可以讓頁面擁有更好的交互體驗(yàn)（(不需要使用Ajax或去服務(wù)端查詢數(shù)據(jù))

二.CSS面試題

1. display: none;與visibility: hidden;的區(qū)別·聯(lián)系∶它們都能讓元素不可見

·區(qū)別:

display : none ;會(huì)讓元素完全從渲染樹中消失,

渲染的時(shí)候不占據(jù)任何空間;visibility: hidden;不

會(huì)讓元素從渲染樹消失，渲染師元素繼續(xù)占據(jù)空間，只是內(nèi)容不可見

修改常規(guī)流中元素的display通常會(huì)造成文檔重排。修改visibility屬性只會(huì)造成本元素的重繪2.外邊距折疊(collapsing margins)

毗鄰的兩個(gè)或多個(gè)margin會(huì)合并成一個(gè)margin

叫做外邊距折疊。規(guī)則如下:

兩個(gè)或多個(gè)毗鄰的普通流中的塊元素垂直方向上的margin會(huì)折疊

浮動(dòng)元素或in7ine-block元素或絕對定位元素的margin不會(huì)和垂直方向上的其他元素的margin折疊。創(chuàng)建了塊級(jí)格式化上下文（BFC)的元素，不會(huì)和它的子元素發(fā)生margin折疊