「面試專欄」前端面試之性能優化篇

• 💬序言
• 💯思維導圖搶先看
• 👁??🗨?一、html、css、js、jq優化
• • • 1、針對HTML，如何優化性能？
    • 2、針對CSS，如何優化性能？
    • 3、哪些方法能提升移動端CSS3動畫體驗？
    • 4、針對 JavaScript，如何優化性能？
    • 5、jQuery性能優化如何做？
• 🗨?二、網站端、移動端優化
• • • 1、談談你對重構的理解。
    • 2、列舉你知道的Web性能優化方法。
    • 3、移動端性能如何優化？
    • 4、哪些方法可以提升網站前端性能？
    • 5、談談性能優化問題。
    • 6、如果一個頁面上有大量的圖片（大型電商網站），網頁加載很慢，可以用哪些方法優化這些圖片的加載，從而提升用戶體驗？
    • 7、如何對網站的文件進行優化？
    • 8、請說出幾種縮短頁面加載時間的方法。
    • 9、你知道哪些優化性能的方法？
    • 10、你知道哪些SEO搜索引擎優化的方法？
• 🗯?三、代碼、服務器端優化
• • • 1、平時你是如何對代碼進行性能優化的？
    • 2、如何優化服務器端？
    • 3、如何優化服務器端的接口？
    • 4、如何優化腳本的執行？
    • 5、頁面渲染有哪些優化方式？
    • 6、如何設置DNS緩存？
    • 7、什么時候會出現資源訪問失敗？
    • 8、為什么利用多個域名來存儲網站資源會更有效？
    • 9、有一個頁面，他必須實時展示最新的數據，你有哪些方案？
• 💭四、性能優化文章補充
• 💯五、結束語
• 🐣彩蛋 One More Thing
• • 🏷?參考資料
  • 🏷?pdf內容獲取
  • 🏷?番外篇

💬序言

平常我們在加載網頁的時候，首先需要先加載網頁代碼，之后渲染出頁面，在這個期間會執行若干個 JS 。那么，如果想要讓網頁呈現速度和渲染速度快，我們就得保證我們的代碼在瀏覽器這個運行環境當中穩定且高效。這就談到一個前端性能優化的問題。

以下這篇文章將講解一些關于性能優化的常考題，歡迎大家查閱~

💯思維導圖搶先看

我們先用一張思維導圖來梳理一遍知識點。詳情見下圖👇

思維導圖收進囊中了。現在，我們一起來看常見的面試題解答~

👁??🗨?一、html、css、js、jq優化

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

具體方法如下：

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

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

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

（4） 減少 DOM 節點。

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

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

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

2、針對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） 將樣式表放在頁面頂部。

（6） 使用less 、scss 表達式。

（7） 使用 link 不使用 @import 引入樣式。

• link 是 HTML 方式，@import 是 CSS 方式；
• link 最大限度支持并行下載，@import 過多嵌套會導致串行下載，會出現 FOUC （文檔樣式短暫失效）；
• 瀏覽器對 link 支持早于 @import ，可以使用 @import 對老瀏覽器隱藏樣式；
• 總體來說：link 優于 @import ，且 link 優先級也更高。

（8） 盡量使用 id 、 class 選擇器設置樣式（避免使用 style 屬性設置行內樣式）。

（9） 標準化各種瀏覽器前綴，并注意以下幾個方面：

• 瀏覽器無前綴應放在最后。
• CSS 動畫只用（ -webkit- 和 無前綴）兩種即可。
• 其他前綴包括 -webkit-、-moz-、-ms-、無前綴（ Opera瀏覽器改用 blink內核，所以-0-被淘汰）。

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

（11） 禁止使用 gif 圖片實現 loading 效果，盡量使用 CSS3 動畫實現（降低CPU消耗，提升渲染性能）。

（12） 使用 css3 代碼代替 js 動畫，盡可能地避免重繪和回流。

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

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

-webkit-transform: translate3d(0, 0, 0); -moz-transform : translate3d(0,0, 0); -ms-transform : translate3d(0,0,0); transform: translate3d(0,0,0);

一個元素通過 translate3d 右移 500PX 的動畫流暢度會明顯優于使用 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;

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

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

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

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

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

（5） 適當使用 canvas 動畫。

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

5、jQuery性能優化如何做？

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

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

（2）使用合適的選擇器

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

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

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

（4）使用事件委托模式

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

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

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

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

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

🗨?二、網站端、移動端優化

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

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

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

• 把表格 (table) 布局改為 div+css 。
• 使網站前端兼容現代瀏覽器。
• 對移動平臺進行優化。
• 針對搜索引擎進行優化。

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

• 減少代碼間的耦合。
• 讓代碼保持彈性。
• 嚴格按規范編寫代碼。
• 設計可擴展的 API 。
• 代替舊的框架、語言（如 VB ）。
• 增強用戶體驗。
• 對速度進行優化。
• 壓縮 JavaScript、CSS、 image 等前端資源（通常由服務器來解決）。
• 優化程序的性能（如數據讀寫）。
• 采用 CDN 來加速資源加載。
• 優化 JavaScript DOM 。
• 緩存 HTTP 服務器的文件。

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

具體優化方法如下：

• 壓縮源碼和圖片。
  • JavaScript 采用混淆壓縮；
  • CSS 進行普通壓縮；
  • JPG 圖片根據具體質量壓縮為 50%~70% ，把 PNG 圖片從24色壓縮成8色以去掉一些 PNG 格式信息等）。
• 選擇合適的圖片格式（顏色數多用 JPG 格式，而很少使用 PNG 格式，如果能通過服務器端判斷瀏覽器支持WebP 就用WebP 或 SVG 格式）。
• 合并靜態資源（減少 HTTP 請求）。
• 把多個 CSS 合并為一個 CSS ，把圖片組合成雪碧圖。
  • 雪碧圖是什么？有什么優點？
  • 雪碧圖也稱為精靈圖，指將多張圖片合并到一張圖片中，可以減小圖片的總大小；
  • 將多張圖片合并到一張圖片后，只需一次網絡請求就可以將所需的資源全部下載，減小建立連接的消耗，在移動端尤為明顯。
• 開啟服務器端的 Gzip 壓縮（對文本資源非常有效）。
  • Gzip壓縮如何壓縮文件？
  • gzip 對于要壓縮的文件，首先使用 LZ77 算法的一個變種進行壓縮，對得到的結果再使用 Huffman 編碼的方法。
• 使用 CDN（對公開庫共享緩存）。
  • CDN是什么？
  • CDN 指的是內容分發網絡。
  • 其基本思路是盡可能的避開互聯網上有可能影響數據傳輸速度和穩定性的瓶頸和環節，使內容傳輸的更快、更穩定。
  • 如何使用CDN？
  • 在云服務商購買 CDN 服務，之后使用 CDN 加載靜態資源。
• 延長靜態資源緩存時間。
• 把 CSS 放在頁面頭部，把 JavaScript 代碼放在頁面底部（這樣避免阻塞頁面渲染而使頁面出現長時間的空白）。

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

優化方式如下。

• 盡量使用 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渲染。過度使用會使手機耗電量増加。

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

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

5、談談性能優化問題。

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

• 緩存利用：緩存 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 屬性。

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

• 對于圖片懶加載，可以為頁面添加一個滾動條事件，判斷圖片是否在可視區域內或者即將進入可視區域，優先加載。
• 如果為幻燈片、相冊文件等，可以使用圖片預加載技術，對于當前展示圖片的前一張圖片和后一張圖片優先下載。
• 如果圖片為 CSS 圖片，可以使用 CSS Sprite 、 SVG sprite 、 iconfont 、 Base64 等技術。
  • 什么時候用base64編碼？
  • 當圖片足夠小，且需要多次復用時使用base64編碼。
  • 注意：①大圖片使用 base64 編碼后，可能會使圖片增大原圖的 1/3 ，所以 base64 編碼并不適用于大圖片。②使用 base64 編碼圖片并不意味著性能優化。
• 如果圖片過大，可以使用特殊編碼的圖片，加載時會先加載一張壓縮得特別小的縮略圖，以提高用戶體驗。
• 如果圖片展示區域小于圖片的真實大小，則應在服務器端根據業務需要先行進行圖片壓縮，圖片壓縮后，圖片大小與展示的就一致了。

7、如何對網站的文件進行優化？

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

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

具體方法如下：

（1） 優化圖片。

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

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

（4） 在網址后加斜杠。

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

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

具體方法如下。

（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 布局慢。

10、你知道哪些SEO搜索引擎優化的方法？

• 合理的 title 、description 、keywords ：
  • 搜索對著三項的權重逐個減小， title 值強調重點即可，重要關鍵詞出現不要超過2次，而且要靠前，不同頁面 title 要有所不同；
  • description 把頁面內容高度概括，長度合適，不可過分堆砌關鍵詞，不同頁面 description 有所不同；
  • keywords 列舉出重要關鍵詞即可。
• 語義化的 HTML 代碼，符合 W3C 規范：語義化代碼讓搜索引擎容易理解網頁。
• 重要內容 HTML 代碼放在最前：搜索引擎抓取 HTML 順序是從上到下，有的搜索引擎對抓取長度有限制，保證重要內容一定會被抓取。
• 重要內容不要用 js輸出：爬蟲不會執行 js 獲取內容。
• 少用 iframe ：搜索引擎不會抓取 iframe 中的內容。
• 非裝飾性圖片必須加 alt。
• 提高網站速度：網站速度是搜索引擎排序的一個重要指標。

🗯?三、代碼、服務器端優化

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

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

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

2、如何優化服務器端？

具體方法如下：

（1）對組件啟用 Gzip 壓縮。

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

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

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

3、如何優化服務器端的接口？

具體方法如下：

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

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

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

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

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

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

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

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

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

5、頁面渲染有哪些優化方式？

具體方法如下：

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

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

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

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

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

• 使用 requestAnimation Frame 監聽幀變化，以便在正確的時間進行渲染，增加響應變化的時間間隔，減少重繪次數。
• 使用節流模式（基于操作節流，或者基于時間節流），減少觸發次數。

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

6、如何設置DNS緩存？

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

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

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

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

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

7、什么時候會出現資源訪問失敗？

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

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

8、為什么利用多個域名來存儲網站資源會更有效？

• CDN 緩存更方便；
• 突破瀏覽器并發限制；
• 節約 cookie 帶寬；
• 節約主域名的連接數，優化頁面響應速度；
• 防止不必要的安全問題。

9、有一個頁面，他必須實時展示最新的數據，你有哪些方案？

• http 輪詢，使用ajax配合定時器定時請求數據更新；
• websocket ，用來處理服務器端推送的長連接協議。

💭四、性能優化文章補充

詳解文章補充👇

• 原文：關于前端性能優化問題，認識網頁加載過程和防抖節流
• 鏈接：https://juejin.cn/post/6973062729925918756

💯五、結束語

隨著前端項目不斷擴大，瀏覽器渲染的壓力變得越來越重，因此，很多企業專都會專門成立團隊去做性能優化。對于性能優化的面試題來說，主要考察應試者對網站性能優化是否有一定了解。

因此，如何做好性能優化，哪些操作會引起性能優化的問題，都值得應試者關注。

到這里，關于性能優化相關的面試題講到這里就結束啦！希望對大家有幫助~

🐣彩蛋 One More Thing

🏷?參考資料

👉21道關于性能優化的面試題(附答案)

🏷?pdf內容獲取

👉 微信搜索 星期一研究室 并關注，回復關鍵詞 性能優化面試pdf 獲取相關 pdf 內容~

👉回復 面試大全pdf 可獲取全專欄內容！

🏷?番外篇

• 如果這篇文章對你有用，記得留個腳印jio再走哦~
• 以上就是本文的全部內容！我們下期見！👋👋👋

總結

以上是生活随笔為你收集整理的「offer来了」快来关注这些性能优化问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。