性能优化｜几个方法让图片加载更快一些

行阿里云开发者 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

您的项目需求