图片加载完成后出现严重FPS下降问题求助

问题背景 #

开发的图库页面支持用户上传、查看图片，已经开启懒加载避免初始加载延迟，但当图片加载到屏幕时，配合页面的动态渐变背景和CRT特效，出现严重帧率下降，且加载的图片数量越多，问题越明显。

核心原因分析 #

1. 渐变动画与图片渲染的资源冲突：背景的background-position动画和CRT高频闪烁动画会持续占用GPU资源，图片加载时的解码、渲染也需要GPU参与，两者叠加导致资源不足。
2. 图片未做轻量化处理：直接加载原图，即使懒加载，加载时的解码、绘制成本依然很高，多图同时加载时会加剧性能消耗。
3. CRT特效的高频重绘：.crt::after的flicker动画每0.15秒触发一次，高频切换会持续触发浏览器重绘，进一步挤占GPU资源。

针对性优化方案 #

1. 优化背景动画的GPU利用率 #

给背景图层添加属性，提前告诉浏览器为动画分配GPU资源，避免动画时的突然资源抢占：

.background-layer-1, .background-layer-2 {
    will-change: background-position;
    transform: translateZ(0); /* 强制开启GPU加速 */
}

同时适当延长渐变动画时长，降低动画频率：

/* 修改动画时长，从10s调整为15s */
.background-layer-1 {
    animation: gradient 15s ease infinite;
}
.background-layer-2 {
    animation: 15s 4s ease infinite gradient, 5s forwards background_layer_2;
}

2. 优化图片加载与渲染 #

• 生成并加载缩略图：后端为上传的图片生成对应尺寸的缩略图，图库网格中先加载缩略图，点击查看时再加载原图。
  后端示例（Python）：

  from PIL import Image
  def generate_thumbnail(image_path, size=(300, 300)):
      with Image.open(image_path) as img:
          img.thumbnail(size)
          thumbnail_path = image_path.replace("gallery", "gallery/thumbnails")
          img.save(thumbnail_path)
  

  前端模板修改：

  <a href='#' class='gallery-image' onclick='add_full_image(&quot;/user_data/gallery/{{image[1]}}&quot;, &quot;{{i}}&quot;, this)'>
      <img id='{{i}}' src="/user_data/gallery/thumbnails/{{image[1]}}" loading='lazy' />
  </a>
  

• 异步解码图片：给img标签添加decoding="async"，让浏览器异步解码图片，不阻塞主线程：

  <img id='{{i}}' src="..." loading='lazy' decoding="async" />
  

• 精细化懒加载：用Intersection Observer手动监听元素可见性，提前少量距离开始加载，避免同时加载过多图片：

  document.addEventListener('DOMContentLoaded', () => {
      const images = document.querySelectorAll('.gallery-image img');
      const observer = new IntersectionObserver((entries) => {
          entries.forEach(entry => {
              if (entry.isIntersecting) {
                  const img = entry.target;
                  img.src = img.dataset.src || img.src;
                  observer.unobserve(img);
              }
          });
      }, { rootMargin: '200px' }); // 提前200px触发加载
  
      images.forEach(img => observer.observe(img));
  });
  

3. 优化CRT特效性能 #

• 降低闪烁频率：把flicker动画时长从0.15s改为0.3s，减少重绘次数：

  .crt::after {
      animation: flicker 0.3s infinite;
  }
  

• 简化动画关键帧：减少极端opacity值的切换，降低GPU计算负担：

  @keyframes flicker {
      0%, 100% { opacity: 0.3; }
      25% { opacity: 0.35; }
      50% { opacity: 0.4; }
      75% { opacity: 0.35; }
  }
  

• 给CRT伪元素开启GPU加速：

  .crt::before, .crt::after {
      transform: translateZ(0);
      will-change: opacity;
  }
  

4. 其他细节优化 #

• 避免DOM操作阻塞动画：用requestAnimationFrame包裹大图预览的DOM操作，确保在动画帧间隙执行：

  function add_full_image(url, id, element) {
      og_target = element;
      let container = document.getElementById('full-image-container');
      let container_inner = document.getElementById('full-image-container-inner');
      
      requestAnimationFrame(() => {
          container.style.zIndex = '1';
          container.classList.remove('hidden');
          container_inner.innerHTML = '';
          let img = document.getElementById(id).cloneNode(false);
          img.className = 'full-image';
          container_inner.appendChild(img);
      });
  }
  

• 图片硬件加速：给图片添加属性，让GPU负责渲染：

  .gallery-image img, .full-image {
      transform: translateZ(0);
      will-change: transform;
  }
  

内容的提问来源于stack exchange，提问作者tygzy