Angular漫画阅读器：同时加载多少图片不牺牲加载速度？

核心误解澄清 #

JavaScript本身不限制并行请求数，真正的限制来自浏览器的同源请求并发数。目前主流浏览器（Chrome、Firefox、Edge）对同一域名的HTTP/1.1请求，并行数限制在6-8个左右；如果使用HTTP/2，这个限制会大幅放宽（实际受服务器硬件、带宽影响）。

你之前遇到的“所有图片同时加载导致整章需加载完成才能开始阅读”，本质是：一次性发起10个请求时，浏览器会先处理前6-8个，剩余请求进入等待队列，必须等前面的请求完成后才会启动加载。如果你的逻辑是“所有图片加载完成后再渲染”，自然会出现整章加载完才能阅读的情况；而串行加载的问题则是完全浪费了浏览器的并发能力，总耗时等于单张图片加载时间的总和，导致整章耗时极长。

并行加载的理想数量 #

1. 基础参考值：6-8个
   这个数量刚好匹配HTTP/1.1的浏览器同源并发限制，能让浏览器用满并发能力，不会出现请求排队，同时也不会因并发过多触发服务器限流或占用用户过多带宽。
2. 结合场景调整
   • 若图片托管在CDN（不同域名），可适当提升至8-10个——不同域名的并发限制是独立计算的。
   • 针对移动端用户，可降低至4-6个，适配移动网络的稳定性和带宽上限。
   • 若单张图片体积稳定在2-3MB，6个并发的带宽占用约12-18MB/s，多数用户的网络环境都能承受，不会影响首图加载速度。

Angular环境下的具体实现建议 #

• 采用“分批并发+预加载”策略
  1. 首次加载前4-6张图片，加载完成一张就渲染一张，用户可立即开始阅读。
  2. 监听用户阅读位置（滚动事件），当用户读到当前加载的倒数第2-3张时，提前加载下一批图片，既避免一次性加载全部，又保证阅读流畅性。
• 用状态控制图片渲染（避免阻塞）
  通过跟踪图片加载状态，仅渲染已加载完成的图片，示例代码如下：

  // 组件逻辑
  imageUrls = ['chap1-1.jpg', 'chap1-2.jpg', ...];
  loadedImageUrls: string[] = [];
  
  loadImageBatch(startIdx: number, batchSize: number) {
    const batch = this.imageUrls.slice(startIdx, startIdx + batchSize);
    batch.forEach(url => {
      const img = new Image();
      img.src = url;
      img.onload = () => {
        this.loadedImageUrls.push(url);
      };
    });
  }
  
  ngOnInit() {
    // 初始化加载前6张
    this.loadImageBatch(0, 6);
  }
  
  // 滚动时触发下一批加载
  handleScroll() {
    const lastLoadedIdx = this.imageUrls.indexOf(this.loadedImageUrls.at(-1) || '');
    if (lastLoadedIdx >= this.imageUrls.length - 3) return;
    this.loadImageBatch(lastLoadedIdx + 1, 4);
  }
  

  <!-- 模板代码 -->
  <div *ngFor="let url of imageUrls">
    <img *ngIf="loadedImageUrls.includes(url)" [src]="url" alt="漫画页面">
    <div *ngIf="!loadedImageUrls.includes(url)" class="loading-placeholder">加载中...</div>
  </div>
  

• 摒弃串行加载逻辑
  除非服务器有严格的单IP限流，否则完全没必要依赖(load)事件做串行触发，这会彻底浪费浏览器的并发能力。

额外优化点 #

• 给图片添加loading="lazy"原生懒加载属性，配合分批策略双重保障。
• 将图片转成WebP格式，可降低30%-50%的体积，大幅缩短加载时间。
• 利用Angular的HttpClient提前缓存图片Blob对象，避免重复请求。

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