首屏加載時(shí)間是一個(gè)衡量網(wǎng)頁(yè)性能和用戶體驗(yàn)的關(guān)鍵指標(biāo)，這個(gè)問(wèn)題無(wú)論是在面試中還是在項(xiàng)目開(kāi)發(fā)中都占有極其高的權(quán)重。它指的是從用戶開(kāi)始請(qǐng)求網(wǎng)頁(yè)到網(wǎng)頁(yè)的第一屏內(nèi)容完全渲染完成并對(duì)用戶可見(jiàn)的時(shí)間。首屏 指的是用戶不滾動(dòng)頁(yè)面時(shí)看到的那部分內(nèi)容，通常是訪問(wèn)網(wǎng)站或應(yīng)用時(shí)最先展示給用戶的信息區(qū)域。

首屏加載時(shí)間的長(zhǎng)短直接影響用戶的第一印象和留存率，因?yàn)橛脩敉鶎?duì)加載速度較慢的網(wǎng)站或應(yīng)用有較低的耐心。如果首屏加載時(shí)間過(guò)長(zhǎng)，用戶可能會(huì)感到不耐煩，甚至在內(nèi)容完全加載前離開(kāi)，這樣就增加了跳出率，降低了用戶體驗(yàn)。

白屏?xí)r間是指從用戶發(fā)起頁(yè)面請(qǐng)求（比如點(diǎn)擊一個(gè)鏈接或在瀏覽器地址欄輸入網(wǎng)址）到頁(yè)面開(kāi)始出現(xiàn)第一批可視化內(nèi)容（不是完全的空白）之間的時(shí)間。在這段時(shí)間內(nèi)，用戶面對(duì)的是一片空白屏幕，因此稱之為“白屏?xí)r間”。白屏?xí)r間主要受網(wǎng)絡(luò)速度、服務(wù)器響應(yīng)速度和初步渲染所需的資源大小等因素影響。

代碼分割

在結(jié)合 Webpack 和 React 的項(xiàng)目中，代碼分割（Code Splitting）是一種重要的性能優(yōu)化手段，特別是對(duì)于首屏加載時(shí)間的優(yōu)化。代碼分割可以將一個(gè)大的 bundle 文件拆分成多個(gè)小的 chunks（塊），這樣可以按需加載，減少首次加載的時(shí)間，加快首屏顯示。

Webpack 的 SplitChunksPlugin 可以用來(lái)自動(dòng)分割公共模塊和第三方庫(kù)。通過(guò)合理配置 optimization.splitChunks 選項(xiàng)，可以把公共依賴提取到單獨(dú)的 chunk 中，避免重復(fù)打包，減少首屏加載的體積。

optimization: {
  splitChunks: {
    chunks: 'all', // 可以是`async`（僅分割異步加載模塊），`initial`（僅分割初始加載模塊），或`all`（兩者都分割）
    minSize: 20000, // 生成chunk的最小體積（以字節(jié)為單位）
    minChunks: 1, // 在分割之前，模塊被共享的最少次數(shù)
    maxAsyncRequests: 30, // 按需加載時(shí)的最大并行請(qǐng)求數(shù)
    maxInitialRequests: 30, // 入口點(diǎn)的最大并行請(qǐng)求數(shù)
    automaticNameDelimiter: '~', // 默認(rèn)情況下，webpack將使用塊的來(lái)源和名稱生成名稱（例如vendors~main.js）
    cacheGroups: { // 緩存組可以繼承和/或覆蓋splitChunks.*的任何選項(xiàng)
      vendors: {
        test: /[\\/]node_modules[\\/]/,
        priority: -10
      },
      default: {
        minChunks: 2,
        priority: -20,
        reuseExistingChunk: true
      }
    }
  }
}

在 React 中，可以使用動(dòng)態(tài)導(dǎo)入的方法來(lái)，利用 import()語(yǔ)法實(shí)現(xiàn)動(dòng)態(tài)導(dǎo)入，Webpack 會(huì)自動(dòng)將這些導(dǎo)入的模塊分割成新的 chunk。對(duì)于 React 組件，可以結(jié)合 React.lazy 進(jìn)行按需加載。

const LazyComponent = React.lazy(() => import("./LazyComponent"));

使用 Webpack 的魔法注釋來(lái)實(shí)現(xiàn)更細(xì)致的控制，比如命名 chunk、預(yù)加載和預(yù)獲取。

const LazyComponent = React.lazy(() =>
  import(/* webpackChunkName: "lazy-component" */ "./LazyComponent")
);
// 預(yù)加載
const AnotherComponent = React.lazy(() =>
  import(/* webpackPrefetch: true */ "./AnotherComponent")
);
// 預(yù)獲取
const YetAnotherComponent = React.lazy(() =>
  import(/* webpackPreload: true */ "./YetAnotherComponent")
);

為動(dòng)態(tài)導(dǎo)入的組件提供加載狀態(tài)，可以使用 Suspense 組件來(lái)包裹懶加載的組件，并指定一個(gè) fallback 加載指示器:

對(duì)于使用 React Router 之類的路由庫(kù)的應(yīng)用，可以在路由配置中應(yīng)用代碼分割，為每個(gè)路由頁(yè)面實(shí)現(xiàn)懶加載：

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import React, { Suspense, lazy } from "react";

const Home = lazy(() => import("./routes/Home"));
const About = lazy(() => import("./routes/About"));

const App = () => (
  <Router>
    <Suspense fallback={<div>Loading...</div>}>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Suspense>
  </Router>
);

優(yōu)化資源加載

優(yōu)化資源加載是提高網(wǎng)頁(yè)性能、尤其是首屏加載速度的關(guān)鍵方面。資源包括 JavaScript、CSS、圖片、字體等。優(yōu)化這些資源的加載可以顯著改善用戶體驗(yàn)。

減少請(qǐng)求次數(shù)

將多個(gè)小的 JavaScript 或 CSS 文件合并成一個(gè)文件是一種常見(jiàn)的前端性能優(yōu)化策略。這種做法可以減少 HTTP 請(qǐng)求的次數(shù)，從而提高頁(yè)面加載速度和用戶體驗(yàn)。

為什么要合并文件：

• 減少 HTTP 請(qǐng)求：每個(gè)文件的請(qǐng)求都涉及到一定的開(kāi)銷（如 DNS 查找、TCP 握手等），特別是在 HTTP/1.x 協(xié)議下，這些開(kāi)銷會(huì)顯著影響加載性能。通過(guò)合并文件，可以減少這些請(qǐng)求的次數(shù)，從而減少總體開(kāi)銷。
• 提高緩存效率：將多個(gè)文件合并為一個(gè)，可以提高瀏覽器緩存的利用率。用戶在首次訪問(wèn)網(wǎng)站時(shí)加載了合并后的文件，之后再次訪問(wèn)或訪問(wèn)其他頁(yè)面時(shí)，如果使用了相同的合并文件，就可以直接從緩存中加載，而不需要再次發(fā)起請(qǐng)求。

合并文件時(shí)，需要注意文件之間的依賴關(guān)系，確保合并后的文件在執(zhí)行時(shí)能保持正確的依賴順序。對(duì)于一些不需要立即執(zhí)行的 JavaScript 模塊或 CSS 文件，可以考慮使用異步加載的方式，避免阻塞頁(yè)面的渲染。

如果服務(wù)器支持 HTTP/2，利用其多路復(fù)用功能，可以同時(shí)傳輸多個(gè)請(qǐng)求，減少了合并文件的必要性。但即使在 HTTP/2 環(huán)境下，合理的文件合并仍然有其優(yōu)勢(shì)，尤其是在緩存管理和初始加載性能方面。

對(duì)于圖片可以合并多個(gè)小圖片到一個(gè)大圖集中，并通過(guò) CSS 背景定位來(lái)展示特定部分的技術(shù)，被稱為 CSS 雪碧圖（CSS Sprites）。這種方法有效減少了圖片請(qǐng)求的次數(shù)，提升了頁(yè)面加載性能。另一種優(yōu)化手段是將小圖標(biāo)或頁(yè)面中的小圖片轉(zhuǎn)換為 Base64 編碼格式并直接嵌入到 HTML 或 CSS 中，進(jìn)一步減少 HTTP 請(qǐng)求。但需注意，Base64 編碼會(huì)使圖片體積增大約 33%，因此更適用于較小的圖片。這兩種技術(shù)都是前端性能優(yōu)化的常用方法，旨在加快頁(yè)面渲染速度和提升用戶體驗(yàn)。

使用現(xiàn)代圖片格式

WebP 和 AVIF 是相對(duì)較新的圖像格式，相比傳統(tǒng)的 JPEG 和 PNG 格式，它們提供了更高的壓縮效率，這意味著在保持相似圖像質(zhì)量的情況下，文件大小更小。這背后的原因主要涉及到這些格式采用的先進(jìn)編碼技術(shù)：

webp

先進(jìn)的壓縮算法：WebP 格式使用了基于 VP8 視頻編解碼器的壓縮技術(shù)。這種技術(shù)針對(duì)圖像內(nèi)容進(jìn)行更高效的壓縮，通過(guò)減少編碼圖像塊的位數(shù)來(lái)減小文件大小，同時(shí)盡量保持圖像質(zhì)量。

支持無(wú)損和有損壓縮：WebP 既支持無(wú)損壓縮，也支持有損壓縮。無(wú)損壓縮 WebP 圖像通常比 PNG 小 30%，而有損壓縮的 WebP 圖像則比 JPEG 小 25-34%，并且可以提供相同甚至更好的質(zhì)量。

豐富的顏色表現(xiàn)：WebP 支持更廣的顏色范圍和深度，包括 8 位或 10 位色深的有損編碼和 8 位色深的無(wú)損編碼，這使得它在色彩表現(xiàn)上優(yōu)于標(biāo)準(zhǔn)的 JPEG 格式。

集成了額外的功能：如支持透明度（Alpha 通道）和動(dòng)畫(huà)，這使得 WebP 成為一種非常靈活的圖像格式，能夠替代 GIF 等格式。

AVIF

基于 AV1 視頻編解碼器：AVIF 是一種新的圖像格式，基于開(kāi)源的 AV1 視頻編解碼器。AV1 是由聯(lián)盟視頻聯(lián)盟開(kāi)發(fā)的，旨在網(wǎng)絡(luò)上提供高效的視頻流傳輸。

更高效的壓縮性能：AVIF 提供了比 WebP 更高的壓縮效率，尤其是在高分辨率和高質(zhì)量圖像上。在相同的視覺(jué)質(zhì)量下，AVIF 文件的大小通常比 WebP 更小。

更好的圖像質(zhì)量：AVIF 支持更高的動(dòng)態(tài)范圍和顏色深度，包括 HDR（高動(dòng)態(tài)范圍圖像）和廣色域圖像，這意味著它可以提供更豐富的色彩和更細(xì)膩的圖像細(xì)節(jié)。

更多的編碼特性：AVIF 支持多種編碼特性，如 10 位和 12 位色深、4:4:4、4:2:2 和 4:2:0 色度子采樣等，這為圖像提供了更多的靈活性和選擇。

總的來(lái)說(shuō)，WebP 和 AVIF 之所以能在保持相同圖片質(zhì)量的同時(shí)減少文件大小，主要是因?yàn)樗鼈儾捎昧烁咝У膲嚎s算法和更先進(jìn)的編碼技術(shù)。這些技術(shù)使得 WebP 和 AVIF 能夠更好地減少冗余信息，從而在不犧牲圖像質(zhì)量的前提下降低文件大小。這些特性使得 WebP 和 AVIF 非常適合用于網(wǎng)絡(luò)圖像，以提高網(wǎng)頁(yè)加載速度和改善用戶體驗(yàn)。

預(yù)加載關(guān)鍵資源

在現(xiàn)代網(wǎng)頁(yè)性能優(yōu)化中，<link rel="preload"> 和 <link rel="prefetch"> 是兩種重要的資源提示（Resource Hints），它們能夠幫助開(kāi)發(fā)者控制瀏覽器的資源加載優(yōu)先級(jí)，從而優(yōu)化用戶體驗(yàn)。

<link rel="preload">

<link rel="preload"> 是一種告訴瀏覽器預(yù)先加載頁(yè)面初始化時(shí)即需的資源的方法。這些資源對(duì)于當(dāng)前頁(yè)面是必要的，但可能由于 HTML 解析的順序或者延遲加載的策略，并不會(huì)立即被加載。通過(guò)使用preload，開(kāi)發(fā)者可以顯式地告訴瀏覽器盡早地加載這些關(guān)鍵資源，以確保它們能夠及時(shí)地被使用，從而減少渲染阻塞時(shí)間，加快首屏渲染速度。

<!-- 預(yù)加載關(guān)鍵的CSS文件 -->
<link rel="preload" href="important.css" as="style" />

<!-- 預(yù)加載關(guān)鍵的JavaScript文件 -->
<link rel="preload" href="main.js" as="script" />

<!-- 預(yù)加載字體文件 -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

在使用preload時(shí)，as屬性非常重要，因?yàn)樗付吮患虞d資源的類型，這有助于瀏覽器正確地優(yōu)先加載資源，并使用正確的加載策略。

<link rel="prefetch">

<link rel="prefetch"> 是另一種資源提示，它指示瀏覽器在空閑時(shí)間預(yù)先獲取用戶將來(lái)可能需要的資源。這通常適用于預(yù)加載下一頁(yè)面的資源，例如用戶很可能會(huì)點(diǎn)擊的鏈接的資源。prefetch的優(yōu)先級(jí)較低，不會(huì)影響當(dāng)前頁(yè)面的關(guān)鍵資源加載，因此它主要用于提升未來(lái)頁(yè)面的加載速度。

<!-- 預(yù)獲取下一頁(yè)面可能需要的CSS文件 -->
<link rel="prefetch" href="next-page-style.css" />

<!-- 預(yù)獲取下一頁(yè)面可能需要的JavaScript文件 -->
<link rel="prefetch" href="next-page-script.js" />

• <link rel="preload">：用于當(dāng)前頁(yè)面的關(guān)鍵資源，目的是盡快加載這些資源以提升當(dāng)前頁(yè)面的性能。適用于那些對(duì)當(dāng)前頁(yè)面渲染至關(guān)重要的資源，比如關(guān)鍵的 CSS 和 JavaScript 文件、字體文件等。
• <link rel="prefetch">：用于將來(lái)的頁(yè)面資源，目的是利用瀏覽器的空閑時(shí)間提前獲取可能需要的資源，以提升未來(lái)頁(yè)面的加載速度。適用于那些用戶可能接下來(lái)會(huì)訪問(wèn)的頁(yè)面資源，如下一篇文章的腳本、樣式表或圖片等。

通過(guò)合理利用這兩種資源提示，開(kāi)發(fā)者可以更好地優(yōu)化資源的加載順序和時(shí)間，從而改善用戶體驗(yàn)。不過(guò)，需要注意的是，過(guò)度使用或不當(dāng)使用這些技術(shù)可能會(huì)帶來(lái)資源競(jìng)爭(zhēng)或浪費(fèi)帶寬，因此應(yīng)該根據(jù)實(shí)際情況謹(jǐn)慎選擇使用。

優(yōu)化 CSS 加載

優(yōu)化 CSS 加載是提高頁(yè)面渲染速度和用戶體驗(yàn)的重要方面。主要包括兩個(gè)策略：處理關(guān)鍵 CSS（Critical CSS）和異步加載非關(guān)鍵 CSS。

關(guān)鍵 CSS 是指用于首屏渲染的最小 CSS 集合，即在頁(yè)面加載的初始階段用于樣式化內(nèi)容的 CSS。將關(guān)鍵 CSS 內(nèi)聯(lián)在 HTML 文檔的<head> 部分中可以減少阻塞渲染的外部樣式表的數(shù)量，從而加快首屏內(nèi)容的顯示速度。

關(guān)鍵 CSS

在使用 Webpack 構(gòu)建工具時(shí)，可以通過(guò)特定的插件和加載器來(lái)自動(dòng)提取關(guān)鍵 CSS，以優(yōu)化頁(yè)面加載性能。下面是在 Webpack 環(huán)境中提取關(guān)鍵 CSS 的一些常用方法和步驟：

使用 html-webpack-plugin 和 critters-webpack-plugin：

• 安裝相關(guān)插件 critters-webpack-plugin 和 html-webpack-plugin。
• 在 webpack.config.js 文件中，引入這兩個(gè)插件并將它們添加到 plugins 數(shù)組中。critters-webpack-plugin 會(huì)處理 html-webpack-plugin 生成的 HTML 文件，提取并內(nèi)聯(lián)關(guān)鍵 CSS。

const HtmlWebpackPlugin = require("html-webpack-plugin");
const Critters = require("critters-webpack-plugin");

module.exports = {
  // 其他Webpack配置...
  plugins: [
    new HtmlWebpackPlugin({
      template: "src/index.html",
    }),
    new Critters({
      // Critters的配置選項(xiàng)...
    }),
  ],
};

對(duì)于更復(fù)雜的場(chǎng)景，比如當(dāng)你需要進(jìn)一步優(yōu)化并清理未使用的 CSS 時(shí)，可以結(jié)合使用 mini-css-extract-plugin 和 purifycss-webpack。

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const PurifyCSSPlugin = require("purifycss-webpack");
const glob = require("glob");

module.exports = {
  // 其他Webpack配置...
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].[contenthash].css",
    }),
    new PurifyCSSPlugin({
      paths: glob.sync(path.join(__dirname, "src/**/*.html")),
      minimize: true,
    }),
  ],
};

非關(guān)鍵 CSS

非關(guān)鍵 CSS 是指對(duì)首屏渲染不是必需的 CSS，例如用于頁(yè)面下方內(nèi)容或其他頁(yè)面的樣式。異步加載這些非關(guān)鍵 CSS 可以確保它們不會(huì)阻塞首屏的渲染。

主要有以下幾種實(shí)現(xiàn)方法：

使用標(biāo)簽的 media 屬性：通過(guò)設(shè)置 media 屬性為一個(gè)不匹配的媒體查詢，可以讓瀏覽器延遲加載 CSS 文件。頁(yè)面加載完成后，通過(guò) JavaScript 更改 media 屬性為 all 來(lái)加載和應(yīng)用樣式。

<link
  rel="stylesheet"
  href="non-critical.css"
  media="print"
  onload="this.media='all'"
/>
<noscript><link rel="stylesheet" href="non-critical.css" /></noscript>

使用 JavaScript 動(dòng)態(tài)加載 CSS：通過(guò) JavaScript 動(dòng)態(tài)創(chuàng)建 <link> 標(biāo)簽并插入到 <head> 中，可以實(shí)現(xiàn) CSS 的異步加載。

var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "non-critical.css";
document.head.appendChild(link);

減少 CSS 選擇器的復(fù)雜性：避免使用過(guò)于復(fù)雜的 CSS 選擇器，因?yàn)樗鼈儠?huì)增加瀏覽器的樣式計(jì)算時(shí)間。

避免使用@import：@import 允許在 CSS 文件中導(dǎo)入其他 CSS 文件，但它會(huì)增加頁(yè)面加載時(shí)間，因?yàn)闉g覽器需要解析第一個(gè) CSS 文件后才能發(fā)現(xiàn)并加載導(dǎo)入的文件。

優(yōu)化 JavaScript 加載

使用 async 和 defer 屬性異步加載 JavaScript，減少阻塞渲染的腳本。

當(dāng)腳本帶有 async 屬性時(shí)，它將并行于頁(yè)面的加載進(jìn)行下載。一旦腳本下載完成，它會(huì)立即執(zhí)行，而不用等待其他腳本或頁(yè)面渲染完成。這對(duì)于那些不依賴于其他腳本且不被其他腳本依賴的功能來(lái)說(shuō)是個(gè)不錯(cuò)的選擇。

<script async src="script.js"></script>

帶有 defer 屬性的腳本會(huì)等到整個(gè)頁(yè)面都解析完畢后才會(huì)執(zhí)行，而且是按照它們?cè)谖臋n中出現(xiàn)的順序依次執(zhí)行的。這通常用于那些需要訪問(wèn)或修改 DOM 的腳本，且不影響文檔的初始顯示。

<script defer src="script.js"></script>

DNS 預(yù)解析

DNS 預(yù)解析是一種性能優(yōu)化技術(shù)，用于減少用戶瀏覽網(wǎng)頁(yè)時(shí)遇到的延遲。當(dāng)用戶訪問(wèn)一個(gè)網(wǎng)頁(yè)時(shí)，瀏覽器需要將網(wǎng)頁(yè)上的域名（如 example.com）轉(zhuǎn)換成 IP 地址，這個(gè)過(guò)程稱為 DNS 解析。DNS 解析需要時(shí)間，特別是當(dāng) DNS 查詢需要通過(guò)多個(gè)網(wǎng)絡(luò)節(jié)點(diǎn)時(shí)，這個(gè)時(shí)間可能會(huì)顯著影響網(wǎng)頁(yè)的加載速度。通過(guò)使用 DNS 預(yù)解析，可以提前進(jìn)行這個(gè)解析過(guò)程，從而減少用戶等待時(shí)間。

DNS 解析可能需要一定的時(shí)間，特別是如果 DNS 服務(wù)器距離用戶較遠(yuǎn)，或者需要多次跳轉(zhuǎn)才能找到相應(yīng)的記錄時(shí)。通過(guò)預(yù)解析，可以在用戶實(shí)際請(qǐng)求資源之前完成這一步驟，從而減少等待時(shí)間。

DNS 預(yù)解析可以通過(guò)在 HTML 中添加 標(biāo)簽來(lái)實(shí)現(xiàn)，如下所示：

<link rel="dns-prefetch" href="http://www.難道你是個(gè)天才？.com" />

DNS 預(yù)解析對(duì)于那些含有大量來(lái)自不同域名資源的網(wǎng)頁(yè)尤為有用，比如外部腳本、廣告、圖片等

其他的一些方案

使用 CDN 是一種比較常見(jiàn)的解決方案，將資源部署到 CDN 上，可以讓資源從用戶地理位置最近的服務(wù)器加載，減少延遲。

另外一個(gè)就是使用 HTTP/2，因?yàn)?HTTP/2 提供了頭部壓縮、服務(wù)器推送、請(qǐng)求復(fù)用等特性，相較于 HTTP/1.1 可以顯著提升資源加載效率。

編寫(xiě)出高性能且易維護(hù)的代碼極其重要，例如減少回來(lái)和重繪等等。（之前實(shí)習(xí)看到一個(gè)同事在一個(gè) CSS 文件上寫(xiě)了 3000 多行樣式，看的時(shí)候還是在開(kāi)發(fā) ing...）

終極解決方案

讓用戶換電腦，如果響應(yīng)慢，肯定是電腦出了問(wèn)題，我的建議是換成頂配的 mac。（難道你是個(gè)天才？）

總結(jié)

通過(guò)實(shí)施上面的這些策略，我們可以優(yōu)化資源加載過(guò)程，提升網(wǎng)頁(yè)加載速度和用戶體驗(yàn)。值得注意的是，每個(gè)項(xiàng)目的具體情況不同，因此在實(shí)施這些優(yōu)化時(shí)應(yīng)根據(jù)實(shí)際需要和測(cè)試結(jié)果靈活調(diào)整。

到此這篇關(guān)于JS首屏加載時(shí)間優(yōu)化的解決方法總結(jié)的文章就介紹到這了,更多相關(guān)JS首屏加載時(shí)間優(yōu)化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論