Angular网站图片动画执行后冻结崩溃的修复方案咨询

问题分析 #

当前代码每次调用photoEffect()时，会随机生成新的firstRandomPhoto/secondRandomPhoto值，导致background-image的URL频繁变化，浏览器会重复请求并加载图片。频繁的网络请求+DOM样式修改引发的重绘/回流累积，会导致内存占用过高，最终触发Chrome页面冻结崩溃。同时，代码中的while(true)循环存在极端情况下阻塞JS线程的风险，进一步加剧页面卡顿。

具体解决方案 #

1. 预加载所有图片资源

提前将所有70张图片加载到浏览器缓存中，避免每次切换图片时重复发起网络请求：

import { Component, OnInit } from '@angular/core';

@Component({
  // 组件元数据
})
export class YourComponent implements OnInit {
  private preloadedImages: Map<number, HTMLImageElement> = new Map();

  ngOnInit() {
    // 预加载1-70号图片
    for (let i = 1; i <= 70; i++) {
      const img = new Image();
      img.src = `../../../assets/color/${i}.jpeg`;
      this.preloadedImages.set(i, img);
    }
  }

  // 其他组件逻辑...
}

2. 统一样式绑定方式，减少重绘次数

移除renderer直接操作DOM的逻辑，改用Angular的属性绑定批量更新样式，避免频繁触发浏览器重绘：

<div class="left">
  <div class="first">
    <div #firstBox 
         [style.backgroundImage]="`url(../../../assets/color/${firstRandomPhoto}.jpeg)`"
         [style.width.px]="firstRandomWidth"
         [style.height.px]="firstRandomHeight"
         [style.top.px]="firstPosition"
         [style.left.px]="firstLeft"
         class="photo-box"></div>
  </div>
  <div class="second">
    <div #secondBox 
         [style.backgroundImage]="`url(../../../assets/color/${secondRandomPhoto}.jpeg)`"
         [style.width.px]="secondRandomWidth"
         [style.height.px]="secondRandomHeight"
         [style.top.px]="secondPosition"
         [style.left.px]="secondLeft"
         class="photo-box"></div>
  </div>
</div>

对应TS代码中，只需直接更新变量值即可，无需再调用renderer.setStyle：

photoEffect() {
  // 生成随机参数的逻辑保持不变...

  // 移除原renderer相关代码，变量更新后Angular会自动同步样式
}

3. 优化随机数生成的循环逻辑

给while循环添加最大尝试次数限制，避免极端情况下阻塞JS线程：

// 生成secondPosition的逻辑修改
let attempts = 0;
const maxAttempts = 100;
do {
  this.secondPosition = Math.floor(Math.random() * 31) + 10;
  attempts++;
} while (attempts < maxAttempts && 
         (this.secondPosition === this.firstPosition ||
          Math.abs((this.secondRandomHeight / 100) - Math.floor(this.secondPosition / 10)) <= 0.5 ||
          Math.abs(this.secondPosition - this.firstPosition) < 15));

// 生成secondRandomPhoto的逻辑修改
attempts = 0;
do {
  this.secondRandomPhoto = Math.floor(Math.random() * 70) + 1;
  attempts++;
} while (attempts < maxAttempts && this.secondRandomPhoto === this.firstRandomPhoto);

4. 用requestAnimationFrame优化动画时机

将样式更新逻辑包裹在requestAnimationFrame中，让浏览器在重绘周期内批量处理，避免布局抖动：

photoEffect() {
  // 生成随机参数的逻辑...

  requestAnimationFrame(() => {
    // 这里放变量更新逻辑（如果用Angular绑定则无需额外操作，Angular已做优化）
  });
}

额外检查项 #

• 组件销毁时清理预加载的图片引用，避免内存泄漏：

  ngOnDestroy() {
    this.preloadedImages.clear();
  }
  

• 检查是否存在重复订阅Observable、未清理的定时器等其他内存泄漏点。

内容的提问来源于stack exchange，提问作者Alberto De Maria