2020大廠web前端面試常見問題總結

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

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]>

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

<![endif]-->

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

CSS樣式的兼容性

1.css的hack問題：主要針對IE的不同版本，不同的瀏覽器的寫法不同
IE的條件注釋hack：
<!--[if IE 6]>此處內容只有IE6.0可見<![endif]-->
<!--[if IE 7]>此處內容只有IE7.0可見<![endif]-->

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的操作，減少頁面的重繪。

提前做加載操作

• 對域名進行預解析
  例如京東的做法
  <link rel="dns-prefetch" href="//misc.360buyimg.com" />
• 預載入組件或延遲載入組件
• 把 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. 禁止頁面縮放

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

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> 文本等寬

框架集

• <frameset>
• <noframes>
• <frame>

 

點擊關注，第一時間了解華為雲新鮮技術~