程式媛面試之高頻題型彙總(一）

紅衣教主發表於2019-04-02
面試

面試一個多月以來，發現面試題的重複率好高，為了擦掉上一篇被噴的水，這一篇開始總結2019年春季前端面試的高頻題型。會以題型+問法/考點+參考答案的形式呈現，如有錯漏，希望諸位大佬及時斧正，以正視聽。

（備註：本人非應屆生，這些面試題應該是針對至少一年工作經驗的）

1.前端效能優化

這個問題出現頻率最高，幾乎每場面試都問。

問法：

  • 你所知道的前端效能優化有哪些
  • 你在工作中做過的效能優化
  • 你這樣做不會影響效能嗎
  • 這個有沒有提高效能的寫法
  • 請從效能方面回答這個問題
  • ……

顯而易見，前端效能優化越來越受重視，目前各種流行技術的更新迭代也是圍繞效能而進行。然而這個問題的範圍太廣了，我面試的時候回答得也不太好，我在網上查了很多資料，分別從以下幾個方面給出參考答案：

1.減少HTTP請求（這個優化是最明顯的）

1) 圖片地圖，允許在一個圖片上關聯多個URL，目標URL取決於使用者單擊的圖片上的位置。
2) 雪碧圖
3) 合併JS和CSS檔案
4) 減少http請求頭
5）配置多個域名和CDN加速
6）使用快取（HTTP快取、瀏覽器快取、應用快取）
7）優化cookie
複製程式碼

參考：segmentfault.com/a/119000000…

2.HTML

1）減少DOM元素數量:頁面中存在大量DOM元素,會導致javascript遍歷DOM的效率變慢。尤其要儘量少用iframe，它是耗能最大的dom元素，而且會阻塞onload事件
2）使用css+div代替table佈局，去掉格式化控制標籤如：strong，b，i等，使用css控制
3）減少不必要的巢狀，儘量扁平化，因為當瀏覽器編譯器遇到一個標籤時就開始尋找它的結束標籤，直到它匹配上才能顯示它的內容，所以當巢狀很多時開啟頁面就會特別慢。
複製程式碼

更多更全HTML效能優化參考：www.cnblogs.com/zzhui/p/504…

3.CSS

關鍵字： 選擇器，高消耗的樣式屬性，繼承，層級，壓縮……

www.cnblogs.com/heroljy/p/9…

baijiahao.baidu.com/s?id=160325…

tips: 在回答這兩個方面的時候勢必會提到 重排和重繪，你的每個回答都有可能是面試官下一個問你的問題。如果當時真的想不起，那就避開，選幾個在實際工作中常用的回答，如果你全篇背誦那就有點假了。

3.JS

1）減少全域性變數的查詢。因為全域性變數在作用域鏈的最頂端，頻繁查詢很耗效能。
舉個栗子：
複製程式碼
var globalVar = 1; 
function myCallback(info){ 
    for( var i = 100000; i--;){ 
        globalVar += i; 
        //每次訪問 globalVar 都需要查詢到作用域鏈最頂端，本例中需要訪問 100000 次 
    }
}
複製程式碼
優化：
複製程式碼
var globalVar = 1; 
function myCallback(info){
   var localVar = globalVar; 
   for( var i = 100000; i--;){ 
       localVar += i; 
       //訪問區域性變數是最快的
   } 
}
複製程式碼
2）慎用 with，定時器
3）優化迴圈
4）少操作DOM
5）字串拼接

更多更全（我就不做搬運工了）：

www.cnblogs.com/cnblogs-jcy…

www.cnblogs.com/wxiaona/p/5…

blog.csdn.net/lululul123/…

www.cnblogs.com/MarcoHan/p/…

4.伺服器優化

1)CDN：把網站內容分散到多個、處於不同地域位置的伺服器上可以加快下載速度。
2)GZIP壓縮
3)設定ETag：ETags（Entity tags，實體標籤）是web伺服器和瀏覽器用於判斷瀏覽器快取中的內容和伺服器中的原始內容是否匹配的一種機制。
4)提前重新整理緩衝區
複製程式碼

5.使用者體驗

1）預載入，懶載入
2）瀏覽器快取，應用快取
3）細節設計（全選/反全選/自動補全……所有你能想到的）
複製程式碼

說明：關於前端效能優化我這裡查閱和蒐集的資料遠遠不夠，我這裡提到的也不全，大家自行蒐集吧（哪天我搜集全了更新後會通知大家，謝謝）

2.閉包

考點：

什麼是閉包

閉包的作用（好處壞處，使用場景）

手寫一個閉包

定義（我所認為的）： 閉包是指在函式外卻能夠讀取函式內部變數的一種函式現象,它是連線函式內外部的橋樑。

好處: 讀取函式內部的變數,並且能讓變數的值始終保持在記憶體中，函式執行完畢後不會被釋放

壞處： 常駐記憶體中，會增大記憶體的使用量，使用不當會造成記憶體洩露；另外js對閉包的處理速度會低於普通函式，過度使用閉包也會降低指令碼效能。

解決辦法： 在退出函式之前，將不使用的區域性變數全部刪除

使用場景/手寫閉包: 白話解釋:在一個func物件中,有一個/多個屬性是函式型別的，函式型別們呼叫了該func的內部變數並return；在func外部呼叫了這個func的函式屬性後，成功獲取到了這個func的內部變數

雙手端上來一個栗子：

function fn(){
    var status = '';
    return {
        Arrive:function(){
            status = '快遞已簽收';
        },
        Lost:function(){
            status = '快遞已丟件';
        },
        getStatus:function(){
            return status;
        }
    }
}
var shunfeng = fn();
shunfeng.Arrive();
console.log(shunfeng.getStatus());//快遞已簽收
shunfeng.Lost();
console.log(shunfeng.getStatus());//快遞已丟件
var shunfeng2 = fn();
console.log(shunfeng.getStatus());//快遞已丟件
複製程式碼

再一次呼叫fn，會發現快遞的狀態仍舊是'快遞已丟件'而並沒有被初始化為空字串，這就是閉包的實際使用場景，即：我想保留一種唯一狀態，即使函式執行完畢後仍然存在。

閉包的使用智者見智，我舉的例子比較初級，大家可以自己多動手試試。

好怕我誤導你們，這裡是阮一峰老師的閉包解讀：學習Javascript閉包（Closure)

最後：

好累啊，今天先寫到這裡，明天會繼續更新，畢竟手裡還有好多題目要分享呢~

新鮮出爐面試題，歡迎移步閱讀：程式媛面試之高頻題型彙總(二)

如果大佬們發現有錯誤的地方一定要及時指出來，我會在第一時間改正，以免誤導他人，謝謝~

相關文章