web前端面試官會(huì)問(wèn)什么?這個(gè)也要分人分基礎(chǔ)，如果你是應(yīng)屆生的話，面試官可能會(huì)問(wèn)一些偏重書(shū)本上的知識(shí)，如果你有工作經(jīng)驗(yàn)，面試官可能會(huì)問(wèn)一些與項(xiàng)目結(jié)合的問(wèn)題來(lái)了解你的技術(shù)水平、邏輯思維以及學(xué)習(xí)狀態(tài)。

　　1.什么是盒子模型?盒子模型有哪些類型?如何計(jì)算?

　　css中所有的html元素都可以看成一個(gè)盒子，盒子模型包括margin border padding content

　　盒子模型分為兩類：W3C盒子模型和IE盒子模型。

　　W3C盒子計(jì)算：margin+border+padding+width

　　IE盒子計(jì)算： margin+width

　　2.描述cookies、sessionStorage和localStorage的區(qū)別

　　(1)數(shù)據(jù)存儲(chǔ)大小限制不同。

　　cookies：數(shù)據(jù)始終攜帶在同源https請(qǐng)求中，即cookies可以在服務(wù)器和瀏覽器之間傳回。所以存儲(chǔ)的數(shù)據(jù)量最小，一般為4096B。

　　sessionStorage：數(shù)據(jù)存儲(chǔ)在本地，不會(huì)自動(dòng)發(fā)送到服務(wù)器。一般5M以上

　　localStorage：數(shù)據(jù)存儲(chǔ)在本地，不會(huì)自動(dòng)發(fā)送到服務(wù)器。一般5M以上

　　(2)數(shù)據(jù)有效期不同。

　　Cookies：數(shù)據(jù)在 cookie 設(shè)置的過(guò)期日期之前有效，即使窗口和瀏覽器已關(guān)閉。

　　sessionStorage：關(guān)閉瀏覽器窗口后自動(dòng)清除數(shù)據(jù)。存儲(chǔ)的數(shù)據(jù)只在同一個(gè)源窗口有效，即使在不同瀏覽器的同一個(gè)頁(yè)面也是無(wú)效的，一般用于session數(shù)據(jù)的存儲(chǔ)

　　localStorage：一直有效，所以作為持久化數(shù)據(jù)使用

　　(3)數(shù)據(jù)范圍不同。

　　cookies、localStorage：在所有同源窗口之間敏感共享

　　sessionStorage：不再在不同瀏覽器窗口之間共享

　　同源窗口共享是一款連接PC和移動(dòng)設(shè)備的軟件。使用同源窗口共享，您可以輕松地在 PC 和移動(dòng)設(shè)備之間共享屏幕內(nèi)容和數(shù)據(jù)。

　　3.什么是內(nèi)聯(lián)元素?什么是塊級(jí)元素?什么是空(void)元素?

　　內(nèi)聯(lián)元素包括：a、b、span、img、input、strong、select、label、em、button、textarea等;

　　塊級(jí)元素包括：div、ul、li、dl、dt、dd、p、h1-h6、blockquote等;

　　空元素(沒(méi)有內(nèi)容的html元素)是：br、meta、hr、link、input、img。

　　4. 'data-attribute' 的目的是什么?

　　data-attribute是html5引入的新特性。前端開(kāi)發(fā)者可以使用它來(lái)設(shè)置需要的自定義屬性來(lái)存儲(chǔ)一些數(shù)據(jù)。當(dāng)然，在高級(jí)瀏覽器中，可以通過(guò) JS 腳本進(jìn)行定義和數(shù)據(jù)訪問(wèn)。

　　5.iframe 有什么作用?的優(yōu)點(diǎn)和缺點(diǎn)?

　　iframe稱為內(nèi)嵌框架，用于為文本或圖形設(shè)置浮動(dòng)框架或容器;

　　優(yōu)點(diǎn)是：

　?、?iframe可以完整顯示嵌入的網(wǎng)頁(yè)。

　?、?如果有多個(gè)網(wǎng)頁(yè)引用了iframe，只需要修改iframe的內(nèi)容就可以改變每個(gè)被調(diào)用頁(yè)面的內(nèi)容，方便快捷。

　?、?。如果網(wǎng)頁(yè)為了統(tǒng)一樣式而有相同的header和version，可以寫(xiě)成一個(gè)page，用iframe嵌套，這樣可以增加代碼的復(fù)用性。

　?、?可以解決圖標(biāo)、廣告等第三方內(nèi)容加載緩慢的問(wèn)題。

　?、?。重新加載頁(yè)面時(shí)，不需要重新加載整個(gè)頁(yè)面，只需要重新加載頁(yè)面中的一幀頁(yè)面，減少了數(shù)據(jù)的傳輸，提高了網(wǎng)頁(yè)的下載速度

　　缺點(diǎn)是：

　?、?。頁(yè)面樣式調(diào)試比較麻煩，會(huì)有多個(gè)滾動(dòng)條，而且會(huì)生成多個(gè)頁(yè)面，不好打印;

　　②.瀏覽器的返回按鈕不可用;

　?、?。如果 iframe 標(biāo)簽過(guò)多，會(huì)增加服務(wù)器的 HTTP 請(qǐng)求;

　?、?小型移動(dòng)設(shè)備無(wú)法充分顯示邊框，即設(shè)備兼容性差;

　?、?代碼復(fù)雜，部分搜索引擎無(wú)法解析。

　　6.您如何優(yōu)化您的網(wǎng)站文件和資源?

　　文件合并、文件壓縮、使用cdn(內(nèi)容分發(fā)網(wǎng)絡(luò))托管您的資產(chǎn)、使用緩存、優(yōu)化元標(biāo)記、啟用css/js文件的Gzip壓縮

　　將css/js文件放在外部文件中，避免寫(xiě)在同一個(gè)頁(yè)面，引用時(shí)把css放在最上面，把js放在最下面等等。

　　7.常見(jiàn)的瀏覽器兼容性問(wèn)題?您使用哪些瀏覽器來(lái)調(diào)試您的項(xiàng)目?他們的核心是什么?

　?、俨煌瑸g覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)丁(margin)和內(nèi)補(bǔ)丁(padding)是不同的;

　?、趫D片之間有默認(rèn)間距;

　　③邊距重疊問(wèn)題;當(dāng)相鄰的兩個(gè)元素都設(shè)置了邊距時(shí)，邊距取最大值，舍棄最小值;

　　④兩個(gè)塊級(jí)元素，父元素設(shè)置為overflow:auto;子元素設(shè)置為位置：相對(duì);并且高度大于父元素，在IE6、IE7中會(huì)隱藏而不是溢出;

　?、軮E9以下的瀏覽器不能使用不透明度;

　?、蕻?dāng)標(biāo)簽的高度設(shè)置為小于10px時(shí)，會(huì)超過(guò)自己在IE中設(shè)置的高度6、IE7;

　?、逫E6雙邊距問(wèn)題;如果在IE6中設(shè)置了float，同時(shí)設(shè)置了margin，就會(huì)出現(xiàn)margin問(wèn)題。

　　使用谷歌瀏覽器、QQ瀏覽器、火狐瀏覽器，內(nèi)核分別為Webkit、webkit和IE內(nèi)核、Gecko內(nèi)核

　　8.javascript 數(shù)據(jù)類型：

　　值類型(基本類型)：String、Number、Boolean、Null、Undefined、Symbol。

　　參考數(shù)據(jù)類型：對(duì)象(Object)、數(shù)組(Array)、函數(shù)(Function)。

　　9.js中var和let與const的區(qū)別

　　var聲明的變量屬于函數(shù)作用域，let和const聲明的變量屬于塊作用域;

　　Var有變量提升的現(xiàn)象，而let和const則沒(méi)有;

　　var變量可以重復(fù)聲明，而在同一個(gè)塊級(jí)作用域內(nèi)，let變量不能重新聲明，const變量不能修改。

　　10.有哪些方法可以清除浮標(biāo)?

　　(1)父div定義overflow：隱藏

　　(2)在clear末尾添加一個(gè)空div標(biāo)簽：both

　　(3)父div定義height

　　(4)父div定義overf：auto

　　(5)使用偽元素，父div定義偽類：after(必須設(shè)置內(nèi)容)

　　上述知識(shí)列舉了一些常見(jiàn)的web前端面試官會(huì)問(wèn)什么的問(wèn)題，供大家參考，實(shí)際面試時(shí)可能被問(wèn)到的問(wèn)題比這要多得多，同學(xué)們還是要多看多積累。更多關(guān)于“web前端培訓(xùn)”的問(wèn)題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬(wàn)人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時(shí)歡迎你來(lái)試聽(tīng)。