性能優化｜幾個方法讓圖片加載更快一些

行阿里云開發者 2024年07月15日 08:31 浙江

阿里妹導讀

對電商網頁的性能而言，圖片優化是至關重要的事情，本文就此探討了一些簡單、可靠的圖片優化手段。

一、圖片對網頁性能優化的重要性

對電商網頁的性能而言，圖片優化是至關重要的事情，一個典型的電商網頁加載的圖片無論從數量還是字節數都不容小覷。

而圖片優化的思路非常清晰明了，常見的有三個方向：

提前首屏圖片的加載時機
降低加載圖片的體積
減少加載圖片的數量

隨著圖片壓縮技術和瀏覽器渲染技術的發展，既淘汰了很多過時的圖片性能優化技巧，又應運而生了不少簡單、可靠的圖片優化手段。

二、提前首屏圖片的加載時機

一般首屏使用的圖片決定了頁面的 LCP[1]指標，首屏圖片的加載優先級至關重要，而盡可能提前加載圖片是圖片性能優化的首要問題。

2.1 優化網絡建連

在用戶首次訪問居多的場景，網絡建連時間是一個被大部分人忽略，但至關重要的因素，也許我們的性能優化輸在了起跑線上，這部分介紹的內容不止對圖片加載有效，對于所有靜態資源乃至 HTML、異步接口等道理相似。

使用 CDN

CDN 的重要性不用贅述，將內容緩存到離用戶更近的邊緣服務器上，可以顯著提升網絡建連效率，當然更重要的是使用 CDN 減少了數據在用戶和服務器之間傳輸的距離，大幅提升資源下載速度。

預連接

HTML 默認支持兩種預建連機制：

dns-prefetch：用來提前解析外部域名的 DNS 查詢。當瀏覽器知道將來可能會從某個特定的外部域名請求資源時，使用 dns-prefetch 可以減少等待 DNS 查詢的時間；
preconnect：不僅會告訴瀏覽器提前進行 DNS 查詢，還會提前建立到資源服務器的 TCP 連接，并在使用 HTTPS 的情況下執行 TLS 握手。這意味著當瀏覽器實際請求資源時，它已經有了一個開放的連接，可以立即開始數據傳輸；

<head>
  <link rel="dns-prefetch" href="https://examplecdn.com">
  <link rel="preconnect" href="https://examplecdn.com">
</head>

收斂域名

在 HTTP/1.1 協議下，由于瀏覽器通常會對每個域名并行連接數的限制（大部分瀏覽器限制在6個左右），在多個域名間分散圖片曾經是常見的優化手段，以此突破對單一域名的并發限制。然而這也意味著對于每個新的域名，瀏覽器必須進行額外的 DNS 查找，并且可能需要建立新的TCP連接，這可能會增加一定的延遲。?

HTTP/2 開始支持多路復用，意味著多個請求可以在單個TCP連接上同時進行，減少了對多個域名的需要。因此在 HTTP/2 環境中，收斂圖片域名反而可以優化圖片加載，因為:

減少DNS查詢：減少域名數量可以減少DNS查詢次數，因為瀏覽器需要為每個新的域名解析IP地址。
減少連接建立：多路復用使得在一個連接上并行發送請求成為可能，因此減少域名可以減少連接建立的次數和相應的延遲。
提高TLS效率：對于HTTPS連接，收斂域名意味著可以在較少的TLS握手上復用連接，TLS握手是創建安全連接所必需的步驟，它在總體連接時間中占有顯著份額。
緩存效率：使用較少的域名可以提高緩存效率，因為瀏覽器可能會為每個域名分別維護緩存記錄。

升級 HTTP/3

HTTP/3 是下一代 HTTP 協議，基于 QUIC（Quick UDP Internet Connections）協議。QUIC 是由 Google 開發并隨后由 IETF 標準化的傳輸層協議。HTTP/3 對網絡建連進行了優化，和建連、傳輸性能相關的主要有

減少連接建立時間：HTTP/2 基于 TCP 和 TLS，需要多個往返時間（RTT）來完成握手。HTTP/3 使用 QUIC 協議，它將加密和傳輸合并為一個過程，允許在一個 RTT 完成連接建立，在最佳情況下甚至可以在零 RTT 中恢復會話。
多路復用無阻塞：HTTP/2 雖然支持多路復用，但 TCP 層的隊頭阻塞問題仍然存在。HTTP/3 通過 QUIC 改進的多路復用能力，在 QUIC 中由于是基于數據報的 UDP，獨立的流可以在其他流發生丟包時繼續傳輸，解決了 TCP 的隊頭阻塞問題。
快速丟包恢復和擁塞控制：QUIC 實現了更快速的丟包恢復機制。TCP 需要等待一段時間來確認丟包，而 QUIC 可以利用更精細的確認機制來迅速響應丟包情況，并相應調整擁塞控制策略。
連接遷移：QUIC 支持連接遷移，允許客戶端在網絡環境變化（如從 Wi-Fi 切換到移動網絡）時，保持現有的連接狀態。在 HTTP/2 這種情況通常會導致連接中斷和需要重新建連。

2.2 流式渲染 preload

很多頁面為了性能優化引入了 SSR 技術，這樣 HTML 請求發起后，頁面組建在服務器進行渲染，完成后返回給客戶端。如果沒有配合流式渲染，會讓頁面等待服務器取數、渲染出現較長時間的白屏。

流式渲染通過 HTTP 1.1 引入分塊傳輸 Transfer-Encoding: chunked 特性，允許一個 HTTP 的請求的連接中可以多次響應，在 SSR 的場景中，服務端在響應一個 HTML 頁面的請求時至少可以拆分成兩個分塊。

頭部靜態內容：頁面 CSS、JavaScript、字體文件等；
后續動態渲染內容；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>流式渲染優化頁面性能</title>


  <link rel="preload" href="頁面LCP圖片地址" as="image" /> 


  <link rel='dns-prefetch' href='https://s.alicdn.com'>
  <link rel='preconnect' href='https://i.alicdn.com'>


  <link rel="stylesheet" href="頁面樣式地址">
  <script src="頁面腳本地址"></script>
</head>
<body>
<!--骨骼圖-->


<!--流式渲染后續內容-->
  
</body>
</html>

在流式渲染首段返回內容中可以通過 preload 讓頁面提前加載首屏確定性的圖片，提升頁面圖片加載速度。當然流式渲染不僅僅可以優化圖片加載，充分利用服務器計算時間，頁面可以對部分域名提前建連、提前加載頁面 CSS 和 JavaScript、加載骨骼圖，等手段優化頁面性能。

如果使用的 CDN 廠商支持邊緣計算，可以將頁面靜態部分換存在 CDN，用戶請求時第一時間返回，同時 CDN 向源站請求頁面后續動態內容，來進一步提升網頁性能。

?前端性能優化：當頁面渲染遇上邊緣計算-阿里云開發者社區[2]?。

2.3 fetch-priority

在 web 開發中資源的加載順序對頁面的性能有顯著影響。瀏覽器通常會根據資源類型、它們在HTML文檔中的位置以及一些內部算法來決定資源加載的優先級。然而瀏覽器的默認優先級可能并不總是與開發者的意圖或頁面性能最優化的目標一致。

fetch-priority 特性就是為了解決這個問題而提出的。通過顯式地設置資源的fetch-priority 屬性，開發者可以指示瀏覽器按照特定的優先級順序加載資源。一般情況下圖片的加載優先級相對較高，但為了更精準控制，可以使用 fetch-priority 調整。

<img src="important-image.png" fetch-priority="high" alt="Important Image">
<img src="less-important-image.png" fetch-priority="low" alt="Less Important Image">

fetch-priority 屬性可以設置不同的優先級值，high、low 和 auto（默認）。可以應用于各種資源，如<img>、<link>、<script>等元素。目前 Chrome、Safari、Edge 均已支持。

三、降低加載圖片的體積

在保證清晰度滿足要求的前提下，減少圖片的字節數明顯可以改善圖片加載性能。

3.1 圖片字節數的構成

圖像的尺寸可以表示為橫向像素數×縱向像素數，圖像的總像素數（即分辨率）是橫向像素數和縱向像素數的乘積。例如，一個1920×1080的圖像含有2,073,600個像素點，通常稱為二百萬像素。決定圖片字節數的有幾個關鍵因素。

分辨率：也就是我們常說的像素，表示圖片在 width 和 height 分別有多少個點，16x16 表示圖片一共有 256 個像素點；
色深：每個像素能夠顯示的顏色數量。常見的色深包括8位（256色）、16位（65,536色）、24位（約1677萬色，也稱為真彩色）等。色深越高，每個像素需要的位數（bits）就越多；
圖片格式與壓縮算法：圖像格式決定了圖片的存儲和壓縮方式。常見的格式包括JPEG（有損壓縮）、PNG（無損壓縮）、GIF（無損壓縮，但限制為256色）、BMP（通常無壓縮）、WEBP（支持有損和無損壓縮）等。不同的壓縮算法會導致不同的文件大小；
文件頭信息和元數據：圖片文件通常包括一個文件頭，其中包含了文件類型、尺寸、色深、壓縮類型等基本信息。元數據包括拍攝信息（如ISO、快門速度、光圈）、版權信息、編輯歷史、ICC配置文件等；

顯然圖片格式、分辨率可以顯著影響圖片的字節數。

3.2 圖片縮放、裁剪、壓縮

根據顯示場景不同，調整圖片的尺寸、分辨率、質量可以改變圖片的字節數，最常見的方法就是：

對圖片進行剪裁：丟棄圖片不會顯示的部分，讓圖片的尺寸變小，不犧牲圖片質量。
調整圖片的分辨率：類似 800x800 改成 400x400，過程中會對圖片進行重新采樣、像素去處或合并，一些像素會被去除，或者原來獨立的多個像素會被合并成一個新的像素。
降低圖片質量：當降低圖片質量時，壓縮算法會更激進地減少圖片中的數據量，包括減少顏色的數量、合并類似顏色或模糊細節等，因為存儲的數據更少了，文件大小會顯著減少。?

設計師、開發可以通過工具實現對圖片的調整，但成本略高，比較簡單的做法是讓源站或者 CDN 可以根據圖片 URL 參數對圖片進行處理。阿里云目前具備完整的圖片處理能力

圖片縮放：
https://example.com/image01.png?image_process=resize,fw_200,fh_200
圖片裁剪：
https://example.com/image01.png?image_process=crop,mid,w_400,h_200
?質量轉換：
https://example.com/image01.png?image_process=quality,Q_90

有了圖片裁剪、縮放能力，在必要的時候可以響應式加載圖片：

@media  screen and (min-width: 1200px) {
  img {
    background-image: url('a.png?image_process=resize,fw_200,fh_200.jpg');
  }
}
@media  screen and (min-width: 1400px) {
  img {
    background-image: url('a.png?image_process=resize,fw_250,fh_250.jpg');
  }
}

也可以使用 HTML5 的 picture 標簽：

<picture>
  <source srcset="a.png?image_process=resize,fw_200,fh_200.jpg" media="(min-width: 1200px)" />
  <source srcset="a.png?image_process=resize,fw_250,fh_250.jpg" media="(min-width: 1400px)" />
  <img src="a.png?image_process=resize,fw_100,fh_100.jpg" />
</picture>?

甚至可以每次用戶加載頁面，根據用戶的性能表現進行快慢網分級，并記錄到圖片域名的 cookie 中。下次用戶發起圖片請求，CDN 可以根據 cookie 中的快慢網信息，決定返回給用戶的圖片質量。

3.3 選擇合適的圖片格式

大部分 Web 開發者對 WebP 格式非常熟悉了，但可能對 AVIF 格式還沒有開始應用。AVIF 是一種基于 AV1 視頻編碼的新圖像格式，用于將AV1壓縮的圖片或圖片序列存儲為HEIF文件格式。相對于JPEG，WEBP 這類圖片格式來說，它的壓縮率更高，并且畫面細節更好，AVIF vs JPEG 大小節省約 50%，AVIF vs WebP 大小節省約 20%。

?Comparing AVIF vs WebP file sizes at the same DSSIM?

以 JPEG 做基點總體來看，AVIF全面領先，甚至是邊界條件下，也表現較好。而 WebP 邊界條件下可能會超過 JEPG。

類型	50分位數壓縮率	85分位數壓縮率
WebP	-30%	-20%
AVIF	-50%	-40%

主流瀏覽器的支持情況非常不錯，唯一的遺憾是 Edge 還不支持。

瀏覽器在在其圖片請求時候會在 Accept 頭部信息中聲明支持的圖片格式，可以利用這個在 CDN 識別，使用相同的圖片地址，返回不同格式的圖片內容。

避免前端加載 1px 透明圖判斷瀏覽器是否支持特定圖片格式，然后修改圖片 URL 來獲取對應格式圖片。這樣的處理方式有兩個弊端:

發起圖片請求依賴前端格式判斷的異步過程，請求時機被推遲；
使用新格式的圖片包括后期的調整等，需要修改前端代碼；

在 Chrome Dev Tools 網絡面板中可以看到淘寶、京東等網站都已經開始使用 AVIF 格式圖片。

3.4 堪稱雙刃劍的漸進式加載

圖片的漸進式加載是一種在網頁瀏覽過程中逐步顯示圖片的技術。圖片沒有完全下載前用戶先看到圖片的低質量版本，然后圖片會逐漸變得更清晰，直到完全加載完成。一般有兩種做法：

使用支持漸進式的圖片格式：PJPEG 或者漸進式 WebP 都原生支持漸進式加載；
使用小圖占位，然后替換為大圖；

圖片漸進式加載效果類似于加強版的骨骼圖，然而漸進式加載也有幾個問題

用戶體驗：漸進式圖片雖然可以讓用戶更快看到內容，但是模糊的圖片也可能導致用戶感到困惑，不同用戶對模糊圖片的感受不同，在圖片加載時間較長情況下甚至會理解為網頁故障；
性能開銷：有限的圖片格式或者加載多個圖片，兩種漸進式加載的方案都會增加圖片體積，還會帶來了文件處理、編碼復雜性等開銷。尤其是使用小圖占位，前端替換的方案可能還會帶來 LCP 指標的惡化；

To be or not to be, that is the question.

四、減少加載圖片數量

4.1 CSS sprites 可能過時了

CSS sprites 將多個小圖像合并成一個大圖像，利用 CSS 的背景定位屬性，可以僅顯示合并圖像中相應的部分，來代替單獨的圖像文件。減少HTTP請求的數量，這在HTTP/1.1時代是提升頁面加載速度的常用方法。

然而在 HTTP/2 情況發生了變化，HTTP/2 引入多路復用、頭部壓縮等特性，顯著改善了同時發送多個請求的性能。多路復用允許多個請求通過單一的TCP連接并行傳輸，減少了由于建立多個連接而產生的延遲。因此在HTTP/2 環境下，CSS sprites 的性能優勢不如HTTP/1.1時那么明顯，甚至可能產生反效果，因為：

緩存效率：如果 sprite 圖中某個圖像發生變化，即使其他圖像沒有改變，整個sprite圖都需要重新下載和緩存，導致緩存失效；
過度下載：當頁面只需要 sprite 圖中的幾個圖像時，仍然需要下載整個合并的圖像，這可能導致不必要的數據傳輸；
渲染性能：大型的 sprite 圖可能對瀏覽器的渲染性能產生影響，尤其是在移動設備上，因為需要更多的 CPU和內存去處理大圖像的解碼、背景定位；

同時 CSS sprites 需要額外的維護工作，每當圖像發生變化時，都需要重新生成整個sprite圖，并更新CSS定位，這使得管理起來更加復雜。在 HTTP/2 時代 CSS sprites 可能不再是性能優化的最佳方案，icon fonts、base64 或 SVG 圖像可能是更好的選擇。

4.2 load="lazy" 不依賴 JavaScript 的懶加載

在圖片較多的場景通常會對非首屏圖片懶加載，一般通過 JavaScript 實現，現在大部分主流瀏覽器通過load="lazy"原生支持了圖片懶加載，使用方法也非常簡便。

<img src="image-to-lazy-load.jpg" loading="lazy">

這個屬性有三個可能的值：

1.lazy：啟用懶加載。瀏覽器會在圖片即將進入視口時才開始加載。

2.eager：禁用懶加載。圖片會隨著頁面加載立即開始加載，無論圖片位置如何。

3.auto：瀏覽器自行決定何時加載圖片，這是默認值。

當對圖片設置了這個屬性后，瀏覽器會根據自己的啟發式算法決定圖片的加載時機。這些算法會考慮多個因素，比如圖片即將進入視口的距離，或者用戶當前的網絡條件等。通常啟發式算法的工作方式如下：

視口接近度：瀏覽器會監測頁面滾動，檢查懶加載圖片距離視口的距離。當圖片快要出現在視口內時，瀏覽器會開始加載圖片。具體開始加載圖片的距離閾值并沒有統一的標準，不同的瀏覽器可能會有不同的實現。
網絡狀況：一些瀏覽器可能會根據用戶的網絡狀況（例如是否使用數據流量或者Wi-Fi）來決定是否提前加載圖片。
CPU和內存使用情況：如果用戶設備的CPU或內存使用率很高，瀏覽器可能會延遲加載圖片，直到資源使用減少。
電池狀態：對于移動設備，瀏覽器可能會在電池電量充足時更積極地加載資源。?

雖然開發者無法精準控制圖片加載的時機，但瀏覽器原生支持考慮的因素不僅僅是滾動位置，相對而言更加合理。順便說一句，使用 JavaScript 懶加載本身也有性能開銷，可能會影響到頁面的 FPS。

4.3 content-visibility 另外一種懶加載

content-visibility 是 CSS 屬性，允許瀏覽器跳過不在屏幕上的元素的渲染工作，直到用戶滾動到它們的位置。通過跳過不可見內容的渲染，content-visibility 可以顯著減少頁面的初始加載時間，并降低內存的使用，從而改善用戶體驗。配合 contain-intrinsic-size 屬性可以對容器進行渲染前的占位。

<style>
  .image-gallery {
    content-visibility: auto;
    contain-intrinsic-size: 1000px 500px; /* 設置一個合適的占位大小 */
  }
</style>


<div class="image-gallery">
  <img src="image1.jpg" alt="描述1">
  <img src="image2.jpg" alt="描述2">
  <!-- 更多圖片 -->
</div>

content-visibility 的瀏覽器兼容性并不是非常樂觀，需要開發者在使用時候加以判斷。

4.4 decoding="async" 非首屏圖片異步解碼

解碼圖像和視頻是計算密集型的操作，可能會占用大量的CPU資源，特別是對于高分辨率或者復雜編碼格式的媒體文件，如果主線程被圖像或視頻的解碼操作阻塞，用戶在滾動頁面或嘗試交互時可能會感受到卡頓或延遲。

對非首屏圖片或視頻添加 decoding="async" 可以允許瀏覽器在后臺處理圖片、視頻解碼，而不阻塞主線程，繼續處理和渲染頁面的其余部分，這樣可以有助于改善頁面的加載性能，減少用戶感知到的延遲，并提供更加平滑的用戶體驗。

<img src="image.jpg" decoding="async">

參考鏈接：

[1]https://web.dev/articles/lcp?hl=zh-cn

[2]https://developer.aliyun.com/article/762599

暑假的大門緩緩打開，我懷揣著雄心壯志：“要啃下那本磚頭厚的，成為的演奏高手，還要掌握一項讓人眼前一亮的技能。”

現在這些計劃進展得如何了？嗯，讓我想想。

書，我翻了前幾頁，然后它就變成了一個華麗的書簽；

樂器，我摸了幾下，它就變成了家里的一件高級裝飾品；

技能，我研究了幾天，最后發現我還是更適合做個觀眾。

相信小伙伴們的內心也受到了一萬點傷害，不禁發問：“為什么我的熱情總是像煙花一樣短暫？難道我只有3分鐘熱度嗎？

”

“3分鐘熱度”，這個詞聽起來就不太讓人喜歡，且常常出現在批評的語境中。它的含義似乎是這樣的[1]：

第一分鐘，你對某個新事物產生了濃厚的興趣；

第二分鐘，你開始準備去了解它；

第三分鐘，你開始動手嘗試。

就比如興致沖沖地點開此推送，卻沒等看完就匆匆退出，再去走馬其它推送。

這種“開始得轟轟烈烈，結束得無聲無息”的態度，真的能給我們帶來成長嗎？

我們先不急著下結論。為什么是“3分鐘”，而不是“2分鐘”或“5分鐘”呢？這其中是不是有什么科學依據？難道3分鐘真的是最合適的“起步時間”？

讓咱們先來了解一下3分鐘論文比賽 (The Three Minute Thesis Competition, 3MT)。

3MT是全球200多所大學共同舉辦的一項年度賽事[2]，比賽要求參賽博士生在180秒內展示他們的學術研究成果，讓非領域內人士也能聽明白。

圖源：http://www.phdcomics.com

Science官網上有對參賽學生的采訪[3]，他們表示，3分鐘的時間雖然短，但足以讓他們準確、有效、有趣地呈現主題。而且，一系列的3分鐘報告還能鼓勵他們發展跨學科的思維方式。

在試錯中進階

回到“3分鐘熱度”的話題。從靈感迸發的瞬間開始，我們的熱情似乎就開始走下坡路，無聊和枯燥感逐漸增強。

圖源：AI生成

在20世紀，有個叫薩伯的職業生涯規劃大師，他提出了一個很有趣的觀點，把我們的人生比作一道彩虹[4]，分成了五個階段：成長期、探索期、建立期、維持期和衰退期。

最讓人意想不到的是，我們的探索期竟然可以一直持續到25歲。在這之前，我們的思維和觀念就像是一塊柔軟的陶土，不斷地被塑造和重塑。我們總是在嘗試新事物，探索未知領域，然后再嘗試，再探索。這個過程充滿了無限的可能性和驚喜。

Super提出的生涯彩虹圖[4]

只要我們能夠保持對事物的初始熱情，持續深入探索，并不斷獲得正向反饋，就能夠激發更持久的興趣，從而推動我們成長到更高的層次。

快速建立起聯結

在護理工作中，如果護士能在剛開始的幾分鐘里與患者進行良好的交流，并建立起友好的關系，那么后續的護理就會變得更加容易和愉快。這就是我們所說的“3分鐘效應”[5]。因此，“3分鐘熱度”的行為能以最小的成本建立起我們與事物的聯系。

學習新事物更快

現在來聊聊我們的大腦。想象一下，我們的大腦里有很多小小的信息傳遞者，我們稱之為“突觸”[6]。它們就像是大腦里的橋梁，幫助神經元之間傳遞信息。這些小家伙們對我們的學習和記憶能力非常重要。

當我們經常使用某些突觸時，它們會變得更加堅固，就像是我們大腦里的“高速公路”，讓信息傳遞得更快更順暢。但如果我們不去使用它們，這些“小橋”可能會變得越來越弱，甚至最終消失。

圖源：pixabay

所以，保持學習和挑戰新事物，就像是給這些“小橋”加固，讓它們能夠長期存在，幫助我們保持敏銳的頭腦和豐富的潛能。

例如，剛出生的嬰兒有“游泳反射”[7]，因為ta們在胎兒時期生活在羊水中，能自然適應水中環境，所以出生后的水感非常好，一般很快就能掌握游泳技能。相比之下，成年人掌握游泳技能的時間會更長，難度也會更大。

圖源百度

多次作為初學者的經歷，讓這些“3分鐘熱度”的人積累了豐富的經驗和知識，越來越擅長將之前學到的知識應用到新領域，快速掌握新事物。

勇于嘗試、執行力強、好奇心強、精力充沛……下次當別人批評你只有“3分鐘熱度”時，你可以自信地展示這篇文章，告訴他們，這正是你的優勢。

參考文獻

[1]阿北 (2016). 別被你的“三分鐘熱度”燙傷了.

[2]https://en.wikipedia.org/wiki/Three_Minute_Thesis

[3]https://www.science.org/content/article/your-thesis-3-minutes

[4]Super, Donald E. "A life-span, life-space approach to career development." Journal of vocational behavior 16.3 (1980): 282-298.

[5]李劍萍.三分鐘效應在護患關系中的應用[J].天津護理,2000,(03):141-142.

[6]https://en.wikipedia.org/wiki/Synapse

[7]https://en.wikipedia.org/wiki/Primitive_reflexes

轉載自：中科院物理所

來源：蝌蚪五線譜

象一下，如果手機電池不僅更安全、體積更小，而且充電一次可以用更久，那該多好！近日，中國科學院青島生物能源與過程研究所科研團隊在全固態鋰電池領域取得新的突破，有望讓電子設備小型化、長續航的夢想成為現實。這一成果7月31日在國際學術期刊《自然—能源》發表。

手機、電腦和其它電子設備中使用的鋰離子電池，大多是通過液體電解質來儲存和釋放能量。現在，科學家們正在研究一種新型電池——全固態鋰電池。這種電池使用固態電解質，而不是液體，這使得它們更安全，不會像液體電解質那樣容易泄漏或起火。

雖然全固態鋰電池聽起來很理想，但在研發中也面臨一些問題，主要是電池正極內部的不同材料在化學和物理性質上很難完美匹配，產生多種界面問題進而影響電池的能量密度和使用壽命。為了解決這個問題，科研團隊開發了一種新的材料——均質化正極材料（鋰鈦鍺磷硫硒）。

△復合正極和均質化正極在充電過程中微觀結構演變示意圖

與傳統材料相比，該材料具有高電導率、高能量密度、長使用壽命等優勢：

1. 高電導率：這種新材料兼具高離子電導率、高電子電導率，比傳統的電池材料（層狀氧化物正極材料）高出1000倍以上。這意味著，即便不依賴導電助劑，正極也能順暢地完成充放電過程，顯著提升了電池的整體性能。

2. 高放電比容量：新材料的放電比容量較高，達到250毫安時每克，超過了目前使用的高鎳正極材料。在相同的重量或體積下，新材料的電池能夠存儲更多的電能。不僅能夠讓電池在不頻繁充電的情況下持續運行更長時間，提高續航能力；而且減小電池的體積，有助于設計更緊湊的設備。

3. 低體積變化：在充放電過程中，新材料的體積變化僅為1.2%，遠低于傳統材料（層狀氧化物正極材料）的50%。這種微小的體積變化有助于維持電池結構的穩定性，從而延長電池的使用壽命。

4. 高能量密度：使用這種新材料的全固態鋰電池，其能量密度達到390瓦時每千克，是目前所報道長循環全固態鋰電池的1.3倍。

5. 長使用壽命：使用該材料的全固態鋰電池可以實現大于10000圈的超長循環，電池在經過5000次循環充電后，仍能保持80%的初始容量。能夠更長時間提供更充足的電量。

這項研究對開發高能量密度、長使用壽命的儲能設備，為新能源汽車、儲能電網、深海深空裝備等提供安全、耐久的動力源提供了技術支撐，對開發新型儲能體系等具有重要意義。

綜合：央視新聞客戶端、央視財經

來源：龍視新聞在線

在線咨詢

上一篇：HTML + CSS 為何得不到編程界的認可？
下一篇：推薦一個很nice的中后臺模版Soybean Admin

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

性能優化｜幾個方法讓圖片加載更快一些

使用 CDN

預連接

收斂域名

升級 HTTP/3

您的項目需求