本篇收錄了一些面試中經(jīng)常會遇到的經(jīng)典面試題以及自己面試過程中遇到的一些問題。通過對本篇知識的整理以及經(jīng)驗的總結(jié)，希望能幫到更多的前端面試者。

1.web前端項目的結(jié)構(gòu)是怎樣的？文件有哪些命名規(guī)范？

項目結(jié)構(gòu)規(guī)范

頁面文件：以項目名命名，例如：shop

js文件：命名為js

css文件：命名為css

圖片文件：命名為images

數(shù)據(jù)文件：命名為data

文件存儲規(guī)范：按項目模塊分類存儲，例如：用戶信息管理

頁面文件存放： shop/userinfo/userlist.html

js文件：js/userinfo/userlist.js

css樣式：css/userinfo/userlist.css

注意：圖片的分類一般按照功能作用劃分，比如： 小圖標(biāo)、動畫圖片

動畫圖片：images/gif/…

圖標(biāo)庫：images/flags/…

項目文件命名規(guī)范

頁面/js/css文件規(guī)范：項目名稱-模塊名稱-頁面名稱，例如：shop-user-index.html用戶模塊的首頁。

注意：js一般會包含 公共js 習(xí)慣命名commo.js；css樣式會包含公共css，習(xí)慣命名為 common.css。

2.談?wù)劄g覽器的兼容性

這個問題是非常抽象的，越是抽象的問題越能表現(xiàn)出我們的表達(dá)能力，而面試官就喜歡根據(jù)你的回答來追問，不斷地打斷你的思路，這個時候不要慌，一定要堅信自己。

回答思路

我們在開發(fā)的時候會明確項目要兼容哪些瀏覽器的最低版本，我之前的項目要求兼容IE8.0以上的版本，Chrome 48以上，F(xiàn)ireFox 44以上。有了這些最基本的要求，在開發(fā)中就是要考慮到CSS樣式和JavaScript的在這些瀏覽器的兼容性了

html部分

1.H5新標(biāo)簽在IE9以下的瀏覽器識別

<!--[if lt IE 9]>

<script type="text/javascript" src="js/html5shiv.js"></script>

<![endif]-->

2.ul標(biāo)簽內(nèi)外邊距問題ul標(biāo)簽在IE6\IE7中，有個默認(rèn)的外邊距，但是在IE8以上及其他瀏覽器中有個默認(rèn)的內(nèi)邊距。解決方法：統(tǒng)一設(shè)置ul的內(nèi)外邊距為0

CSS樣式的兼容性

1.css的hack問題：主要針對IE的不同版本，不同的瀏覽器的寫法不同

IE的條件注釋hack：

2.IE6雙邊距問題：IE6在浮動后，又有橫向的margin，此時，該元素的外邊距是其值的2倍

解決辦法：display:block;

3.IE6下圖片的下方有空隙

解決方法：給img設(shè)置display:block;

4.IE6下兩個float之間會有個3px的bug

解決辦法：給右邊的元素也設(shè)置float:left;

5.IE6下沒有min-width的概念，其默認(rèn)的width就是min-width

6.IE6下在使用margin:0 auto;無法使其居中

解決辦法：為其父容器設(shè)置text-align:center;

7.被點擊過后的超鏈接不再具有hover和active屬性

解決辦法:按lvha的順序書寫css樣式，

":link": a標(biāo)簽還未被訪問的狀態(tài)；

":visited": a標(biāo)簽已被訪問過的狀態(tài)；

":hover": 鼠標(biāo)懸停在a標(biāo)簽上的狀態(tài)；

":active": a標(biāo)簽被鼠標(biāo)按著時的狀態(tài)；

8.在使用絕對定位或者相對定位后，IE中設(shè)置z-index失效，原因是因為其元素依賴于父元素的z-index，但是父元素默認(rèn)為0， 子高父低，所以不會改變顯示的順序

9.IE6下無法設(shè)置1px的行高，原因是由其默認(rèn)行高引起的

解決辦法：為期設(shè)置overflow:hidden;或者line-height:1px;

JavaScript的兼容性

1.標(biāo)準(zhǔn)的事件綁定方法函數(shù)為addEventListener，但I(xiàn)E下是attachEvent；

2.事件的捕獲方式不一致，標(biāo)準(zhǔn)瀏覽器是由外至內(nèi)，而IE是由內(nèi)到外，但是最后的結(jié)果是將IE的標(biāo)準(zhǔn)定為標(biāo)準(zhǔn)

3.window.event獲取的。并且獲取目標(biāo)元素的方法也不同，標(biāo)準(zhǔn)瀏覽器是event.target，而IE下是event.srcElement

4.在低版本的IE中獲取的日期處理函數(shù)的值不是與1900的差值，但是在高版本的IE中和標(biāo)準(zhǔn)瀏覽器保持了一致，獲取的值也是與1900的差值。

比如：var year= new Date().getYear();

5.ajax的實現(xiàn)方式不同，這個我所理解的是獲取XMLHttpRequest的不同，IE下是activeXObject

6.IE中不能操作tr的innerHtml7.獲得DOM節(jié)點的父節(jié)點、子節(jié)點的方式不同

其他瀏覽器：parentNode parentNode.childNodes

IE：parentElement parentElement.children

3.頁面優(yōu)化有哪些方法

頁面優(yōu)化的方法非常多，最好能夠?qū)@些優(yōu)化方案進(jìn)行分類，這些方案最好能夠結(jié)合實際開發(fā)遇到的問題來表述。

優(yōu)化的方案

減少操作量

盡量減少 HTTP 請求

1) 合并文件，比如把多個 CSS 文件合成一個；

2) CSS Sprites 利用 CSS background 相關(guān)元素進(jìn)行背景圖絕對定位；

不要在 HTML 中使用縮放圖片

縮放圖片并沒有減少圖片的容量，只是控制了圖片的大小。

Image壓縮

使用工具對圖片進(jìn)行壓縮，保證質(zhì)量的同時減少了圖片的大小。

減少對DOM的操作

減少對DOM的操作，減少頁面的重繪。

提前做加載操作

對域名進(jìn)行預(yù)解析

例如京東的做法

預(yù)載入組件或延遲載入組件

把 CSS 放到代碼頁上端

CSS 放到最頂部，瀏覽器能夠有針對性的對 HTML 頁面從頂?shù)较逻M(jìn)行解析和渲染。

使用 new Image對象，對圖片進(jìn)行緩存

提升并行加載

切分組件到多個域 ，提升服務(wù)器的響應(yīng)能力

JavaScript和CSS優(yōu)化

從頁面中剝離 JavaScript 與 CSS

剝離后，能夠有針對性的對其進(jìn)行單獨的處理策略，比如壓縮或者緩存策略。

精簡 JavaScript 與 CSS

使用工具壓縮JavaScript和CSS文件

腳本放到 HTML 代碼頁底部

減少對頁面的阻塞。

異步加載

使用Ajax實現(xiàn)異步加載，例如，滾動頁面加載后面的內(nèi)容，這種也比較常見。

4.頁面渲染原理是什么？

這是一道純理論的題目，只要能夠?qū)g覽器的渲染過程很專業(yè)的表述出來，一定會得到面試官的青睞，作為一枚前端人員確實有必要了解一下瀏覽器的渲染過程是怎樣的，對于頁面性能的提升是有幫助的。

解題思路

渲染引擎是干什么的

渲染引擎可以顯示html、xml文檔及圖片，它也可以借助插件（一種瀏覽器擴(kuò)展）顯示其他類型數(shù)據(jù)，例如使用PDF閱讀器插件可以顯示PDF格式。

渲染引擎

不同的瀏覽器有不同的渲染引擎，對于渲染引擎的使用總結(jié)如下：

Trident(MSHTML)內(nèi)核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等

Gecko內(nèi)核：Netscape6及以上版本，F(xiàn)F,MozillaSuite/SeaMonkey等

Presto內(nèi)核：Opera7及以上

Webkit內(nèi)核：Safari,Chrome等

解析html以構(gòu)建dom樹 -> 構(gòu)建render樹 -> 布局render樹 -> 繪制render樹

步驟詳細(xì)解釋

第一步：渲染引擎開始解析html，根據(jù)標(biāo)簽構(gòu)建DOM節(jié)點

第二步：根據(jù)css樣式構(gòu)建渲染樹，包括元素的大小、顏色，隱藏的元素不會被構(gòu)建到該樹中。

第三步：根據(jù)css樣式構(gòu)建布局樹，主要是確定元素要顯示的位置。

第四步：根據(jù)前面的信息，繪制渲染樹。

5.什么是響應(yīng)式開發(fā)？

響應(yīng)式開發(fā)是前端開發(fā)工作比較常見的工作內(nèi)容，隨著移動互聯(lián)網(wǎng)的發(fā)展，移動端設(shè)計越來越重要，很多項目都是移動端項目先開發(fā)，而后是PC端的開發(fā)，為了降低運(yùn)營成本和開發(fā)成本，同一個網(wǎng)站要能兼容PC端和移動端顯示呼之欲出，進(jìn)而響應(yīng)式開發(fā)成了前端開發(fā)人員必備的技能，所以響應(yīng)式開發(fā)的技術(shù)必須掌握。

什么是響應(yīng)式

顧名思義，同一個網(wǎng)站兼容不同的大小的設(shè)備。如PC端、移動端（平板、橫屏、豎排）的顯示風(fēng)格。

需要用到的技術(shù)

1. Media Query（媒體查詢）

用于查詢設(shè)備是否符合某一特定條件，這些特定條件包括屏幕尺寸，是否可觸摸，屏幕精度，橫屏豎屏等信息。

2. 使用em或rem做尺寸單位

用于文字大小的響應(yīng)和彈性布局。

3. 禁止頁面縮放

<meta name="viewport" content="initial-scale=1, width=device-width, maximum-scale=1, user-scalable=no" />

4. 屏幕尺寸響應(yīng)

a) 固定布局：頁面居中，兩邊留白，他能適應(yīng)大于某個值一定范圍的寬度，但是如果太寬就會有很多留白，太窄會出現(xiàn)滾動條，在PC頁面上很常見。

b) 流動布局：屏幕尺寸在一定范圍內(nèi)變化時，不改變模塊布局，只改變模塊尺寸比例。比固定布局更具響應(yīng)能力，兩邊不留白，但是也只能適應(yīng)有限的寬度變化范圍，否則模塊會被擠（拉）得不成樣子。

c) 自定義布局：上面幾種布局方式都無法跨域大尺寸變化，所以適當(dāng)時候我們需要改變模塊的位置排列或者隱藏一些次要元素。

d) 柵格布局：這種布局方式使得模塊之間非常容易對齊，易于模塊位置的改變用于輔助自定義布局。

響應(yīng)式設(shè)計注意事項

1.寬度不固定，可以使用百分比

#head{width:100%;}

#content{width:50%;}

2. 圖片處理

圖片的寬度和高度設(shè)置等比縮放，可以設(shè)置圖片的width為百分比，height:auto;

背景圖片可以使用background-size 指定背景圖片的大小。

6.html5有哪些新特性、移除了那些元素？

題目涉及到范圍非常的大，如果要面面俱到顯然半天都答不完，可以先羅列出H5的一些新特性，不要回答那么具體，等面試官提具體的問題，所以在面試之前也要把這里的技術(shù)過一遍，至少每個技術(shù)也要做個小程序出來體驗一下。

H5新特性

增強(qiáng)了圖形渲染、影音、數(shù)據(jù)存儲、多任務(wù)處理等處理能力主要表現(xiàn)在

繪畫 canvas;

類似windows自帶的畫圖板，可繪制線、框、路徑、圖……，InternetExplorer 9、Firefox、Opera、Chrome 以及 Safari 支持 <canvas> 及其屬性和方法。

畫圖需要的要素

a) 筆，用筆可以畫線、圓、矩形、文本等

b) 顏色

c) 畫板

由于畫布案例比較多，代碼比較復(fù)雜，可以在w3cschool上查看相關(guān)教程

2) 本地離線存儲 localStorage

長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失;

1.特點

數(shù)據(jù)永久存儲，沒有時間限制；大小限制5M(夠用了)；只存儲字符串。

2.數(shù)據(jù)存取方式

localStorage.a = 3;//設(shè)置a為"3"?

localStorage["a"] = "sfsf";//設(shè)置a為"sfsf"，覆蓋上面的值?

localStorage.setItem("b","isaac");//設(shè)置b為"isaac"?

var a1 = localStorage["a"];//獲取a的值?

var a2 = localStorage.a;//獲取a的值?

var b = localStorage.getItem("b");//獲取b的值?

var b2= localStorage.key(0);//獲取第一個key的內(nèi)容?

localStorage.removeItem("c");//清除c的值?

localStorage.clear();//清除所有的數(shù)據(jù)

推薦使用：

getItem()

setItem()

removeItem()

3.事件監(jiān)聽

if(window.addEventListener){?

window.addEventListener("storage",handle_storage,false);//?

}else if(window.attachEvent){ //兼容IE?

window.attachEvent("onstorage",handle_storage);?

}?

function handle_storage(e){?

}

對象e為localStorage對象，Chrome、Firefox支持差，IE支持較好。

3) sessionStorage的數(shù)據(jù)在瀏覽器關(guān)閉后自動刪除;操作參考localStorage

4) 用于媒介回放的 video和 audio 元素;

5) 語意化更好的內(nèi)容元素，比如article、footer、header、nav、section;

6) 表單控件，calendar、date、time、email、url、search;

7) 新的技術(shù)webworker(專用線程)

8) websocketsocket通信

9) Geolocation 地理定位

移除的元素

純表現(xiàn)的元素

<basefont> 默認(rèn)字體，不設(shè)置字體，以此渲染

<font> 字體標(biāo)簽

<center> 水平居中

<u> 下劃線

<big> 大字體

<strike> 中橫線

<tt> 文本等寬

框架集

<frameset>

<noframes>

<frame>

注：本文轉(zhuǎn)載自華為云開發(fā)者社區(qū)，如有侵權(quán)，請聯(lián)系3082097558@qq.com 刪除。