一.H5面試題

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

用正確的標(biāo)簽做正確的事情，利于開發(fā)和維護(hù)

2.h5的新特性：

(1)關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加，比如：用于媒介回訪的video和audio元素，本地存儲localStorage，語義化標(biāo)簽，表單控件：date，time，email等

(2)移除元素：

純表現(xiàn)元素：basefont，big，center

3.cookie，sessionStorage和localStorage的區(qū)別:

cookie是網(wǎng)站為了標(biāo)示用戶身份而存儲再本地終端上的數(shù)據(jù)

cookie數(shù)據(jù)始終在同源的http請求中攜帶

sessionStorage和localStorage不會自動把數(shù)據(jù)發(fā)給服務(wù)器

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

sessionStorage和localStorage數(shù)據(jù)大小可達(dá)5mb

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

(1)處理html并構(gòu)建dom樹

(2)處理css構(gòu)建cssom樹

(3)將dom與cssom合并成一個(gè)渲染樹

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

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

5.重繪和回流

重繪：是當(dāng)節(jié)點(diǎn)需要更改外觀而不會影響布局，比如color

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

6.data：屬性的用法，有何優(yōu)勢？

data獲取和設(shè)置：

（1）傳統(tǒng)方法：

getAttribute()獲取data-屬性值，setAttribute()設(shè)置data-屬性值

（2）h5新方法：

dataset.xx獲取，dataset.xx='XX'設(shè)置

二。css面試題

1.display：none與visibility：hidden的區(qū)別

display：none會讓元素完全從渲染樹中消失，不占據(jù)空間，回流

visibility：hidden不會讓元素從dom樹小時(shí)，繼續(xù)占用空間，重繪

2.外邊距折疊

相鄰兩個(gè)盒子垂直方向margin會合并

浮動元素或行內(nèi)塊或絕對定位不會發(fā)生折疊

3.z-index是什么？

z-index屬性設(shè)置元素的堆疊順序，僅在定位元素上觸發(fā)

4.簡述box-sizing的有效值以及所對應(yīng)的盒模型規(guī)則

box-sizing：content-box;盒子所在區(qū)域由width，padding，border，margin組成

box-sizing：border-box;盒子所在區(qū)域由width，margin組成

5.移動端適配怎么做？

(1) viewport視口適配

(2)圖片適配：max-width

(3)媒體查詢

(4)rem(相對根元素html的font-size)，用js動態(tài)設(shè)置rem大小實(shí)現(xiàn)自動適配

6.什么是css3 transform？transition？animation？區(qū)別？

transform：描述元素靜態(tài)樣式，本身不會呈現(xiàn)動畫效果

transform：過渡，需要一個(gè)事件觸發(fā)

animation區(qū)別transform是自發(fā)的

7.父元素和子元素寬高不固定，如何實(shí)現(xiàn)水平垂直居中

(1).父元素彈性盒,子元素margin：auto

(2).父元素彈性盒，設(shè)置主軸和側(cè)軸居中

(3).父元素相對定位，子元素絕對定位，top，left50%，margin-left，margin-top元素本身的一半

(4).父元素相對定位，子元素絕對定位，top，left50%，transform：translate（-50%，-50%）

三.js面試題

1.js內(nèi)置對象

數(shù)據(jù)封裝對象：Object，Array,Boolean,Number,String

其他對象：Function,Math,Date

es6新增：Symbol,Map,Set,Proxy

2.如何最小化重繪和回流

需要對元素進(jìn)行復(fù)雜的操作時(shí)，可以使用dispaly：none先隱藏，操作完再顯示

需要?jiǎng)?chuàng)建多個(gè)dom節(jié)點(diǎn)是，使用docmentfragment創(chuàng)建完后一次性加入document

緩存layout屬性

盡量避免用table布局

3.js作用域鏈

全局函數(shù)無法查看局部函數(shù)的變量，但局部函數(shù)可以查看上層的變量

如果當(dāng)前作用域沒有找到屬性或方法，會向上層作用域查找，直至全局函數(shù)

4.數(shù)據(jù)請求

(1)xhr封裝

(2)fetch(w3c）解決回調(diào)地獄

(3)jsonp：解決跨域