【前端面試題】10—21道關于性能優化的面試題(附答案)

随着前端項目不斷擴大，浏覽器渲染的壓力變得越來越重。配置好一點的計算機可以順利地展現頁面；配置低一些的計算機渲染頁面的性能就不那麼可觀了。

性能優化部分的面試題主要考察應試者對網站性能優化的了解。如何做好性能優化，哪些操作會引起性能優化的問題，性能優化名額是什麼等，都值得應試者關注。

因為性能優化變得越來越重要，是以很多企業專門建立團隊去做性能優化。

1、談談你對重構的了解。

網站重構是指在不改變外部行為的前提下，簡化結構、添加可讀性，且在網站前端保持一緻的行為。也就是說，在不改變UI的情況下，對網站進行優化，在擴充的同時保持一緻的UI。

對于傳統的網站來說，重構通常包括以下方面。

• 把表格（ table）布局改為DV+CSS。
• 使網站前端相容現代浏覽器。
• 對移動平台進行優化。
• 針對搜尋引擎進行優化。

深層次的網站重構應該考慮以下方面。

• 減少代碼間的耦合
• 讓代碼保持彈性。
• 嚴格按規範編寫代碼。
• 設計可擴充的API。
• 代替舊的架構、語言（如VB）
• 增強使用者體驗。
• 對速度進行優化。
• 壓縮 JavaScript、CSS、 image等前端資源（通常由伺服器來解決）。
• 優化程式的性能（如資料讀寫）。
• 采用CDN來加速資源加載。
• 優化 JavaScript DOM。
• 緩存HTTP伺服器的檔案。

2、如果一個頁面上有大量的圖檔（大型電商網站），網頁加載很慢，可以用哪些方法優化這些圖檔的加載，進而提升使用者體驗？

對于圖檔懶加載，可以為頁面添加一個滾動條事件，判斷圖檔是否在可視區域内或者即将進入可視區域，優先加載。

如果為幻燈片、相冊檔案等，可以使用圖檔預加載技術，對于目前展示圖檔的前一張圖檔和後一張圖檔優先下載下傳。

如果圖檔為CSS圖檔，可以使用 CSS Sprite、SVG sprite、 Icon font、Base64等技術。

如果圖檔過大，可以使用特殊編碼的圖檔，加載時會先加載一張壓縮得特别小的縮略圖，以提高使用者體驗。

如果圖檔展示區域小于圖檔的真實大小，則應在伺服器端根據業務需要先行進行圖檔壓縮，圖檔壓縮後，圖檔大小與展示的就一緻了。

3、談談性能優化問題。​

可以在以下層面優化性能。

• 緩存利用：緩存Ajax，使用CDN、外部 JavaScript和CSS檔案緩存，添加 Expires頭，在伺服器端配置Etag，減少DNS查找等。
• 請求數量：合并樣式和腳本，使用CSS圖檔精靈，初始首屏之外的圖檔資源按需加載，靜态資源延遲加載。
• 請求帶寬：壓縮檔案，開啟GZIP 。
• CSS代碼：避免使用CSS表達式、進階選擇器、通配選擇器。
• JavaScript代碼：用散清單來優化查找，少用全局變量，用 innerHTML代替DOM操作，減少DOM操作次數，優化 JavaScript性能，用 setTimeout避免頁面失去響應，緩存DOM節點查找的結果，避免使用with（with會建立自己的作用域，增加作用域鍊的長度），多個變量聲明合并。
• HTML代碼：避免圖檔和 iFrame等src屬性為空。src屬性為空，會重新加載目前頁面，影響速度和效率，盡量避免在HTML标簽中寫 Style屬性

4、移動端性能如何優化？

優化方式如下。

• 盡量使用CSS3動畫，開啟硬體加速。
• 适當使用 touch事件代替 click事件。
• 避免使用CSS3漸變陰影效果。
• 可以用 transform:translateZ（0）來開啟硬體加速。
• 不濫用 Float, Float在渲染時計算量比較大，盡量少使用。
• 不濫用Web字型，Web字型需要下載下傳、解析、重繪目前頁面，盡量少使用。
• 合理使用requestAnimation Frame動畫代替 setTimeout。
• 合理使用CSS中的屬性（CSS3 transitions、CSS3 3D transforms、 Opacity、 Canvas、 WebGL、Video）觸發GPU渲染。過度使用會使手機耗電量増加。

5、如何對網站的檔案進行優化？

可以進行檔案合并、檔案壓縮使檔案最小化；可以使用CDN托管檔案，讓使用者更快速地通路；可以使用多個域名來緩存靜态檔案。

6、請說出幾種縮短頁面加載時間的方法。

具體方法如下。

（1）優化圖檔

（2）選擇圖像存儲格式（比如，GIF提供的顔色較少，可用在一些對顔色要求不高的地方）

（3）優化CSS（壓縮、合并CSS）

（4）在網址後加斜杠

（5）為圖檔标明高度和寬度（如果浏覽器沒有找到這兩個參數，它需要一邊下載下傳圖檔一邊計算大小。如果圖檔很多，浏覽器需要不斷地調整頁面。這不但影響速度，而且影響浏覽體驗。當浏覽器知道高度和寬度參數後，即使圖檔暫時無法顯示，頁面上也會騰出圖檔的空位，然後繼續加載後面的内容，進而優化加載時間，提升浏覽體驗）。

7、哪些方法可以提升網站前端性能？

精靈圖合并，減少HTTP請求；壓縮HTML、CSS、JavaScript檔案；使用CDN托管靜态檔案；使用 localstorage緩存和 mainfest應用緩存。

8、你知道哪些優化性能的方法？

具體方法如下。

（1）減少HTTP請求次數，控制CSS Sprite、JavaScript與CSS源碼、圖檔的大小，使用網頁Gzip、CDN托管、data緩存、圖檔伺服器

（2）通過前端模闆 JavaScript和資料，減少由于HTML标簽導緻的帶寬浪費，在前端用變量儲存Ajax請求結果，每次操作本地變量時，不用請求，減少請求次數。

（3）用 innerhTML代替DOM操作，減少DOM操作次數，優化 JavaScript性能。

（4）當需要設定的樣式很多時，設定 className而不是直接操作 Style。

（5）少用全局變量，緩存DOM節點查找的結果，減少I/O讀取操作

（6）避免使用CSS表達式，它又稱動态屬性，

（7）預加載圖檔，将樣式表放在頂部，将腳本放在底部，加上時間戳。

（8）避免在頁面的主體布局中使用表，表要在其中的内容完全下載下傳之後才會顯示出來，顯示的速度比DIV+CSS布局慢。

9、列舉你知道的Web性能優化方法。

具體優化方法如下。

（1）壓縮源碼和圖檔（ JavaScript采用混淆壓縮，CSS進行普通壓縮，JPG圖檔根據具體品質壓縮為50%~70%，把PNG圖檔從24色壓縮成8色以去掉一些PNG格式資訊等）。

（2）選擇合适的圖檔格式（顔色數多用JPG格式，而很少使用PNG格式，如果能通過伺服器端判斷浏覽器支援WebP就用WebP或SVG格式）。

（3）合并靜态資源（減少HTTP請求）

（4）把多個CSS合并為一個CSS，把圖檔組合成雪碧圖。

（5）開啟伺服器端的Gzip壓縮（對文本資源非常有效）。

（6）使用CDN（對公開庫共享緩存）。

（7）延長靜态資源緩存時間。

（8）把CSS放在頁面頭部把 JavaScript代碼放在頁面底部（這樣避免阻塞頁面渲染而使頁面出現長時間的空白）

10、平時你是如何對代碼進行性能優化的？

利用性能分析工具監測性能，包括靜态 Analyze工具和運作時的 Profile工具（在Xcode工具欄中依次單擊 Product→ Profile項可以啟動）。

比如測試程式的運作時間，當單擊 Time Profiler項時，應用程式開始運作，這就能擷取到運作整個應用程式所消耗時間的分布和百分比。為了保證資料分析在同一使用場景下的真實性，一定要使用真機，因為此時模拟器在Mac上運作，而Mac上的CPU往往比iOS裝置要快。

11、針對CSS，如何優化性能？

具體優化方法如下。

（1）正确使用 display屬性， display屬性會影響頁面的渲染，是以要注意以下幾方面。

display:inline後不應該再使用 width、 height、 margin、 padding和float 。

display:inline- block後不應該再使用 float。

display:block後不應該再使用 vertical-align。 

display:table-*後不應該再使用 margin或者float。

（2）不濫用 float。

（3）不聲明過多的font-size。

（4）當值為0時不需要機關。

（5）标準化各種浏覽器字首，并注意以下幾方面。

• 浏覽器無字首應放在最後。
• CSS動畫隻用（ -webkit-無字首）兩種即可。
• 其他字首包括 -webkit-、-moz-、-ms-、無字首（ Opera浏覽器改用 blink核心，是以-0-被淘汰）

（6）避免讓選擇符看起來像是正規表達式。進階選擇器不容易讀懂，執行時間也長。

（7）盡量使用id、 class選擇器設定樣式（避免使用 style屬性設定行内樣式）

（8）盡量使用CSS3動畫。

（9）減少重繪和回流。

12、針對HTML，如何優化性能？

具體方法如下。

（1）對于資源加載，按需加載和異步加載

（2）首次加載的資源不超過1024KB，即越小越好。

（3）壓縮HTML、CSS、 JavaScript檔案。

（4）減少DOM節點。

（5）避免空src（空src在部分浏覽器中會導緻無效請求）。

（6）避免30*、40*、50*請求錯誤

（7）添加 Favicon.ico，如果沒有設定圖示ico，則預設的圖示會導緻發送一個404或者500請求。

13、針對 JavaScript，如何優化性能？

具體方法如下。

（1）緩存DOM的選擇和計算。

（2）盡量使用事件委托模式，避免批量綁定事件。

（3）使用 touchstart、 touchend代替 click。

（4）合理使用 requestAnimationFrame動畫代替 setTimeOut。

（5）适當使用 canvas動畫。

（6）盡量避免在高頻事件（如 TouchMove、 Scroll事件）中修改視圖，這會導緻多次渲染。

14、如何優化伺服器端？

具體方法如下。

（1）啟用Gzip壓縮。

（2）延長資源緩存時間，合理設定資源的過期時間，對于一些長期不更新的靜态資源過期時間設定得長一些。

（3）減少 cookie頭資訊的大小，頭資訊越大，資源傳輸速度越慢。

（4）圖檔或者CSS、 JavaScript檔案均可使用CDN來加速。

15、如何優化伺服器端的接口？

具體方法如下。

（1）接口合并：如果一個頁面需要請求兩部分以上的資料接口，則建議合并成一個以減少HTTP請求數。

（2）減少資料量：去掉接口傳回的資料中不需要的資料。

（3）緩存資料：首次加載請求後，緩存資料；對于非首次請求，優先使用上次請求的資料，這樣可以提升非首次請求的響應速度。

16、如何優化腳本的執行？

腳本處理不當會阻塞頁面加載、渲染，是以在使用時需注意。

（1）把CSS寫在頁面頭部，把 JavaScript程式寫在頁面尾部或異步操作中。

（2）避免圖檔和 iFrame等的空src，空src會重新加載目前頁面，影響速度和效率。

（3）盡量避免重設圖檔大小。重設圖檔大小是指在頁面、CSS、 JavaScript檔案等中多次重置圖檔大小，多次重設圖檔大小會引發圖檔的多次重繪，影響性能

（4）圖檔盡量避免使用 DataURL。DataURL圖檔沒有使用圖檔的壓縮算法，檔案會變大，并且要在解碼後再渲染，加載慢，耗時長。

17、如何優化渲染？

具體方法如下。

通過HTML設定 Viewport元标簽， Viewport可以加速頁面的渲染，如以下代碼所示。

<meta name="viewport" content="width=device=width,initial-scale=1">      

（2）減少DOM節點數量，DOM節點太多會影響頁面的渲染，應盡量減少DOM節點數量。

（3）盡量使用CSS3動畫，合理使用 requestAnimationFrame動畫代替 setTimeout，适當使用 canvas動畫（5個元素以内使用CSS動畫，5個元素以上使用 canvas動畫（iOS 8中可使用 webGL））。

（4）對于高頻事件優化 Touchmove, Scroll事件可導緻多次渲染。

使用 requestAnimationFrame監聽幀變化，以便在正确的時間進行渲染，增加響應變化的時間間隔，減少重繪次數。

使用節流模式（基于操作節流，或者基于時間節流），減少觸發次數。

（5）提升GPU的速度，用CSS中的屬性（CSS3 transitions、CSS3 3D transforms、 Opacity、 Canvas、 WebGL、Video）來觸發GPU渲染.

18、如何設定DNS緩存？

在浏覽器位址欄中輸入URL以後，浏覽器首先要查詢域名（ hostname）對應伺服器的IP位址，一般需要耗費20~120ms的時間。

DNS查詢完成之前，浏覽器無法識别伺服器IP，是以不下載下傳任何資料。基于性能考慮，ISP營運商、區域網路路由、作業系統、用戶端（浏覽器）均會有相應的DNS緩存機制。

（1）正IE緩存30min，可以通過系統資料庫中 DnsCacheTimeout項設定。

（2） Firefox混存1 min，通過 network.dnsCacheExpiration配置。

（3）在 Chrome中通過依次單擊“設定”→“選項”→“進階選項”，并勾選“用預提取DNS提高網頁載入速度”選項來配置緩存時間。

19、什麼時候會出現資源通路失敗？

開發過程中，發現很多開發者沒有設定圖示，而伺服器端根目錄也沒有存放預設的 Favicon.ico，進而導緻請求404出現。通常在App的 webview裡打開 Favicon.ico，不會加載這個 Favicon.ico，但是很多頁面能夠分享。

如果使用者在浏覽器中打開 Favicon. ico，就會調取失敗，一般盡量保證該圖示預設存在，檔案盡可能小，并設定一個較長的緩存過期時間。另外，應及時清理緩存過期導緻岀現請求失敗的資源。

20、jQuery性能優化如何做？

優化方法如下。

（1）使用最新版本的 jQuery類庫。

JQuery類庫每一個新的版本都會對上一個版本進行Bug修複和一些優化，同時也會包含一些創新，是以建議使用最新版本的 jQuery類庫提高性能。不過需要注意的是，在更換版本之後，不要忘記測試代碼，畢竟有時候不是完全向後相容的。

（2）使用合适的選擇器。

jQuery提供非常豐富的選擇器，選擇器是開發人員最常使用的功能，但是使用不同選擇器也會帶來性能問題。建議使用簡凖選擇器，如i選擇器、類選擇器，不要将i選擇器嵌套等。

（3）以數組方式使用 jQuery對象。

使用 jQuery選擇器擷取的結果是一個 jQuery對象。然而， jQuery類庫會讓你感覺正在使用一個定義了索引和長度的數組。在性能方面，建議使用簡單的for或者 while循環來處理，而不是$. each()，這樣能使代碼更快。

（4）每一個 JavaScript事件（例如 click、 mouseover等）都會冒泡到父級節點。當需要給多個元素綁定相同的回調函數時，建議使用事件委托模式。

（5）使用join( )來拼接字元串。

使用 join( )拼接長字元串，而不要使用“+”拼接字元串，這有助于性能優化，特别是處理長字元串的時候。

（6）合理利用HTML5中的data屬性。

HTML5中的data屬性有助于插入資料，特别是前、後端的資料交換；jQuery的 data( )方法能夠有效地利用HTML5的屬性來自動擷取資料。

21、哪些方法能提升移動端CSS3動畫體驗？

（1）盡可能多地利用硬體能力，如使用3D變形來開啟GPU加速，例如以下代碼。

-webkit-transform: translate 3d(0, 0, 0);
-moz-transform : translate3d(0,0, 0);
-ms-transform : translate 3d(0,0,0);
transform: translate3d(0,0,0)；      

一個元素通過 translate3d右移500X的動畫流暢度會明顯優于使用left屬性實作的動畫移動，原因是CSS動畫屬性會觸發整個頁面重排、重繪、重組。paint通常是最耗性能的，盡可能避免使用觸發 paint的CSS動畫屬性。

如果動畫執行過程中有閃爍（通常發生在動畫開始的時候），可以通過如下方式處理。

-webkit-backface-visibility:hidden;
-moz-backface-visibility:hidden；
-ms-backface-visibility:hidden ;
backface-visibility:hidden；
-webkit-perspective：1000；
-moz-perspective：1000；
-ms-perspective：1000；
perspective：1000;      

（2）盡可能少使用box- shadows和 gradients，它們往往嚴重影響頁面的性能，尤其是在一個元素中同時都使用時。

（3）盡可能讓動畫元素脫離文檔流，以減少重排，如以下代碼所示。

position:fixed；
position:absolute;      

本文完〜