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

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

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

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

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

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

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

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

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

1.1 減少請(qǐng)求個(gè)數(shù)

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

1.2 加快請(qǐng)求速度

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

二、構(gòu)建工具

這里以 webpack 為例。

2.1 按需打包

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

2.2 代碼分割 splitChunks

可以手動(dòng)配置 splitChunks 進(jìn)行代碼分割：

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

2.3 配置 externals

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

2.4 開啟 tree-shaking

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

2.5 開啟 gzip 壓縮

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

三、渲染層面

3.1 預(yù)渲染(Prerendering)

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

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

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

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

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

四、用戶體驗(yàn)

4.1 骨架屏(Skeleton Screen)

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

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

4.2 懶加載

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

小結(jié)

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

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

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

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

測(cè)量時(shí)，我會(huì)用Lighthouse和Network面板看TTFB、關(guān)鍵文件大小和請(qǐng)求鏈。

實(shí)際優(yōu)化會(huì)從幾個(gè)方向入手：

網(wǎng)絡(luò)層：?jiǎn)⒂肂rotli壓縮、部署CDN、升級(jí)HTTP/2。

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

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

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

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

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

最新評(píng)論