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 九、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>

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