🤖 作者簡介：水煮白菜王（juejin/csdn同名） ，一位前端勸退師 👻
👀 文章專欄： 高德AMap專欄 ，記錄一下平時學習在博客寫作中記錄，總結出的一些開發技巧?。
感謝支持💕💕💕

前端首屏加載時間優化解javascript

要加速和優化前端首屏渲染，可以考慮以下幾個方面：

1. 減少網絡請求：通過合并和壓縮文件、使用雪碧圖或字體圖標等技術，減少需要下載的資源數量和大小。
2. 延遲加載非關鍵資源：將非關鍵資源（如圖片、視頻）延遲加載，只在用戶需要時再進行加載，可以使用懶加載或按需加載的技術。
3. 使用瀏覽器緩存：設置適當的緩存策略，使得頁面資源可以被瀏覽器緩存起來，減少重復的網絡請求。
4. 優化代碼和文件大小：精簡和壓縮HTML、CSS和JavaScript文件，刪除不必要的代碼、注釋和空格，以減少文件大小，從而提高加載速度。
5. 異步加載和執行：將JavaScript腳本放在頁面底部，或使用異步加載的方式，確保腳本不會阻塞頁面的渲染。
6. 使用CDN加速：將靜態資源部署在內容分發網絡（CDN）上，讓用戶能從離其最近的服務器獲取資源，提高訪問速度。
7. 響應式設計和優化圖片：采用響應式布局和媒體查詢，根據設備屏幕大小加載合適的布局和圖片，避免在移動設備上加載過大的圖片。
8. 使用預渲染技術：通過預渲染技術，提前生成首屏內容并存儲為靜態文件，當用戶訪問時直接返回，減少服務器渲染時間。
9. 優化關鍵渲染路徑：確保關鍵渲染路徑（Critical Rendering Path）盡可能短，例如通過減少DOM節點數量、避免過多的重排和重繪操作等。
10. 避免阻塞渲染資源：將CSS樣式表放在頁面頭部，避免使用阻塞渲染的JavaScript，以避免影響頁面的渲染速度。

優化策略	描述
減少網絡請求	通過合并和壓縮文件、使用雪碧圖或字體圖標等技術，減少需要下載的資源數量和大小。
延遲加載非關鍵資源	將非關鍵資源（如圖片、視頻）延遲加載，只在用戶需要時再進行加載，可以使用懶加載或按需加載的技術。
使用瀏覽器緩存	設置適當的緩存策略，使得頁面資源可以被瀏覽器緩存起來，減少重復的網絡請求。
優化代碼和文件大小	精簡和壓縮HTML、CSS和JavaScript文件，刪除不必要的代碼、注釋和空格，以減少文件大小，從而提高加載速度。
異步加載和執行	將JavaScript腳本放在頁面底部，或使用異步加載的方式，確保腳本不會阻塞頁面的渲染。
使用CDN加速	將靜態資源部署在內容分發網絡（CDN）上，讓用戶能從離其最近的服務器獲取資源，提高訪問速度。
響應式設計和優化圖片	采用響應式布局和媒體查詢，根據設備屏幕大小加載合適的布局和圖片，避免在移動設備上加載過大的圖片。
使用預渲染技術	通過預渲染技術，提前生成首屏內容并存儲為靜態文件，當用戶訪問時直接返回，減少服務器渲染時間。
優化關鍵渲染路徑	確保關鍵渲染路徑（Critical Rendering Path）盡可能短，例如通過減少DOM節點數量、避免過多的重排和重繪操作等。
避免阻塞渲染資源	將CSS樣式表放在頁面頭部，避免使用阻塞渲染的JavaScript，以避免影響頁面的渲染速度。

以Webpack構建工具為例子（同樣的vite 也是類似的思路），可以通過以下方法來實現首屏優化：
11. 代碼分割（Code Splitting）：使用Webpack的代碼分割功能，將代碼拆分成多個小塊，按需加載非關鍵代碼。這樣可以減少初始加載的文件大小，加快首屏渲染速度。
12. 按需加載（Lazy Loading）：使用Webpack的動態導入（Dynamic Import）或React的React.lazy()等技術，將非關鍵模塊延遲加載，只在需要時再進行加載。這樣可以減少初始加載的資源量，提高首屏渲染速度。
13. 圖片優化：使用Webpack的url-loader或file-loader等加載器，對圖片進行壓縮和優化。可以將較大的圖片轉換成Base64編碼，或者根據設備屏幕大小加載合適的圖片，減少網絡請求并提高加載速度。
14. 代碼壓縮和混淆：使用Webpack的UglifyJsPlugin、TerserPlugin等插件對JavaScript代碼進行壓縮和混淆，減少文件大小，提高加載速度。
15. 緩存策略：配置Webpack的輸出文件名中添加hash或chunkhash，利用瀏覽器緩存機制，確保文件內容更新后能夠正確加載新版本的資源，而不是使用緩存的舊版本文件。
16. Tree Shaking：使用Webpack的Tree Shaking功能，可以消除未使用的代碼，只打包使用到的模塊和函數，減少最終生成的代碼體積。
17. 提取公共代碼：使用Webpack的SplitChunksPlugin或optimization.splitChunks配置項，將公共的模塊提取出來，避免重復加載和下載相同的代碼。
18. 預渲染（Prerendering）：使用Webpack的預渲染插件，如prerender-spa-plugin，提前生成靜態HTML文件，存儲在服務器上。當用戶請求時，直接返回預渲染好的首屏內容，加速頁面展示。

---

代碼分割

在結合 Webpack 和 React 的項目中，代碼分割（Code Splitting）是一種重要的性能優化手段，特別是對于首屏加載時間的優化。代碼分割可以將一個大的 bundle 文件拆分成多個小的 chunks（塊），這樣可以按需加載，減少首次加載的時間，加快首屏顯示。
Webpack 的 SplitChunksPlugin 可以用來自動分割公共模塊和第三方庫。通過合理配置 optimization.splitChunks 選項，可以把公共依賴提取到單獨的 chunk 中，避免重復打包，減少首屏加載的體積。

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

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

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

使用 Webpack 的魔法注釋來實現更細致的控制，比如命名 chunk、預加載和預獲取。

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

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

對于使用 React Router 之類的路由庫的應用，可以在路由配置中應用代碼分割，為每個路由頁面實現懶加載：

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>
);

優化資源加載

優化資源加載是提高網頁性能、尤其是首屏加載速度的關鍵方面。資源包括 JavaScript、CSS、圖片、字體等。優化這些資源的加載可以顯著改善用戶體驗。

減少請求次數

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

為什么要合并文件：

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

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

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

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

使用現代圖片格式

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

webp

先進的壓縮算法：WebP 格式使用了基于 VP8 視頻編解碼器的壓縮技術。這種技術針對圖像內容進行更高效的壓縮，通過減少編碼圖像塊的位數來減小文件大小，同時盡量保持圖像質量。
支持無損和有損壓縮：WebP 既支持無損壓縮，也支持有損壓縮。無損壓縮 WebP 圖像通常比 PNG 小 30%，而有損壓縮的 WebP 圖像則比 JPEG 小 25-34%，并且可以提供相同甚至更好的質量。
豐富的顏色表現：WebP 支持更廣的顏色范圍和深度，包括 8 位或 10 位色深的有損編碼和 8 位色深的無損編碼，這使得它在色彩表現上優于標準的 JPEG 格式。
集成了額外的功能：如支持透明度（Alpha 通道）和動畫，這使得 WebP 成為一種非常靈活的圖像格式，能夠替代 GIF 等格式。

AVIF

基于 AV1 視頻編解碼器：AVIF 是一種新的圖像格式，基于開源的 AV1 視頻編解碼器。AV1 是由聯盟視頻聯盟開發的，旨在網絡上提供高效的視頻流傳輸。

更高效的壓縮性能：AVIF 提供了比 WebP 更高的壓縮效率，尤其是在高分辨率和高質量圖像上。在相同的視覺質量下，AVIF 文件的大小通常比 WebP 更小。
更好的圖像質量：AVIF 支持更高的動態范圍和顏色深度，包括 HDR（高動態范圍圖像）和廣色域圖像，這意味著它可以提供更豐富的色彩和更細膩的圖像細節。

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

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

預加載關鍵資源 ( preload prefetch區別，還有dns-prefetch)

在現代網頁性能優化中， 和 是兩種重要的資源提示（Resource Hints），它們能夠幫助開發者控制瀏覽器的資源加載優先級，從而優化用戶體驗。

< link rel=“preload”>

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

<!-- 預加載關鍵的CSS文件 -->
<link rel="preload" href="important.css" as="style" /><!-- 預加載關鍵的JavaScript文件 -->
<link rel="preload" href="main.js" as="script" /><!-- 預加載字體文件 -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

在使用preload時，as屬性非常重要，因為它指定了被加載資源的類型，這有助于瀏覽器正確地優先加載資源，并使用正確的加載策略。

< link rel=“prefetch”>

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

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

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

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

優化 CSS 加載

優化 CSS 加載是提高頁面渲染速度和用戶體驗的重要方面。主要包括兩個策略：處理關鍵 CSS（Critical CSS）和異步加載非關鍵 CSS。關鍵 CSS 是指用于首屏渲染的最小 CSS 集合，即在頁面加載的初始階段用于樣式化內容的 CSS。將關鍵 CSS 內聯在 HTML 文檔的 部分中可以減少阻塞渲染的外部樣式表的數量，從而加快首屏內容的顯示速度。

關鍵 CSS

在使用 Webpack 構建工具時，可以通過特定的插件和加載器來自動提取關鍵 CSS，以優化頁面加載性能。下面是在 Webpack 環境中提取關鍵 CSS 的一些常用方法和步驟：
使用 html-webpack-plugin 和 critters-webpack-plugin：

1. 安裝相關插件 critters-webpack-plugin 和 html-webpack-plugin。
2. 在 webpack.config.js 文件中，引入這兩個插件并將它們添加到 plugins 數組中。critters-webpack-plugin 會處理 html-webpack-plugin 生成的 HTML 文件，提取并內聯關鍵 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的配置選項...}),],
};

對于更復雜的場景，比如當你需要進一步優化并清理未使用的 CSS 時，可以結合使用 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,}),],
};

非關鍵 CSS

非關鍵 CSS 是指對首屏渲染不是必需的 CSS，例如用于頁面下方內容或其他頁面的樣式。異步加載這些非關鍵 CSS 可以確保它們不會阻塞首屏的渲染。
主要有以下幾種實現方法：

1. 使用標簽的 media 屬性：通過設置 media 屬性為一個不匹配的媒體查詢，可以讓瀏覽器延遲加載 CSS 文件。頁面加載完成后，通過 JavaScript 更改 media 屬性為 all 來加載和應用樣式。

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

2. 使用 JavaScript 動態加載 CSS：通過 JavaScript 動態創建 標簽并插入到 中，可以實現 CSS 的異步加載。

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

3. 減少 CSS 選擇器的復雜性：避免使用過于復雜的 CSS 選擇器，因為它們會增加瀏覽器的樣式計算時間。
4. 避免使用@import：@import 允許在 CSS 文件中導入其他 CSS 文件，但它會增加頁面加載時間，因為瀏覽器需要解析第一個 CSS 文件后才能發現并加載導入的文件。

優化 JavaScript 加載

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

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

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

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

DNS 預解析

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

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

DNS 預解析可以通過在 HTML 中添加 標簽來實現，如下所示：

<link rel="dns-prefetch" href="//www.ok.com" />

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

其他的一些方案

使用 CDN 是一種比較常見的解決方案，將資源部署到 CDN 上，可以讓資源從用戶地理位置最近的服務器加載，減少延遲。
另外一個就是使用 HTTP/2，因為 HTTP/2 提供了頭部壓縮、服務器推送、請求復用等特性，相較于 HTTP/1.1 可以顯著提升資源加載效率。
編寫出高性能且易維護的代碼極其重要，例如減少回來和重繪等等。

總結

優化點	簡要說明	相關技術/工具
減少網絡請求	合并文件、使用雪碧圖或字體圖標，減少資源數量和大小。	Webpack合并、雪碧圖、Base64嵌入、HTTP/2多路復用。
延遲加載非關鍵資源	僅在需要時加載非關鍵資源（如圖像、視頻）。	懶加載（Intersection Observer）、React.lazy、按需加載。
瀏覽器緩存	設置緩存策略，減少重復請求。	Cache-Control、ETag、Service Worker。
代碼分割	拆分為多個小塊，按需加載非關鍵代碼，減少初始體積。	Webpack SplitChunksPlugin、React.lazy、動態導入（import()）。
按需加載	動態加載非關鍵模塊，避免阻塞首屏。	React.lazy、Webpack魔法注釋（如webpackPrefetch）。
圖片優化	壓縮圖片、使用現代格式（WebP/AVIF）、響應式圖片。	Webpack圖片加載器、ImageMagick、srcset/sizes屬性。
預渲染技術	提前生成首屏靜態內容，減少服務器渲染時間。	Prerender-spa-plugin、SSR（服務端渲染）。
關鍵渲染路徑優化	縮短關鍵路徑，減少重排/重繪。	減少DOM節點、優化CSS選擇器、避免阻塞渲染資源。
預加載關鍵資源	顯式加載關鍵資源（preload）或預獲取未來資源（prefetch）。	<link rel="preload">、<link rel="prefetch">。
關鍵CSS內聯	提取首屏所需CSS并內聯到HTML，避免外部請求阻塞。	Critters-webpack-plugin、HtmlWebpackPlugin。
異步加載JavaScript	使用async/defer屬性避免腳本阻塞渲染。	<script async>、<script defer>。
CDN加速	部署靜態資源到CDN，降低網絡延遲。	Cloudflare、阿里云OSS、七牛云。
Tree Shaking	移除未使用代碼，減小包體積。	Webpack默認支持（需配置mode為production）。
DNS預解析	提前解析域名，減少資源加載延遲。	<link rel="dns-prefetch">。
HTTP/2優化	利用HTTP/2特性（多路復用、頭部壓縮）提升加載效率。	服務器配置HTTP/2支持。

如果你覺得這篇文章對你有幫助，請點贊 👍、收藏 👏 并關注我！👀