在前端面試中，首屏優(yōu)化一直是常見的前端性能面試題。

我們可以先用 performance 相關(guān)API 來統(tǒng)計下頁面的 DOM 加載時間。

舊版統(tǒng)計方法，使用 performance:

// 舊版統(tǒng)計性能 performance.timing 已廢棄，不推薦使用
window.onload = () => {
  console.log(performance.timing.domComplete - performance.timing.navigationStart);
}

新版統(tǒng)計方法，使用 PerformanceObserver (推薦使用):

// 新版統(tǒng)計性能 推薦使用
window.onload = () => {
  const observer = new PerformanceObserver((list) => {
    list.getEntries().forEach(entry => {
      console.log(entry.domComplete);
    })
  })
  observer.observe({ entryTypes: ['navigation'] })
}

如果 DOM加載時間 過長，比如超過 1s，就需要考慮進行優(yōu)化了，優(yōu)化的話主要從以下幾個方向進行：

• 網(wǎng)絡(luò)資源請求
• 構(gòu)建工具
• 渲染
• 用戶體驗

一、網(wǎng)絡(luò)資源請求

1.1 減少請求個數(shù)

• 圖片采用 雪碧圖(CSS Sprites)，base64，WebP，圖片懶加載，只加載可視區(qū)域內(nèi)的圖片。
• 某些關(guān)鍵 CSS 可以采用 style 標(biāo)簽內(nèi)聯(lián)的方式，減少 CSS 資源請求數(shù)量。
• 某些數(shù)據(jù)及時性要求沒那么高，可以增加接口緩存，減少請求次數(shù)。

1.2 加快請求速度

• 將圖片進行壓縮，減少圖片大小
• 將靜態(tài)資源 html、css、js 以及圖片 都上傳到 cdn。

二、構(gòu)建工具

這里以 webpack 為例。

2.1 按需打包

對于一些第三方包，我們有時候并不會用到包里全部的內(nèi)容，這時候就可以根據(jù)自己使用的部分進行按需打包，以減少打包后的文件體積。比如 Element-UI、Vant 等組件庫、lodash、moment 等三方包。

2.2 代碼分割 splitChunks

可以手動配置 splitChunks 進行代碼分割：

1. 將一些不怎么變動的包提取到一起，提高緩存復(fù)用率。
2. 一些比較大的包，可以單獨進行代碼分割，按需加載
3. 使用異步組件和異步路由會自動進行代碼分割，推薦將路由都設(shè)置為異步加載，一些比較大的組件，可以定義為異步組件，按需再加載。

2.3 配置 externals

externals 的作用是可以讓某些特定的依賴不打包到最終的 bundle 中，這樣可以大大減少打包后的包體積。

2.4 開啟 tree-shaking

tree-shaking 搖樹優(yōu)化能消除未使用的代碼，減少打包體積。

2.5 開啟 gzip 壓縮

可以使用 compression-webpack-plugin 在打包過程中對資源文件進行壓縮，并在服務(wù)器開啟 gzip，比如如果前端靜態(tài)資源服務(wù)器用的 nginx，就需要修改 nginx 配置。

三、渲染層面

3.1 預(yù)渲染(Prerendering)

預(yù)渲染就是在構(gòu)建時生成靜態(tài)的 HTML，相比于單頁應(yīng)用需要在加載完 javascript 后再通過 js 渲染的方式，預(yù)渲染的首屏加載速度會快很多，而且 SEO 也更友好。

適用場景：內(nèi)容基本靜態(tài)的頁面，且需要更好的用戶體驗和 SEO 友好。

3.2 服務(wù)端渲染(Server-Side Rendering)

服務(wù)端渲染（Server-Side Rendering，簡稱 SSR）是一種在服務(wù)器端將 Vue 組件渲染成HTML 字符串的技術(shù)。它在服務(wù)端拼接好 HTML字符串，然后發(fā)送給客戶端，客戶端無需等待下載和執(zhí)行 javascript，可以直接渲染頁面，這樣能極大提升首屏渲染速度，SEO也更為友好。

適用場景：需要優(yōu)化 SEO，對首屏性能敏感，內(nèi)容安全性高，能接受服務(wù)端渲染需要的額外服務(wù)器成本。

四、用戶體驗

4.1 骨架屏(Skeleton Screen)

骨架屏是在內(nèi)容加載前展示頁面的大致結(jié)構(gòu)框架，用于提升用戶感知性能。

注意點：骨架屏最好是需要在打包時直接注入到 html 中，那種組件庫里面的骨架屏組件的渲染太靠后了，比如 Vant 的 <van-skeleton> 組件，其效果會差很多。

4.2 懶加載

• 圖片懶加載: 只加載可視區(qū)域內(nèi)的圖片。
• 路由懶加載: 只加載當(dāng)前路由的資源。
• 組件懶加載: 只加載當(dāng)前用到的組件。
• 第三方庫懶加載: 使用動態(tài) import 加載第三方庫。
• 按需加載樣式/腳本: 以動態(tài)創(chuàng)建 script標(biāo)簽/link標(biāo)簽 的方式按需加載腳本/樣式。

小結(jié)

本文介紹了首屏優(yōu)化的一些思路和方案，主要從 網(wǎng)絡(luò)資源請求、構(gòu)建工具、渲染 和 用戶體驗 四方面進行優(yōu)化。

• 網(wǎng)絡(luò)資源請求：減少請求個數(shù)和加快請求速度。
• 構(gòu)建工具：通過按需打包、代碼分割、externals、tree-shaking、gzip 等方式進行優(yōu)化。
• 渲染：通過預(yù)渲染/服務(wù)端渲染提高首屏速度。
• 用戶體驗：通過骨架屏和懶加載，提高用戶體驗。

回答示例（面試中怎么說）

“首屏加載慢通常是綜合問題。我的思路是：先測量，再分層優(yōu)化。

測量時，我會用Lighthouse和Network面板看TTFB、關(guān)鍵文件大小和請求鏈。

實際優(yōu)化會從幾個方向入手：

網(wǎng)絡(luò)層：啟用Brotli壓縮、部署CDN、升級HTTP/2。

資源層：路由懶加載、圖片換WebP格式、對非首屏圖片懶加載。

渲染層：內(nèi)聯(lián)關(guān)鍵CSS、用defer加載非核心JS、用preload預(yù)加載字體。

構(gòu)建層：做代碼分割、Tree Shaking，大庫換輕量替代品。

如果項目是內(nèi)容型網(wǎng)站，我會考慮SSR或SSG；如果是SPA，骨架屏+異步組件能有效提升感知速度。最后還要持續(xù)監(jiān)控，用Performance API收集真實用戶數(shù)據(jù)。”

到此這篇關(guān)于首屏加載速度慢怎么解決的文章就介紹到這了,更多相關(guān)前端首屏加載速度慢內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論