图片分辨率太大导致的网页卡顿

网页卡顿

由于首页的UI重构发现了一个问题，新版的UI是一个多个功能板块组成的列表，相对于以前不同的是背景替换成了一整张png图片，并且加了许多大图和动态效果

刚开始开发并没有出现问题，当我做到第二个板块时加入了elementplus的轮播图之后，画面开始变卡，滚动也会出现短暂的白屏

开始排查，直到把所有css删完，最总找到影响流畅度的是一个6048*13000的首页的背景图片

起初以为是所用的图片太大了，用压缩工具压缩完后(700k)仍会卡顿，因此排除图片大小问题

由于作为css的background属性使用，就算其不完全显示，只显示一个屏幕的大小，也会造成卡顿

最后只能将这张图片截成6048*3000的分辨率并做纵向平铺，流畅度恢复，在网上的资料中找到:

当加载分辨率过大的图片时，浏览器需要将图片文件解码并显示在页面上。这个过程会消耗大量的计算资源和内存，具体原因如下：

• 解码图片：浏览器需要将其解码为像素数据，以便在页面中显示。解码过程需要消耗计算资源和内存，特别是分辨率过大的图片，解码过程会更加耗费资源。
• 显示图片：当图片解码完成后，浏览器需要将像素数据渲染到屏幕上显示。这个过程也需要消耗计算资源和内存，特别是对于分辨率过大的图片，渲染过程会更加耗费资源。