21道關(guān)于性能優(yōu)化的面試題(附答案)

作者：佚名 2021-03-19 11:08:27

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

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

因?yàn)樾阅軆?yōu)化變得越來越重要，所以很多企業(yè)專門建立團(tuán)隊(duì)去做性能優(yōu)化。

1、談?wù)勀銓?duì)重構(gòu)的理解。

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

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

把表格（ table）布局改為DV+CSS。
使網(wǎng)站前端兼容現(xiàn)代瀏覽器。
對(duì)移動(dòng)平臺(tái)進(jìn)行優(yōu)化。
針對(duì)搜索引擎進(jìn)行優(yōu)化。

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

減少代碼間的耦合
讓代碼保持彈性。
嚴(yán)格按規(guī)范編寫代碼。
設(shè)計(jì)可擴(kuò)展的API。
代替舊的框架、語言（如VB）
增強(qiáng)用戶體驗(yàn)。
對(duì)速度進(jìn)行優(yōu)化。
壓縮 JavaScript、CSS、 image等前端資源（通常由服務(wù)器來解決）。
優(yōu)化程序的性能（如數(shù)據(jù)讀寫）。
采用CDN來加速資源加載。
優(yōu)化 JavaScript DOM。
緩存HTTP服務(wù)器的文件。

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

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

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

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

如果圖片過大，可以使用特殊編碼的圖片，加載時(shí)會(huì)先加載一張壓縮得特別小的縮略圖，以提高用戶體驗(yàn)。

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

3、談?wù)勑阅軆?yōu)化問題。

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

緩存利用：緩存Ajax，使用CDN、外部 JavaScript和CSS文件緩存，添加 Expires頭，在服務(wù)器端配置Etag，減少DNS查找等。
請(qǐng)求數(shù)量：合并樣式和腳本，使用CSS圖片精靈，初始首屏之外的圖片資源按需加載，靜態(tài)資源延遲加載。
請(qǐng)求帶寬：壓縮文件，開啟GZIP 。
CSS代碼：避免使用CSS表達(dá)式、高級(jí)選擇器、通配選擇器。
JavaScript代碼：用散列表來優(yōu)化查找，少用全局變量，用 innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化 JavaScript性能，用 setTimeout避免頁面失去響應(yīng)，緩存DOM節(jié)點(diǎn)查找的結(jié)果，避免使用with（with會(huì)創(chuàng)建自己的作用域，增加作用域鏈的長度），多個(gè)變量聲明合并。
HTML代碼：避免圖片和 iFrame等src屬性為空。src屬性為空，會(huì)重新加載當(dāng)前頁面，影響速度和效率，盡量避免在HTML標(biāo)簽中寫 Style屬性

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

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

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

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

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

6、請(qǐng)說出幾種縮短頁面加載時(shí)間的方法。

具體方法如下。

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

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

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

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

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

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

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

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

具體方法如下。

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

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

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

（4）當(dāng)需要設(shè)置的樣式很多時(shí)，設(shè)置 className而不是直接操作 Style。

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

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

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

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

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

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

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

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

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

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

（5）開啟服務(wù)器端的Gzip壓縮（對(duì)文本資源非常有效）。

（6）使用CDN（對(duì)公開庫共享緩存）。

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

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

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

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

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

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

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

（1）正確使用 display屬性， display屬性會(huì)影響頁面的渲染，因此要注意以下幾方面。

display:inline后不應(yīng)該再使用 width、 height、 margin、 padding和float 。

display:inline- block后不應(yīng)該再使用 float。

display:block后不應(yīng)該再使用 vertical-align。

display:table-*后不應(yīng)該再使用 margin或者float。

（2）不濫用 float。

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

（4）當(dāng)值為0時(shí)不需要單位。

（5）標(biāo)準(zhǔn)化各種瀏覽器前綴，并注意以下幾方面。

瀏覽器無前綴應(yīng)放在最后。
CSS動(dòng)畫只用（ -webkit-無前綴）兩種即可。
其他前綴包括 -webkit-、-moz-、-ms-、無前綴（ Opera瀏覽器改用 blink內(nèi)核，所以-0-被淘汰）

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

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

（8）盡量使用CSS3動(dòng)畫。

（9）減少重繪和回流。

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

具體方法如下。

（1）對(duì)于資源加載，按需加載和異步加載

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

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

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

（5）避免空src（空src在部分瀏覽器中會(huì)導(dǎo)致無效請(qǐng)求）。

（6）避免30*、40*、50*請(qǐng)求錯(cuò)誤

（7）添加 Favicon.ico，如果沒有設(shè)置圖標(biāo)ico，則默認(rèn)的圖標(biāo)會(huì)導(dǎo)致發(fā)送一個(gè)404或者500請(qǐng)求。

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

具體方法如下。

（1）緩存DOM的選擇和計(jì)算。

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

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

（4）合理使用 requestAnimationFrame動(dòng)畫代替 setTimeOut。

（5）適當(dāng)使用 canvas動(dòng)畫。

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

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

具體方法如下。

（1）啟用Gzip壓縮。

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

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

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

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

具體方法如下。

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

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

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

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

腳本處理不當(dāng)會(huì)阻塞頁面加載、渲染，因此在使用時(shí)需注意。

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

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

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

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

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

具體方法如下。

通過HTML設(shè)置 Viewport元標(biāo)簽， Viewport可以加速頁面的渲染，如以下代碼所示。

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

（2）減少DOM節(jié)點(diǎn)數(shù)量，DOM節(jié)點(diǎn)太多會(huì)影響頁面的渲染，應(yīng)盡量減少DOM節(jié)點(diǎn)數(shù)量。

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

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

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

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

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

18、如何設(shè)置DNS緩存？

在瀏覽器地址欄中輸入U(xiǎn)RL以后，瀏覽器首先要查詢域名（ hostname）對(duì)應(yīng)服務(wù)器的IP地址，一般需要耗費(fèi)20~120ms的時(shí)間。

DNS查詢完成之前，瀏覽器無法識(shí)別服務(wù)器IP，因此不下載任何數(shù)據(jù)?；谛阅芸紤]，ISP運(yùn)營商、局域網(wǎng)路由、操作系統(tǒng)、客戶端（瀏覽器）均會(huì)有相應(yīng)的DNS緩存機(jī)制。

（1）正IE緩存30min，可以通過注冊(cè)表中 DnsCacheTimeout項(xiàng)設(shè)置。

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

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

19、什么時(shí)候會(huì)出現(xiàn)資源訪問失??？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

21、哪些方法能提升移動(dòng)端CSS3動(dòng)畫體驗(yàn)？

（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)；

一個(gè)元素通過 translate3d右移500X的動(dòng)畫流暢度會(huì)明顯優(yōu)于使用left屬性實(shí)現(xiàn)的動(dòng)畫移動(dòng)，原因是CSS動(dòng)畫屬性會(huì)觸發(fā)整個(gè)頁面重排、重繪、重組。paint通常是最耗性能的，盡可能避免使用觸發(fā) paint的CSS動(dòng)畫屬性。

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

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