web前端面試官會問什么?這個也要分人分基礎(chǔ)，如果你是應(yīng)屆生的話，面試官可能會問一些偏重書本上的知識，如果你有工作經(jīng)驗，面試官可能會問一些與項目結(jié)合的問題來了解你的技術(shù)水平、邏輯思維以及學習狀態(tài)。
1.什么是盒子模型?盒子模型有哪些類型?如何計算?
css中所有的html元素都可以看成一個盒子，盒子模型包括margin border padding content
盒子模型分為兩類：W3C盒子模型和IE盒子模型。
W3C盒子計算：margin+border+padding+width
IE盒子計算： margin+width
2.描述cookies、sessionStorage和localStorage的區(qū)別
(1)數(shù)據(jù)存儲大小限制不同。
cookies：數(shù)據(jù)始終攜帶在同源https請求中，即cookies可以在服務(wù)器和瀏覽器之間傳回。所以存儲的數(shù)據(jù)量最小，一般為4096B。
sessionStorage：數(shù)據(jù)存儲在本地，不會自動發(fā)送到服務(wù)器。一般5M以上
localStorage：數(shù)據(jù)存儲在本地，不會自動發(fā)送到服務(wù)器。一般5M以上
(2)數(shù)據(jù)有效期不同。
Cookies：數(shù)據(jù)在 cookie 設(shè)置的過期日期之前有效，即使窗口和瀏覽器已關(guān)閉。
sessionStorage：關(guān)閉瀏覽器窗口后自動清除數(shù)據(jù)。存儲的數(shù)據(jù)只在同一個源窗口有效，即使在不同瀏覽器的同一個頁面也是無效的，一般用于session數(shù)據(jù)的存儲
localStorage：一直有效，所以作為持久化數(shù)據(jù)使用
(3)數(shù)據(jù)范圍不同。
cookies、localStorage：在所有同源窗口之間敏感共享
sessionStorage：不再在不同瀏覽器窗口之間共享
同源窗口共享是一款連接PC和移動設(shè)備的軟件。使用同源窗口共享，您可以輕松地在 PC 和移動設(shè)備之間共享屏幕內(nèi)容和數(shù)據(jù)。
3.什么是內(nèi)聯(lián)元素?什么是塊級元素?什么是空(void)元素?
內(nèi)聯(lián)元素包括：a、b、span、img、input、strong、select、label、em、button、textarea等;
塊級元素包括：div、ul、li、dl、dt、dd、p、h1-h6、blockquote等;
空元素(沒有內(nèi)容的html元素)是：br、meta、hr、link、input、img。
4. 'data-attribute' 的目的是什么?
data-attribute是html5引入的新特性。前端開發(fā)者可以使用它來設(shè)置需要的自定義屬性來存儲一些數(shù)據(jù)。當然，在高級瀏覽器中，可以通過 JS 腳本進行定義和數(shù)據(jù)訪問。
5.iframe 有什么作用?的優(yōu)點和缺點?
iframe稱為內(nèi)嵌框架，用于為文本或圖形設(shè)置浮動框架或容器;
優(yōu)點是：
①.iframe可以完整顯示嵌入的網(wǎng)頁。
②.如果有多個網(wǎng)頁引用了iframe，只需要修改iframe的內(nèi)容就可以改變每個被調(diào)用頁面的內(nèi)容，方便快捷。
③。如果網(wǎng)頁為了統(tǒng)一樣式而有相同的header和version，可以寫成一個page，用iframe嵌套，這樣可以增加代碼的復(fù)用性。
④.可以解決圖標、廣告等第三方內(nèi)容加載緩慢的問題。
⑤。重新加載頁面時，不需要重新加載整個頁面，只需要重新加載頁面中的一幀頁面，減少了數(shù)據(jù)的傳輸，提高了網(wǎng)頁的下載速度
缺點是：
①。頁面樣式調(diào)試比較麻煩，會有多個滾動條，而且會生成多個頁面，不好打印;
②.瀏覽器的返回按鈕不可用;
③。如果 iframe 標簽過多，會增加服務(wù)器的 HTTP 請求;
④.小型移動設(shè)備無法充分顯示邊框，即設(shè)備兼容性差;
⑤.代碼復(fù)雜，部分搜索引擎無法解析。
6.您如何優(yōu)化您的網(wǎng)站文件和資源?
文件合并、文件壓縮、使用cdn(內(nèi)容分發(fā)網(wǎng)絡(luò))托管您的資產(chǎn)、使用緩存、優(yōu)化元標記、啟用css/js文件的Gzip壓縮
將css/js文件放在外部文件中，避免寫在同一個頁面，引用時把css放在最上面，把js放在最下面等等。
7.常見的瀏覽器兼容性問題?您使用哪些瀏覽器來調(diào)試您的項目?他們的核心是什么?
①不同瀏覽器的標簽?zāi)J的外補丁(margin)和內(nèi)補丁(padding)是不同的;
②圖片之間有默認間距;
③邊距重疊問題;當相鄰的兩個元素都設(shè)置了邊距時，邊距取最大值，舍棄最小值;
④兩個塊級元素，父元素設(shè)置為overflow:auto;子元素設(shè)置為位置：相對;并且高度大于父元素，在IE6、IE7中會隱藏而不是溢出;
⑤IE9以下的瀏覽器不能使用不透明度;
⑥當標簽的高度設(shè)置為小于10px時，會超過自己在IE中設(shè)置的高度6、IE7;
⑦IE6雙邊距問題;如果在IE6中設(shè)置了float，同時設(shè)置了margin，就會出現(xiàn)margin問題。
使用谷歌瀏覽器、QQ瀏覽器、火狐瀏覽器，內(nèi)核分別為Webkit、webkit和IE內(nèi)核、Gecko內(nèi)核
8.javascript 數(shù)據(jù)類型：
值類型(基本類型)：String、Number、Boolean、Null、Undefined、Symbol。
參考數(shù)據(jù)類型：對象(Object)、數(shù)組(Array)、函數(shù)(Function)。
9.js中var和let與const的區(qū)別
var聲明的變量屬于函數(shù)作用域，let和const聲明的變量屬于塊作用域;
Var有變量提升的現(xiàn)象，而let和const則沒有;
var變量可以重復(fù)聲明，而在同一個塊級作用域內(nèi)，let變量不能重新聲明，const變量不能修改。
10.有哪些方法可以清除浮標?
(1)父div定義overflow：隱藏
(2)在clear末尾添加一個空div標簽：both
(3)父div定義height
(4)父div定義overf：auto
(5)使用偽元素，父div定義偽類：after(必須設(shè)置內(nèi)容)
上述知識列舉了一些常見的web前端面試官會問什么的問題，供大家參考，實際面試時可能被問到的問題比這要多得多，同學們還是要多看多積累。更多關(guān)于“web前端培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學，課程大綱緊跟企業(yè)需求，更科學更嚴謹，每年培養(yǎng)泛IT人才近2萬人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時歡迎你來試聽。
京公網(wǎng)安備 11010802030320號