不懒加载（一次性加载 1000 张高清大图）

懒加载与不懒加载的对比

懒加载是现代前端优化图片加载的常见手段，核心思想是延迟加载非视口内的图片资源。与之相反，不懒加载意味着一次性请求所有图片资源，无论它们是否在可视区域内。当页面需要展示大量高清大图（比如1000张）时，这种策略会立即消耗大量带宽和内存。

// 懒加载实现示例
const lazyImages = document.querySelectorAll('img[data-src]');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});
lazyImages.forEach(img => observer.observe(img));

不懒加载的技术实现

直接加载1000张高清大图的技术实现非常简单，只需要常规的img标签排列。但需要考虑几个关键点：

1. 图片尺寸统一处理：确保所有图片有固定宽高或比例
2. DOM节点批量生成：避免频繁操作DOM导致重绘

<div class="image-grid">
  <!-- 直接输出1000个img标签 -->
  <img src="https://example.com/image1.jpg" width="800" height="600">
  <img src="https://example.com/image2.jpg" width="800" height="600">
  <!-- ...剩余998个img标签 -->
</div>

性能影响分析

网络请求冲击

• 浏览器对同域名有并发请求限制（通常6个）
• 1000个并行请求会导致严重队列堆积
• 移动网络下可能触发运营商限制

内存占用问题

• 每张1920x1080的PNG图片约2-3MB
• 1000张图片可能占用2-3GB内存
• 低端设备可能直接崩溃

// 内存监控示例
setInterval(() => {
  const memory = performance.memory;
  console.log(`已用内存: ${(memory.usedJSHeapSize / 1048576).toFixed(2)}MB`);
}, 1000);

实际应用场景

虽然不推荐，但在特定场景下可能需要这种方案：

1. 全屏背景图轮播：预先加载所有背景保证切换流畅
2. 医学影像查看器：放射科医生需要快速切换不同切片
3. 离线画廊应用：所有资源已本地缓存的情况

/* 优化渲染性能的CSS方案 */
.image-grid {
  contain: strict;
  will-change: transform;
}
img {
  image-rendering: -webkit-optimize-contrast;
  backface-visibility: hidden;
}

优化策略

即使采用不懒加载，仍可通过以下方式减轻压力：

分阶段加载

// 分批加载示例
const totalImages = 1000;
const batchSize = 50;

async function loadInBatches() {
  for (let i = 0; i < totalImages; i += batchSize) {
    await loadBatch(i, Math.min(i + batchSize, totalImages));
    await new Promise(resolve => setTimeout(resolve, 300));
  }
}

function loadBatch(start, end) {
  return Promise.all(
    Array.from({length: end-start}, (_,j) => {
      const img = new Image();
      img.src = `images/${start+j+1}.jpg`;
      return new Promise(resolve => img.onload = resolve);
    })
  );
}

内存管理

// 图片缓存控制
const imageCache = new Map();

function getImage(index) {
  if(!imageCache.has(index)) {
    const img = new Image();
    img.src = `images/${index}.jpg`;
    imageCache.set(index, img);
    
    // 限制缓存大小
    if(imageCache.size > 100) {
      const oldestKey = imageCache.keys().next().value;
      imageCache.delete(oldestKey);
    }
  }
  return imageCache.get(index);
}

浏览器兼容性应对

不同浏览器对大量图片的处理差异很大：

1. Chrome：内存管理较好但会明显卡顿
2. Firefox：容易触发内存保护机制
3. Safari：可能提前终止加载过程
4. 移动端浏览器：表现最差，容易崩溃

// 浏览器能力检测
const canHandleMassiveImages = () => {
  try {
    const canvas = document.createElement('canvas');
    canvas.width = 5000;
    canvas.height = 5000;
    const ctx = canvas.getContext('2d');
    ctx.fillRect(0, 0, 1, 1);
    return canvas.toDataURL().length > 0;
  } catch(e) {
    return false;
  }
};

服务端配合方案

后端可以采取以下配合措施：

1. 自动生成不同尺寸版本
2. 实现智能裁剪接口
3. 提供图片指纹校验

GET /images?ids=1-1000&width=800&height=600&quality=80
Accept: image/webp

监控与降级

必须建立完善的监控体系：

// 性能监控点
const metrics = {
  loadStart: performance.now(),
  memoryPeak: 0,
  failedLoads: 0
};

window.addEventListener('load', () => {
  metrics.loadEnd = performance.now();
  sendMetricsToServer(metrics);
});

document.addEventListener('error', (e) => {
  if(e.target.tagName === 'IMG') metrics.failedLoads++;
}, true);

用户体验补偿

即使技术实现可行，仍需考虑用户体验：

1. 显示加载进度条
2. 实现加载优先级控制
3. 提供中止加载的按钮

// 进度指示器实现
const progress = document.getElementById('load-progress');
let loaded = 0;

document.querySelectorAll('img').forEach(img => {
  img.onload = img.onerror = () => {
    loaded++;
    progress.value = (loaded / 1000) * 100;
  };
});