[[388680]]

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

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

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

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;