很多小伙伴在面試的時候會遇到各種各樣的面試題。同樣從一個學校出來的大學生，經常在面試的時候面臨不同的結局，并不一定是部分同學掌握的知識不夠豐富，更多的時候是因為在面試的時候無法系統的解答面試官的問題。所以多參考一下經典的web前端面試題，對未來的就業會有很大的幫助。

1.display:none; 和visibility:hidden;

display:none; 徹底消失，釋放空間。可能引發頁面的reflow回流(重排)。

visibility:hidden; 就是隱藏，但是位置沒釋放，好比opacity:0; 不會引發頁面回流。

2.你做的頁面在哪些瀏覽器內核中測試過

1、IE瀏覽器內核：Trident內核，也是俗稱的IE內核;

2、Chrome瀏覽器內核：統稱為Chromium內核或Chrome內核，以前是Webkit內核，現在是Blink內核;

3、Firefox瀏覽器內核：Gecko內核，俗稱Firefox內核;

4、Safari瀏覽器內核：Webkit內核;

5、Opera瀏覽器內核：最初是自己的Presto內核，后來是Webkit，現在是Blink內核 ;

6、360瀏覽器、獵豹瀏覽器內核：IE+Chrome雙內核;

7、搜狗、遨游、QQ瀏覽器內核：Trident(兼容模式)+Webkit(高速模式);

8、百度瀏覽器、世界之窗內核：IE內核;

9、2345瀏覽器內核：以前是IE內核，現在也是IE+Chrome雙內核

3.CSS 選擇器權重如何計算

就近原則：直接選中的，一定比繼承的權重大。

一樣近，比權重：id是100，class是10，標簽是1， 總數權重一樣誰寫在下面聽誰的。

行內 > 內嵌 = 外聯 > 導入 !important能夠提升權限，但是不能提升繼承的 class="a b c" 和掛載順序無關，看寫的順序

4.web 前端開發，如何提高頁面性能優化(常問)

1.減少http請求次數

2.從用戶的角度講，靜態資源(圖片，css，js)都使用cdn，cdn就是一組分布在不同地方的web服務器，用戶離服務器更近，請求的時間就更短

3.講css放在文件頭部，js文件放在底部(資源加載是，自上而下的，先加載css會讓用戶感覺頁面加載更快)

4.盡可能使用iconfont代替圖片圖標

5.善用緩存，不重復加載相同的資源(數據如果要重復使用，就可以使用緩存，不要重復請求)

6.圖片懶加載(當滾動條，滾動到一定值的時候，再加載)，

不要縮放圖片(例如你要50*50的圖片，就不要拿500乘以500的大圖片，影響加載)

降低圖片質量

盡可能用css來代替圖片(例如漸變，陰影)

使用webp格式圖片

5.什么叫優雅降級和漸進漸強

優雅降級和漸進漸強 是瀏覽器兼容的兩種方案。

1、優雅降級： 能力檢測，如果能力有用新的;如果能力沒有，用舊的。(先從高級功能實現，后面在逐級降低)

2、漸進漸強： 低端瀏覽器僅實現基本功能，高級瀏覽器實現額外功能。 (先實現基本功能。然后在實現高級功能)

比如上傳文件，低端瀏覽器就給它提供上傳按鈕，高端瀏覽器增加外部拖拽文件上傳。

6.如何形成 BFC

BFC是塊級格式化上下文。

理論上講，頁面上所有的盒子必須都裝到BFC盒子中，頁面渲染才快。

BFC的形成：

① 有明確寬度、高度的盒子。

② overflow:hidden;

③ 定位的、浮動的

④ display ：inline-block，

BFC的性質： 內部有浮動，能清除這些浮動，能為浮動元素撐高。

7.CSS 的盒模型

1、標準盒模型：

范圍：margin、border、padding、content

在標準盒子模型中，width 和 height 指的是內容區域的寬度和高度。

增加內邊距、邊框和外邊距不會影響內容區域的尺寸，但是會增加元素框的總尺寸。

標準盒模型下盒子的大小 = content + border + padding + margin

2、IE盒子模型(怪異盒模型)中

范圍：margin、border、padding、content都有，但是不同是content包含border、padding

width 和 height 指的是content+border+padding的寬度和高度。

怪異盒模型下盒子的大小=width(content + border + padding) + margin

3、盒模型的選擇

可以為box-sizing賦三個值：

content-box： 默認值，border和padding不算到width范圍內，可以理解為是W3c的標準模型(default)

border-box：border和padding劃歸到width范圍內，可以理解為是IE的怪異盒模型

padding-box：將padding算入width范圍

當設置為box-sizing:content-box時，將采用標準模式解析計算(默認模式);

當設置為box-sizing:border-box時，將采用怪異模式解析計算;

9.如何垂直水平居中一個元素(常問)

1、彈性布局：display:flex; justify‐content: center; align‐items: center;

2、定位

3、display:inline-block配合text-align:center

10.對單位px、em、rem、vh、vw的理解

px物理像素，絕對值;

em相對于父級的大小，相對值;

rem相對于html的大小，相對 值;

vh相對于屏幕的高度，相對值;vw相對于屏幕的寬度，相對值

以上就是“web前端工程師面試題，提高成功率”，你能回答上來嗎?如果想要了解更多的Java面試題相關內容，可以關注動力節點Java官網。