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

首屏加載時間的長短直接影響用戶的第一印象和留存率，因為用戶往往對加載速度較慢的網(wǎng)站或應(yīng)用有較低的耐心。如果首屏加載時間過長，用戶可能會感到不耐煩，甚至在內(nèi)容完全加載前離開，這樣就增加了跳出率，降低了用戶體驗。

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

代碼分割

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

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

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

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

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

使用 Webpack 的魔法注釋來實現(xiàn)更細致的控制，比如命名 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")
);

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

對于使用 React Router 之類的路由庫的應(yīng)用，可以在路由配置中應(yīng)用代碼分割，為每個路由頁面實現(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)頁性能、尤其是首屏加載速度的關(guān)鍵方面。資源包括 JavaScript、CSS、圖片、字體等。優(yōu)化這些資源的加載可以顯著改善用戶體驗。

減少請求次數(shù)

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

為什么要合并文件：

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

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

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

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

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

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

webp

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

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

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

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

AVIF

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

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

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

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

總的來說，WebP 和 AVIF 之所以能在保持相同圖片質(zhì)量的同時減少文件大小，主要是因為它們采用了更高效的壓縮算法和更先進的編碼技術(shù)。這些技術(shù)使得 WebP 和 AVIF 能夠更好地減少冗余信息，從而在不犧牲圖像質(zhì)量的前提下降低文件大小。這些特性使得 WebP 和 AVIF 非常適合用于網(wǎng)絡(luò)圖像，以提高網(wǎng)頁加載速度和改善用戶體驗。

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

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

<link rel="preload">

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

<!-- 預(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時，as屬性非常重要，因為它指定了被加載資源的類型，這有助于瀏覽器正確地優(yōu)先加載資源，并使用正確的加載策略。

<link rel="prefetch">

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

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

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

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

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

優(yōu)化 CSS 加載

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

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

關(guān)鍵 CSS

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

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

• 安裝相關(guān)插件 critters-webpack-plugin 和 html-webpack-plugin。
• 在 webpack.config.js 文件中，引入這兩個插件并將它們添加到 plugins 數(shù)組中。critters-webpack-plugin 會處理 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的配置選項...
    }),
  ],
};

對于更復(fù)雜的場景，比如當你需要進一步優(yōu)化并清理未使用的 CSS 時，可以結(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 是指對首屏渲染不是必需的 CSS，例如用于頁面下方內(nèi)容或其他頁面的樣式。異步加載這些非關(guān)鍵 CSS 可以確保它們不會阻塞首屏的渲染。

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

使用標簽的 media 屬性：通過設(shè)置 media 屬性為一個不匹配的媒體查詢，可以讓瀏覽器延遲加載 CSS 文件。頁面加載完成后，通過 JavaScript 更改 media 屬性為 all 來加載和應(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 動態(tài)加載 CSS：通過 JavaScript 動態(tài)創(chuàng)建 <link> 標簽并插入到 <head> 中，可以實現(xiàn) CSS 的異步加載。

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

減少 CSS 選擇器的復(fù)雜性：避免使用過于復(fù)雜的 CSS 選擇器，因為它們會增加瀏覽器的樣式計算時間。

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

優(yōu)化 JavaScript 加載

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

當腳本帶有 async 屬性時，它將并行于頁面的加載進行下載。一旦腳本下載完成，它會立即執(zhí)行，而不用等待其他腳本或頁面渲染完成。這對于那些不依賴于其他腳本且不被其他腳本依賴的功能來說是個不錯的選擇。

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

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

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

DNS 預(yù)解析

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

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

DNS 預(yù)解析可以通過在 HTML 中添加 標簽來實現(xiàn)，如下所示：

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

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

其他的一些方案

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

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

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

終極解決方案

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

總結(jié)

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

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

最新評論