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

1.web前端專案的結構是怎樣的？檔案有哪些命名規範？

專案結構規範

頁面檔案：以專案名命名，例如：shop

js檔案：命名為js

css檔案：命名為css

圖片檔案：命名為images

資料檔案：命名為data

檔案儲存規範：按專案模組分類儲存，例如：使用者資訊管理

頁面檔案存放： shop/userinfo/userlist.html

js檔案：js/userinfo/userlist.js

css樣式：css/userinfo/userlist.css

注意：圖片的分類一般按照功能作用劃分，比如：小圖示、動畫圖片

動畫圖片：images/gif/…

圖示庫：images/flags/…

專案檔案命名規範

頁面/js/css檔案規範：專案名稱-模組名稱-頁面名稱，例如：shop-user-index.html使用者模組的首頁。

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

2.談談瀏覽器的相容性

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

回答思路

我們在開發的時候會明確專案要相容哪些瀏覽器的最低版本，我之前的專案要求相容IE8.0以上的版本，Chrome 48以上，FireFox 44以上。有了這些最基本的要求，在開發中就是要考慮到CSS樣式和JavaScript的在這些瀏覽器的相容性了

html部分

1.H5新標籤在IE9以下的瀏覽器識別

<!--[if lt IE 9]>

<![endif]-->

2.ul標籤內外邊距問題ul標籤在IE6\IE7中，有個預設的外邊距，但是在IE8以上及其他瀏覽器中有個預設的內邊距。解決方法：統一設定ul的內外邊距為0

CSS樣式的相容性

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

IE的條件註釋hack：

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

解決辦法：display:block;

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

解決方法：給img設定display:block;

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

解決辦法：給右邊的元素也設定float:left;

5.IE6下沒有min-width的概念，其預設的width就是min-width

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

解決辦法：為其父容器設定text-align:center;

7.被點選過後的超連結不再具有hover和active屬性

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

":link": a標籤還未被訪問的狀態；

":visited": a標籤已被訪問過的狀態；

":hover": 滑鼠懸停在a標籤上的狀態；

":active": a標籤被滑鼠按著時的狀態；

8.在使用絕對定位或者相對定位後，IE中設定z-index失效，原因是因為其元素依賴於父元素的z-index，但是父元素預設為0，子高父低，所以不會改變顯示的順序

9.IE6下無法設定1px的行高，原因是由其預設行高引起的

解決辦法：為期設定overflow:hidden;或者line-height:1px;

JavaScript的相容性

1.標準的事件繫結方法函式為addEventListener，但IE下是attachEvent；

2.事件的捕獲方式不一致，標準瀏覽器是由外至內，而IE是由內到外，但是最後的結果是將IE的標準定為標準

3.window.event獲取的。並且獲取目標元素的方法也不同，標準瀏覽器是event.target，而IE下是event.srcElement

4.在低版本的IE中獲取的日期處理函式的值不是與1900的差值，但是在高版本的IE中和標準瀏覽器保持了一致，獲取的值也是與1900的差值。

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

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

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

其他瀏覽器：parentNode parentNode.childNodes

IE：parentElement parentElement.children

3.頁面最佳化有哪些方法

頁面最佳化的方法非常多，最好能夠對這些最佳化方案進行分類，這些方案最好能夠結合實際開發遇到的問題來表述。

最佳化的方案

減少操作量

儘量減少 HTTP 請求

1) 合併檔案，比如把多個 CSS 檔案合成一個；

2) CSS Sprites 利用 CSS background 相關元素進行背景圖絕對定位；

不要在 HTML 中使用縮放圖片

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

Image壓縮

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

減少對DOM的操作

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

提前做載入操作

對域名進行預解析

例如京東的做法

預載入元件或延遲載入元件

把 CSS 放到內碼表上端

CSS 放到最頂部，瀏覽器能夠有針對性的對 HTML 頁面從頂到下進行解析和渲染。

使用 new Image物件，對圖片進行快取

提升並行載入

切分元件到多個域，提升伺服器的響應能力

JavaScript和CSS最佳化

從頁面中剝離 JavaScript 與 CSS

剝離後，能夠有針對性的對其進行單獨的處理策略，比如壓縮或者快取策略。

精簡 JavaScript 與 CSS

使用工具壓縮JavaScript和CSS檔案

指令碼放到 HTML 內碼表底部

減少對頁面的阻塞。

非同步載入

使用Ajax實現非同步載入，例如，滾動頁面載入後面的內容，這種也比較常見。

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

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

解題思路

渲染引擎是幹什麼的

渲染引擎可以顯示html、xml文件及圖片，它也可以藉助外掛（一種瀏覽器擴充套件）顯示其他型別資料，例如使用PDF閱讀器外掛可以顯示PDF格式。

渲染引擎

不同的瀏覽器有不同的渲染引擎，對於渲染引擎的使用總結如下：

Trident(MSHTML)核心：IE,MaxThon,TT,The World,360,搜狗瀏覽器等

Gecko核心：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等

Presto核心：Opera7及以上

Webkit核心：Safari,Chrome等

解析html以構建dom樹 -> 構建render樹 -> 佈局render樹 -> 繪製render樹

步驟詳細解釋

第一步：渲染引擎開始解析html，根據標籤構建DOM節點

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

第三步：根據css樣式構建佈局樹，主要是確定元素要顯示的位置。

第四步：根據前面的資訊，繪製渲染樹。

5.什麼是響應式開發？

響應式開發是前端開發工作比較常見的工作內容，隨著移動網際網路的發展，移動端設計越來越重要，很多專案都是移動端專案先開發，而後是PC端的開發，為了降低運營成本和開發成本，同一個網站要能相容PC端和移動端顯示呼之欲出，進而響應式開發成了前端開發人員必備的技能，所以響應式開發的技術必須掌握。

什麼是響應式

顧名思義，同一個網站相容不同的大小的裝置。如PC端、移動端（平板、橫屏、豎排）的顯示風格。

需要用到的技術

1. Media Query（媒體查詢）

用於查詢裝置是否符合某一特定條件，這些特定條件包括螢幕尺寸，是否可觸控，螢幕精度，橫屏豎屏等資訊。

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

用於文字大小的響應和彈性佈局。

3. 禁止頁面縮放

4. 螢幕尺寸響應

a) 固定佈局：頁面居中，兩邊留白，他能適應大於某個值一定範圍的寬度，但是如果太寬就會有很多留白，太窄會出現捲軸，在PC頁面上很常見。

b) 流動佈局：螢幕尺寸在一定範圍內變化時，不改變模組佈局，只改變模組尺寸比例。比固定佈局更具響應能力，兩邊不留白，但是也只能適應有限的寬度變化範圍，否則模組會被擠（拉）得不成樣子。

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

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

響應式設計注意事項

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

#head{width:100%;}

#content{width:50%;}

2. 圖片處理

圖片的寬度和高度設定等比縮放，可以設定圖片的width為百分比，height:auto;

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

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

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

H5新特性

增強了圖形渲染、影音、資料儲存、多工處理等處理能力主要表現在

繪畫 canvas;

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

畫圖需要的要素

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

b) 顏色

c) 畫板

由於畫布案例比較多，程式碼比較複雜，可以在w3cschool上檢視相關教程

2) 本地離線儲存 localStorage

長期儲存資料，瀏覽器關閉後資料不丟失;

1.特點

資料永久儲存，沒有時間限制；大小限制5M(夠用了)；只儲存字串。

2.資料存取方式

localStorage.a = 3;//設定a為"3"

localStorage["a"] = "sfsf";//設定a為"sfsf"，覆蓋上面的值

localStorage.setItem("b","isaac");//設定b為"isaac"

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

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

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

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

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

localStorage.clear();//清除所有的資料

推薦使用：

getItem()

setItem()

removeItem()

3.事件監聽

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的資料在瀏覽器關閉後自動刪除;操作參考localStorage

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

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

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

7) 新的技術webworker(專用執行緒)

8) websocketsocket通訊

9) Geolocation 地理定位

移除的元素

純表現的元素

<basefont> 預設字型，不設定字型，以此渲染

<font> 字型標籤

<center> 水平居中

<u> 下劃線

<big> 大字型

<strike> 中橫線

<tt> 文字等寬

框架集

<frame>

2020大廠web前端面試都喜歡問這些

相關文章