[[388680]]

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

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

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

1、談談你對重構(gòu)的理解。

網(wǎng)站重構(gòu)是指在不改變外部行為的前提下，簡化結(jié)構(gòu)、添加可讀性，且在網(wǎng)站前端保持一致的行為。也就是說，在不改變UI的情況下，對網(wǎng)站進行優(yōu)化，在擴展的同時保持一致的UI。

對于傳統(tǒng)的網(wǎng)站來說，重構(gòu)通常包括以下方面。

• 把表格（ table）布局改為DV+CSS。

• 使網(wǎng)站前端兼容現(xiàn)代瀏覽器。

• 對移動平臺進行優(yōu)化。

• 針對搜索引擎進行優(yōu)化。

深層次的網(wǎng)站重構(gòu)應該考慮以下方面。

• 減少代碼間的耦合

• 讓代碼保持彈性。

• 嚴格按規(guī)范編寫代碼。

• 設計可擴展的API。

• 代替舊的框架、語言（如VB）

• 增強用戶體驗。

• 對速度進行優(yōu)化。

• 壓縮 JavaScript、CSS、 image等前端資源（通常由服務器來解決）。

• 優(yōu)化程序的性能（如數(shù)據(jù)讀寫）。

• 采用CDN來加速資源加載。

• 優(yōu)化 JavaScript DOM。

• 緩存HTTP服務器的文件。

2、如果一個頁面上有大量的圖片（大型電商網(wǎng)站），網(wǎng)頁加載很慢，可以用哪些方法優(yōu)化這些圖片的加載，從而提升用戶體驗？

對于圖片懶加載，可以為頁面添加一個滾動條事件，判斷圖片是否在可視區(qū)域內(nèi)或者即將進入可視區(qū)域，優(yōu)先加載。

如果為幻燈片、相冊文件等，可以使用圖片預加載技術，對于當前展示圖片的前一張圖片和后一張圖片優(yōu)先下載。

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

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

如果圖片展示區(qū)域小于圖片的真實大小，則應在服務器端根據(jù)業(yè)務需要先行進行圖片壓縮，圖片壓縮后，圖片大小與展示的就一致了。

3、談談性能優(yōu)化問題。

可以在以下層面優(yōu)化性能。

• 緩存利用：緩存Ajax，使用CDN、外部 JavaScript和CSS文件緩存，添加 Expires頭，在服務器端配置Etag，減少DNS查找等。

• 請求數(shù)量：合并樣式和腳本，使用CSS圖片精靈，初始首屏之外的圖片資源按需加載，靜態(tài)資源延遲加載。

• 請求帶寬：壓縮文件，開啟GZIP 。

• CSS代碼：避免使用CSS表達式、高級選擇器、通配選擇器。

• JavaScript代碼：用散列表來優(yōu)化查找，少用全局變量，用 innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化 JavaScript性能，用 setTimeout避免頁面失去響應，緩存DOM節(jié)點查找的結(jié)果，避免使用with（with會創(chuàng)建自己的作用域，增加作用域鏈的長度），多個變量聲明合并。

• HTML代碼：避免圖片和 iFrame等src屬性為空。src屬性為空，會重新加載當前頁面，影響速度和效率，盡量避免在HTML標簽中寫 Style屬性

4、移動端性能如何優(yōu)化？

優(yōu)化方式如下。

• 盡量使用CSS3動畫，開啟硬件加速。

• 適當使用 touch事件代替 click事件。

• 避免使用CSS3漸變陰影效果。

• 可以用 transform:translateZ（0）來開啟硬件加速。

• 不濫用 Float, Float在渲染時計算量比較大，盡量少使用。

• 不濫用Web字體，Web字體需要下載、解析、重繪當前頁面，盡量少使用。

• 合理使用requestAnimation Frame動畫代替 setTimeout。

• 合理使用CSS中的屬性（CSS3 transitions、CSS3 3D transforms、 Opacity、 Canvas、 WebGL、Video）觸發(fā)GPU渲染。過度使用會使手機耗電量増加。

5、如何對網(wǎng)站的文件進行優(yōu)化？

可以進行文件合并、文件壓縮使文件最小化；可以使用CDN托管文件，讓用戶更快速地訪問；可以使用多個域名來緩存靜態(tài)文件。

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

具體方法如下。

（1）優(yōu)化圖片

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

（3）優(yōu)化CSS（壓縮、合并CSS）

（4）在網(wǎng)址后加斜杠

（5）為圖片標明高度和寬度（如果瀏覽器沒有找到這兩個參數(shù)，它需要一邊下載圖片一邊計算大小。如果圖片很多，瀏覽器需要不斷地調(diào)整頁面。這不但影響速度，而且影響瀏覽體驗。當瀏覽器知道高度和寬度參數(shù)后，即使圖片暫時無法顯示，頁面上也會騰出圖片的空位，然后繼續(xù)加載后面的內(nèi)容，從而優(yōu)化加載時間，提升瀏覽體驗）。

7、哪些方法可以提升網(wǎng)站前端性能？

精靈圖合并，減少HTTP請求；壓縮HTML、CSS、JavaScript文件；使用CDN托管靜態(tài)文件；使用 localstorage緩存和 mainfest應用緩存。

8、你知道哪些優(yōu)化性能的方法？

具體方法如下。

（1）減少HTTP請求次數(shù)，控制CSS Sprite、JavaScript與CSS源碼、圖片的大小，使用網(wǎng)頁Gzip、CDN托管、data緩存、圖片服務器

（2）通過前端模板 JavaScript和數(shù)據(jù)，減少由于HTML標簽導致的帶寬浪費，在前端用變量保存Ajax請求結(jié)果，每次操作本地變量時，不用請求，減少請求次數(shù)。

（3）用 innerhTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化 JavaScript性能。

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

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

（6）避免使用CSS表達式，它又稱動態(tài)屬性，

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

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

9、列舉你知道的Web性能優(yōu)化方法。

具體優(yōu)化方法如下。

（1）壓縮源碼和圖片（ JavaScript采用混淆壓縮，CSS進行普通壓縮，JPG圖片根據(jù)具體質(zhì)量壓縮為50%~70%，把PNG圖片從24色壓縮成8色以去掉一些PNG格式信息等）。

（2）選擇合適的圖片格式（顏色數(shù)多用JPG格式，而很少使用PNG格式，如果能通過服務器端判斷瀏覽器支持WebP就用WebP或SVG格式）。

（3）合并靜態(tài)資源（減少HTTP請求）

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

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

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

（7）延長靜態(tài)資源緩存時間。

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

10、平時你是如何對代碼進行性能優(yōu)化的？

利用性能分析工具監(jiān)測性能，包括靜態(tài) Analyze工具和運行時的 Profile工具（在Xcode工具欄中依次單擊 Product→ Profile項可以啟動）。

比如測試程序的運行時間，當單擊 Time Profiler項時，應用程序開始運行，這就能獲取到運行整個應用程序所消耗時間的分布和百分比。為了保證數(shù)據(jù)分析在同一使用場景下的真實性，一定要使用真機，因為此時模擬器在Mac上運行，而Mac上的CPU往往比iOS設備要快。

11、針對CSS，如何優(yōu)化性能？

具體優(yōu)化方法如下。

（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內(nèi)核，所以-0-被淘汰）

（6）避免讓選擇符看起來像是正則表達式。高級選擇器不容易讀懂，執(zhí)行時間也長。

（7）盡量使用id、 class選擇器設置樣式（避免使用 style屬性設置行內(nèi)樣式）

（8）盡量使用CSS3動畫。

（9）減少重繪和回流。

12、針對HTML，如何優(yōu)化性能？

具體方法如下。

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

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

（3）壓縮HTML、CSS、 JavaScript文件。

（4）減少DOM節(jié)點。

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

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

（7）添加 Favicon.ico，如果沒有設置圖標ico，則默認的圖標會導致發(fā)送一個404或者500請求。

13、針對 JavaScript，如何優(yōu)化性能？

具體方法如下。

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

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

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

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

（5）適當使用 canvas動畫。

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

14、如何優(yōu)化服務器端？

具體方法如下。

（1）啟用Gzip壓縮。

（2）延長資源緩存時間，合理設置資源的過期時間，對于一些長期不更新的靜態(tài)資源過期時間設置得長一些。

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

（4）圖片或者CSS、 JavaScript文件均可使用CDN來加速。

15、如何優(yōu)化服務器端的接口？

具體方法如下。

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

（2）減少數(shù)據(jù)量：去掉接口返回的數(shù)據(jù)中不需要的數(shù)據(jù)。

（3）緩存數(shù)據(jù)：首次加載請求后，緩存數(shù)據(jù)；對于非首次請求，優(yōu)先使用上次請求的數(shù)據(jù)，這樣可以提升非首次請求的響應速度。

16、如何優(yōu)化腳本的執(zhí)行？

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

（1）把CSS寫在頁面頭部，把 JavaScript程序?qū)懺陧撁嫖膊炕虍惒讲僮髦小?/p>

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

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

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

17、如何優(yōu)化渲染？

具體方法如下。

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

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

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

（3）盡量使用CSS3動畫，合理使用 requestAnimationFrame動畫代替 setTimeout，適當使用 canvas動畫（5個元素以內(nèi)使用CSS動畫，5個元素以上使用 canvas動畫（iOS 8中可使用 webGL））。

（4）對于高頻事件優(yōu)化 Touchmove, Scroll事件可導致多次渲染。

使用 requestAnimationFrame監(jiān)聽幀變化，以便在正確的時間進行渲染，增加響應變化的時間間隔，減少重繪次數(shù)。

使用節(jié)流模式（基于操作節(jié)流，或者基于時間節(jié)流），減少觸發(fā)次數(shù)。

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

18、如何設置DNS緩存？

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

DNS查詢完成之前，瀏覽器無法識別服務器IP，因此不下載任何數(shù)據(jù)。基于性能考慮，ISP運營商、局域網(wǎng)路由、操作系統(tǒng)、客戶端（瀏覽器）均會有相應的DNS緩存機制。

（1）正IE緩存30min，可以通過注冊表中 DnsCacheTimeout項設置。

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

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

19、什么時候會出現(xiàn)資源訪問失敗？

開發(fā)過程中，發(fā)現(xiàn)很多開發(fā)者沒有設置圖標，而服務器端根目錄也沒有存放默認的 Favicon.ico，從而導致請求404出現(xiàn)。通常在App的 webview里打開 Favicon.ico，不會加載這個 Favicon.ico，但是很多頁面能夠分享。

如果用戶在瀏覽器中打開 Favicon. ico，就會調(diào)取失敗，一般盡量保證該圖標默認存在，文件盡可能小，并設置一個較長的緩存過期時間。另外，應及時清理緩存過期導致岀現(xiàn)請求失敗的資源。

20、jQuery性能優(yōu)化如何做？

優(yōu)化方法如下。

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

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

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

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

（3）以數(shù)組方式使用 jQuery對象。

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

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

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

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

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

HTML5中的data屬性有助于插入數(shù)據(jù)，特別是前、后端的數(shù)據(jù)交換；jQuery的 data( )方法能夠有效地利用HTML5的屬性來自動獲取數(shù)據(jù)。

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的動畫流暢度會明顯優(yōu)于使用left屬性實現(xiàn)的動畫移動，原因是CSS動畫屬性會觸發(fā)整個頁面重排、重繪、重組。paint通常是最耗性能的，盡可能避免使用觸發(fā) paint的CSS動畫屬性。

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

-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;