【2019經典面試題解答】前端性能優化&閉包（解析和舉例）

時間 2019-11-07

標籤 2019經典面試題解答前端性能優化閉包解析舉例欄目系統性能简体版

原文原文鏈接

這一篇開始總結2019年春季前端面試的高頻題型。會以題型+問法/考點+參考答案的形式呈現，若有錯漏，但願諸位大佬及時斧正，以正視聽。javascript

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

一.前端性能優化

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

問法：前端

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

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

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

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

參考：segmentfault.com/a/119000000…web

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

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

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）細節設計（全選/反全選/自動補全……全部你能想到的）
複製代碼

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

附上一位阿里前端的回答：當面試官問你如何進行性能優化時，你該這麼回答(一)

二.閉包

考點：

什麼是閉包

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

手寫一個閉包

定義（我所認爲的）： 閉包是指在函數外卻可以讀取函數內部變量的一種函數現象,它是鏈接函數內外部的橋樑。

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

壞處： 常駐內存中，會增大內存的使用量，使用不當會形成內存泄露；另外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(shunfeng2.getStatus());//快遞已丟件
複製代碼