隨著前端項目不斷擴大，瀏覽器渲染的壓力變得越來越重。配置好一點的計算機可以順利地展現(xiàn)頁面；配置低一些的計算機渲染頁面的性能就不那么可觀了。
性能優(yōu)化部分的面試題主要考察應(yīng)試者對網(wǎng)站性能優(yōu)化的了解。如何做好性能優(yōu)化，哪些操作會引起性能優(yōu)化的問題，性能優(yōu)化指標是什么等，都值得應(yīng)試者關(guān)注。因為性能優(yōu)化變得越來越重要，所以很多企業(yè)專門建立團隊去做性能優(yōu)化。
1、談?wù)勀銓χ貥?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)應(yīng)該考慮以下方面。
減少代碼間的耦合
讓代碼保持彈性。
嚴格按規(guī)范編寫代碼。
設(shè)計可擴展的API。
代替舊的框架、語言（如VB）
增強用戶體驗。
對速度進行優(yōu)化。
壓縮 JavaScript、CSS、 image等前端資源（通常由服務(wù)器來解決）。
優(yōu)化程序的性能（如數(shù)據(jù)讀寫）。
采用CDN來加速資源加載。
優(yōu)化 JavaScript DOM。
緩存HTTP服務(wù)器的文件。
2、如果一個頁面上有大量的圖片（大型電商網(wǎng)站），網(wǎng)頁加載很慢，可以用哪些方法優(yōu)化這些圖片的加載，從而提升用戶體驗？
對于圖片懶加載，可以為頁面添加一個滾動條事件，判斷圖片是否在可視區(qū)域內(nèi)或者即將進入可視區(qū)域，優(yōu)先加載。
如果為幻燈片、相冊文件等，可以使用圖片預(yù)加載技術(shù)，對于當(dāng)前展示圖片的前一張圖片和后一張圖片優(yōu)先下載。
如果圖片為CSS圖片，可以使用 CSS Sprite、SVG sprite、 Icon font、Base64等技術(shù)。
如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮得特別小的縮略圖，以提高用戶體驗。
如果圖片展示區(qū)域小于圖片的真實大小，則應(yīng)在服務(wù)器端根據(jù)業(yè)務(wù)需要先行進行圖片壓縮，圖片壓縮后，圖片大小與展示的就一致了。
3、談?wù)勑阅軆?yōu)化問題。
可以在以下層面優(yōu)化性能。
緩存利用：緩存Ajax，使用CDN、外部 JavaScript和CSS文件緩存，添加 Expires頭，在服務(wù)器端配置Etag，減少DNS查找等。
請求數(shù)量：合并樣式和腳本，使用CSS圖片精靈，初始首屏之外的圖片資源按需加載，靜態(tài)資源延遲加載。
請求帶寬：壓縮文件，開啟GZIP 。
CSS代碼：避免使用CSS表達式、高級選擇器、通配選擇器。
JavaScript代碼：用散列表來優(yōu)化查找，少用全局變量，用 innerHTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化 JavaScript性能，用 setTimeout避免頁面失去響應(yīng)，緩存DOM節(jié)點查找的結(jié)果，避免使用with（with會創(chuàng)建自己的作用域，增加作用域鏈的長度），多個變量聲明合并。
HTML代碼：避免圖片和 iFrame等src屬性為空。src屬性為空，會重新加載當(dāng)前頁面，影響速度和效率，盡量避免在HTML標簽中寫 Style屬性
4、移動端性能如何優(yōu)化？
優(yōu)化方式如下。
盡量使用CSS3動畫，開啟硬件加速。
適當(dāng)使用 touch事件代替 click事件。
避免使用CSS3漸變陰影效果。
可以用 transform:translateZ（0）來開啟硬件加速。
不濫用 Float, Float在渲染時計算量比較大，盡量少使用。
不濫用Web字體，Web字體需要下載、解析、重繪當(dāng)前頁面，盡量少使用。
合理使用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)化圖片
?。?）選擇圖像存儲格式（比如，GIF提供的顏色較少，可用在一些對顏色要求不高的地方）
?。?）優(yōu)化CSS（壓縮、合并CSS）
?。?）在網(wǎng)址后加斜杠
?。?）為圖片標明高度和寬度（如果瀏覽器沒有找到這兩個參數(shù)，它需要一邊下載圖片一邊計算大小。如果圖片很多，瀏覽器需要不斷地調(diào)整頁面。這不但影響速度，而且影響瀏覽體驗。當(dāng)瀏覽器知道高度和寬度參數(shù)后，即使圖片暫時無法顯示，頁面上也會騰出圖片的空位，然后繼續(xù)加載后面的內(nèi)容，從而優(yōu)化加載時間，提升瀏覽體驗）。
7、哪些方法可以提升網(wǎng)站前端性能？
精靈圖合并，減少HTTP請求；壓縮HTML、CSS、JavaScript文件；使用CDN托管靜態(tài)文件；使用 localstorage緩存和 mainfest應(yīng)用緩存。
8、你知道哪些優(yōu)化性能的方法？
具體方法如下。
?。?）減少HTTP請求次數(shù)，控制CSS Sprite、JavaScript與CSS源碼、圖片的大小，使用網(wǎng)頁Gzip、CDN托管、data緩存、圖片服務(wù)器
?。?）通過前端模板 JavaScript和數(shù)據(jù)，減少由于HTML標簽導(dǎo)致的帶寬浪費，在前端用變量保存Ajax請求結(jié)果，每次操作本地變量時，不用請求，減少請求次數(shù)。
?。?）用 innerhTML代替DOM操作，減少DOM操作次數(shù)，優(yōu)化 JavaScript性能。
?。?）當(dāng)需要設(shè)置的樣式很多時，設(shè)置 className而不是直接操作 Style。
?。?）少用全局變量，緩存DOM節(jié)點查找的結(jié)果，減少I/O讀取操作
?。?）避免使用CSS表達式，它又稱動態(tài)屬性，
?。?）預(yù)加載圖片，將樣式表放在頂部，將腳本放在底部，加上時間戳。
?。?）避免在頁面的主體布局中使用表，表要在其中的內(nèi)容完全下載之后才會顯示出來，顯示的速度比DIV+CSS布局慢。
9、列舉你知道的Web性能優(yōu)化方法。
具體優(yōu)化方法如下。
（1）壓縮源碼和圖片（ JavaScript采用混淆壓縮，CSS進行普通壓縮，JPG圖片根據(jù)具體質(zhì)量壓縮為50%~70%，把PNG圖片從24色壓縮成8色以去掉一些PNG格式信息等）。
?。?）選擇合適的圖片格式（顏色數(shù)多用JPG格式，而很少使用PNG格式，如果能通過服務(wù)器端判斷瀏覽器支持WebP就用WebP或SVG格式）。
?。?）合并靜態(tài)資源（減少HTTP請求）
?。?）把多個CSS合并為一個CSS，把圖片組合成雪碧圖。
?。?）開啟服務(wù)器端的Gzip壓縮（對文本資源非常有效）。
?。?）使用CDN（對公開庫共享緩存）。
（7）延長靜態(tài)資源緩存時間。
（8）把CSS放在頁面頭部把 JavaScript代碼放在頁面底部（這樣避免阻塞頁面渲染而使頁面出現(xiàn)長時間的空白）
10、平時你是如何對代碼進行性能優(yōu)化的？
利用性能分析工具監(jiān)測性能，包括靜態(tài) Analyze工具和運行時的 Profile工具（在Xcode工具欄中依次單擊 Product→ Profile項可以啟動）。
比如測試程序的運行時間，當(dāng)單擊 Time Profiler項時，應(yīng)用程序開始運行，這就能獲取到運行整個應(yīng)用程序所消耗時間的分布和百分比。為了保證數(shù)據(jù)分析在同一使用場景下的真實性，一定要使用真機，因為此時模擬器在Mac上運行，而Mac上的CPU往往比iOS設(shè)備要快。
11、針對CSS，如何優(yōu)化性能？
具體優(yōu)化方法如下。
?。?）正確使用 display屬性， display屬性會影響頁面的渲染，因此要注意以下幾方面。
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。
?。?）不濫用 float。
?。?）不聲明過多的font-size。
?。?）當(dāng)值為0時不需要單位。
?。?）標準化各種瀏覽器前綴，并注意以下幾方面。
瀏覽器無前綴應(yīng)放在最后。
CSS動畫只用（ -webkit-無前綴）兩種即可。
其他前綴包括 -webkit-、-moz-、-ms-、無前綴（ Opera瀏覽器改用 blink內(nèi)核，所以-0-被淘汰）
?。?）避免讓選擇符看起來像是正則表達式。高級選擇器不容易讀懂，執(zhí)行時間也長。
?。?）盡量使用id、 class選擇器設(shè)置樣式（避免使用 style屬性設(shè)置行內(nèi)樣式）
（8）盡量使用CSS3動畫。
?。?）減少重繪和回流。
12、針對HTML，如何優(yōu)化性能？
具體方法如下。
?。?）對于資源加載，按需加載和異步加載
?。?）首次加載的資源不超過1024KB，即越小越好。
（3）壓縮HTML、CSS、 JavaScript文件。
（4）減少DOM節(jié)點。
?。?）避免空src（空src在部分瀏覽器中會導(dǎo)致無效請求）。
（6）避免30*、40*、50*請求錯誤
?。?）添加 Favicon.ico，如果沒有設(shè)置圖標ico，則默認的圖標會導(dǎo)致發(fā)送一個404或者500請求。
13、針對 JavaScript，如何優(yōu)化性能？
具體方法如下。
?。?）緩存DOM的選擇和計算。
?。?）盡量使用事件委托模式，避免批量綁定事件。
（3）使用 touchstart、 touchend代替 click。
（4）合理使用 requestAnimationFrame動畫代替 setTimeOut。
?。?）適當(dāng)使用 canvas動畫。
（6）盡量避免在高頻事件（如 TouchMove、 Scroll事件）中修改視圖，這會導(dǎo)致多次渲染。
14、如何優(yōu)化服務(wù)器端？
具體方法如下。
?。?）啟用Gzip壓縮。
?。?）延長資源緩存時間，合理設(shè)置資源的過期時間，對于一些長期不更新的靜態(tài)資源過期時間設(shè)置得長一些。
?。?）減少 cookie頭信息的大小，頭信息越大，資源傳輸速度越慢。
?。?）圖片或者CSS、 JavaScript文件均可使用CDN來加速。
15、如何優(yōu)化服務(wù)器端的接口？
具體方法如下。
（1）接口合并：如果一個頁面需要請求兩部分以上的數(shù)據(jù)接口，則建議合并成一個以減少HTTP請求數(shù)。
?。?）減少數(shù)據(jù)量：去掉接口返回的數(shù)據(jù)中不需要的數(shù)據(jù)。
（3）緩存數(shù)據(jù)：首次加載請求后，緩存數(shù)據(jù)；對于非首次請求，優(yōu)先使用上次請求的數(shù)據(jù)，這樣可以提升非首次請求的響應(yīng)速度。
16、如何優(yōu)化腳本的執(zhí)行？
腳本處理不當(dāng)會阻塞頁面加載、渲染，因此在使用時需注意。
?。?）把CSS寫在頁面頭部，把 JavaScript程序?qū)懺陧撁嫖膊炕虍惒讲僮髦小?/p>
（2）避免圖片和 iFrame等的空src，空src會重新加載當(dāng)前頁面，影響速度和效率。
（3）盡量避免重設(shè)圖片大小。重設(shè)圖片大小是指在頁面、CSS、 JavaScript文件等中多次重置圖片大小，多次重設(shè)圖片大小會引發(fā)圖片的多次重繪，影響性能
?。?）圖片盡量避免使用 DataURL。DataURL圖片沒有使用圖片的壓縮算法，文件會變大，并且要在解碼后再渲染，加載慢，耗時長。
17、如何優(yōu)化渲染？
具體方法如下。
通過HTML設(shè)置 Viewport元標簽， Viewport可以加速頁面的渲染，如以下代碼所示。
?。?）減少DOM節(jié)點數(shù)量，DOM節(jié)點太多會影響頁面的渲染，應(yīng)盡量減少DOM節(jié)點數(shù)量。
（3）盡量使用CSS3動畫，合理使用 requestAnimationFrame動畫代替 setTimeout，適當(dāng)使用 canvas動畫（5個元素以內(nèi)使用CSS動畫，5個元素以上使用 canvas動畫（iOS 8中可使用 webGL））。
?。?）對于高頻事件優(yōu)化 Touchmove, Scroll事件可導(dǎo)致多次渲染。
使用 requestAnimationFrame監(jiān)聽幀變化，以便在正確的時間進行渲染，增加響應(yīng)變化的時間間隔，減少重繪次數(shù)。
使用節(jié)流模式（基于操作節(jié)流，或者基于時間節(jié)流），減少觸發(fā)次數(shù)。
?。?）提升GPU的速度，用CSS中的屬性（CSS3 transitions、CSS3 3D transforms、 Opacity、 Canvas、 WebGL、Video）來觸發(fā)GPU渲染.
18、如何設(shè)置DNS緩存？
在瀏覽器地址欄中輸入URL以后，瀏覽器首先要查詢域名（ hostname）對應(yīng)服務(wù)器的IP地址，一般需要耗費20~120ms的時間。
DNS查詢完成之前，瀏覽器無法識別服務(wù)器IP，因此不下載任何數(shù)據(jù)?；谛阅芸紤]，ISP運營商、局域網(wǎng)路由、操作系統(tǒng)、客戶端（瀏覽器）均會有相應(yīng)的DNS緩存機制。
（1）正IE緩存30min，可以通過注冊表中 DnsCacheTimeout項設(shè)置。
?。?） Firefox混存1 min，通過 network.dnsCacheExpiration配置。
?。?）在 Chrome中通過依次單擊“設(shè)置”→“選項”→“高級選項”，并勾選“用預(yù)提取DNS提高網(wǎng)頁載入速度”選項來配置緩存時間。
19、什么時候會出現(xiàn)資源訪問失敗？
開發(fā)過程中，發(fā)現(xiàn)很多開發(fā)者沒有設(shè)置圖標，而服務(wù)器端根目錄也沒有存放默認的 Favicon.ico，從而導(dǎo)致請求404出現(xiàn)。通常在App的 webview里打開 Favicon.ico，不會加載這個 Favicon.ico，但是很多頁面能夠分享。
如果用戶在瀏覽器中打開 Favicon. ico，就會調(diào)取失敗，一般盡量保證該圖標默認存在，文件盡可能小，并設(shè)置一個較長的緩存過期時間。另外，應(yīng)及時清理緩存過期導(dǎo)致岀現(xiàn)請求失敗的資源。
20、jQuery性能優(yōu)化如何做？
優(yōu)化方法如下。
?。?）使用最新版本的 jQuery類庫。
JQuery類庫每一個新的版本都會對上一個版本進行Bug修復(fù)和一些優(yōu)化，同時也會包含一些創(chuàng)新，所以建議使用最新版本的 jQuery類庫提高性能。不過需要注意的是，在更換版本之后，不要忘記測試代碼，畢竟有時候不是完全向后兼容的。
?。?）使用合適的選擇器。
jQuery提供非常豐富的選擇器，選擇器是開發(fā)人員最常使用的功能，但是使用不同選擇器也會帶來性能問題。建議使用簡凖選擇器，如i選擇器、類選擇器，不要將i選擇器嵌套等。
（3）以數(shù)組方式使用 jQuery對象。
使用 jQuery選擇器獲取的結(jié)果是一個 jQuery對象。然而， jQuery類庫會讓你感覺正在使用一個定義了索引和長度的數(shù)組。在性能方面，建議使用簡單的for或者 while循環(huán)來處理，而不是$. each()，這樣能使代碼更快。
?。?）每一個 JavaScript事件（例如 click、 mouseover等）都會冒泡到父級節(jié)點。當(dāng)需要給多個元素綁定相同的回調(diào)函數(shù)時，建議使用事件委托模式。
?。?）使用join( )來拼接字符串。
使用 join( )拼接長字符串，而不要使用“+”拼接字符串，這有助于性能優(yōu)化，特別是處理長字符串的時候。
（6）合理利用HTML5中的data屬性。
HTML5中的data屬性有助于插入數(shù)據(jù)，特別是前、后端的數(shù)據(jù)交換；jQuery的 data( )方法能夠有效地利用HTML5的屬性來自動獲取數(shù)據(jù)。
21、哪些方法能提升移動端CSS3動畫體驗？
?。?）盡可能多地利用硬件能力，如使用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;
?。?）盡可能少使用box- shadows和 gradients，它們往往嚴重影響頁面的性能，尤其是在一個元素中同時都使用時。
?。?）盡可能讓動畫元素脫離文檔流，以減少重排，如以下代碼所示。
position:fixed；
position:absolute;
