很多小伙伴在面試的時(shí)候會(huì)遇到各種各樣的面試題。同樣從一個(gè)學(xué)校出來(lái)的大學(xué)生，經(jīng)常在面試的時(shí)候面臨不同的結(jié)局，并不一定是部分同學(xué)掌握的知識(shí)不夠豐富，更多的時(shí)候是因?yàn)樵诿嬖嚨臅r(shí)候無(wú)法系統(tǒng)的解答面試官的問(wèn)題。所以多參考一下經(jīng)典的web前端面試題，對(duì)未來(lái)的就業(yè)會(huì)有很大的幫助。

1.display:none; 和visibility:hidden;

display:none; 徹底消失，釋放空間?？赡芤l(fā)頁(yè)面的reflow回流(重排)。

visibility:hidden; 就是隱藏，但是位置沒(méi)釋放，好比opacity:0; 不會(huì)引發(fā)頁(yè)面回流。

2.你做的頁(yè)面在哪些瀏覽器內(nèi)核中測(cè)試過(guò)

1、IE瀏覽器內(nèi)核：Trident內(nèi)核，也是俗稱(chēng)的IE內(nèi)核;

2、Chrome瀏覽器內(nèi)核：統(tǒng)稱(chēng)為Chromium內(nèi)核或Chrome內(nèi)核，以前是Webkit內(nèi)核，現(xiàn)在是Blink內(nèi)核;

3、Firefox瀏覽器內(nèi)核：Gecko內(nèi)核，俗稱(chēng)Firefox內(nèi)核;

4、Safari瀏覽器內(nèi)核：Webkit內(nèi)核;

5、Opera瀏覽器內(nèi)核：最初是自己的Presto內(nèi)核，后來(lái)是Webkit，現(xiàn)在是Blink內(nèi)核 ;

6、360瀏覽器、獵豹瀏覽器內(nèi)核：IE+Chrome雙內(nèi)核;

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

8、百度瀏覽器、世界之窗內(nèi)核：IE內(nèi)核;

9、2345瀏覽器內(nèi)核：以前是IE內(nèi)核，現(xiàn)在也是IE+Chrome雙內(nèi)核

3.CSS 選擇器權(quán)重如何計(jì)算

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

一樣近，比權(quán)重：id是100，class是10，標(biāo)簽是1， 總數(shù)權(quán)重一樣誰(shuí)寫(xiě)在下面聽(tīng)誰(shuí)的。

行內(nèi) > 內(nèi)嵌 = 外聯(lián) > 導(dǎo)入 !important能夠提升權(quán)限，但是不能提升繼承的 class="a b c" 和掛載順序無(wú)關(guān)，看寫(xiě)的順序

4.web 前端開(kāi)發(fā)，如何提高頁(yè)面性能優(yōu)化(常問(wèn))

1.減少http請(qǐng)求次數(shù)

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

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

4.盡可能使用iconfont代替圖片圖標(biāo)

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

6.圖片懶加載(當(dāng)滾動(dòng)條，滾動(dòng)到一定值的時(shí)候，再加載)，

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

降低圖片質(zhì)量

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

使用webp格式圖片

5.什么叫優(yōu)雅降級(jí)和漸進(jìn)漸強(qiáng)

優(yōu)雅降級(jí)和漸進(jìn)漸強(qiáng) 是瀏覽器兼容的兩種方案。

1、優(yōu)雅降級(jí)： 能力檢測(cè)，如果能力有用新的;如果能力沒(méi)有，用舊的。(先從高級(jí)功能實(shí)現(xiàn)，后面在逐級(jí)降低)

2、漸進(jìn)漸強(qiáng)： 低端瀏覽器僅實(shí)現(xiàn)基本功能，高級(jí)瀏覽器實(shí)現(xiàn)額外功能。 (先實(shí)現(xiàn)基本功能。然后在實(shí)現(xiàn)高級(jí)功能)

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

6.如何形成 BFC

BFC是塊級(jí)格式化上下文。

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

BFC的形成：

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

② overflow:hidden;

③ 定位的、浮動(dòng)的

④ display ：inline-block，

BFC的性質(zhì)： 內(nèi)部有浮動(dòng)，能清除這些浮動(dòng)，能為浮動(dòng)元素?fù)胃摺?/p>

7.CSS 的盒模型

1、標(biāo)準(zhǔn)盒模型：

范圍：margin、border、padding、content

在標(biāo)準(zhǔn)盒子模型中，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。

增加內(nèi)邊距、邊框和外邊距不會(huì)影響內(nèi)容區(qū)域的尺寸，但是會(huì)增加元素框的總尺寸。

標(biāo)準(zhǔn)盒模型下盒子的大小 = 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賦三個(gè)值：

content-box： 默認(rèn)值，border和padding不算到width范圍內(nèi)，可以理解為是W3c的標(biāo)準(zhǔn)模型(default)

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

padding-box：將padding算入width范圍

當(dāng)設(shè)置為box-sizing:content-box時(shí)，將采用標(biāo)準(zhǔn)模式解析計(jì)算(默認(rèn)模式);

當(dāng)設(shè)置為box-sizing:border-box時(shí)，將采用怪異模式解析計(jì)算;

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

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

2、定位

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

10.對(duì)單位px、em、rem、vh、vw的理解

px物理像素，絕對(duì)值;

em相對(duì)于父級(jí)的大小，相對(duì)值;

rem相對(duì)于html的大小，相對(duì) 值;

vh相對(duì)于屏幕的高度，相對(duì)值;vw相對(duì)于屏幕的寬度，相對(duì)值

以上就是“web前端工程師面試題，提高成功率”，你能回答上來(lái)嗎?如果想要了解更多的Java面試題相關(guān)內(nèi)容，可以關(guān)注動(dòng)力節(jié)點(diǎn)Java官網(wǎng)。