Swiper web component的register()方法引发性能异常问题

问题现象 #

在Angular项目的app-event-card组件中，调用Swiper的register()方法后出现组件无限重绘，页面严重卡顿。无任何数据变更的情况下，Angular持续触发变更检测；删除register()调用则Swiper组件无法正常加载。

问题原因 #

1. 重复注册Web Component：组件的ngOnInit和ngAfterViewInit生命周期中都调用了register()，每次调用都会重新注册Swiper的Web Component，触发Angular的变更检测循环。若存在多个app-event-card实例，重复注册次数会翻倍，进一步加剧循环。
2. 变量名错误：@ViewChild('swiper')绑定的变量名是elementRef，但后续代码中使用swiperRef获取实例，导致Swiper实例无法正确获取，依赖setTimeout的临时修复也会间接影响变更检测。
3. setTimeout语法错误：原代码中setTimeout的延迟时间写在了回调函数内部，实际未生效，导致Swiper初始化时机异常，可能触发额外的变更检测。

解决方案 #

1. 全局注册Swiper Web Component #

将register()移到项目入口文件main.ts中，仅执行一次，避免组件重复注册：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { register } from 'swiper/element/bundle';

// 全局注册Swiper Web Component，仅执行一次
register();

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

2. 清理组件内的重复注册代码 #

删除组件ngOnInit和ngAfterViewInit中的register()调用，并修正变量名和setTimeout语法：

import { Component, Input, OnInit, OnDestroy, AfterViewInit, ViewChild, ElementRef, ChangeDetectorRef} from '@angular/core'
// 移除组件内的register导入（全局已注册时可删除）
// import {register} from 'swiper/element/bundle'
import {Swiper} from 'swiper/types'
// ... 其他导入

@Component({
  selector: "app-event-card",
  templateUrl: "./event-card.component.html",
  styleUrls: ["./event-card.component.scss"],
})
export class EventCardComponent implements OnInit, OnDestroy, AfterViewInit  {
  // ... 构造函数和其他变量定义

  // 修正ViewChild绑定的变量名，与后续代码保持一致
  @ViewChild('swiper')
  swiperRef?: ElementRef

  // ... 其他变量

  ngOnInit() {
    // 移除register()调用
    this.userAuth = this.authService.getAuthState()
    this.startLikesCount = this.event.likes ? this.event.likes.vk_count + this.event.likes.local_count : 0
    this.favorite = this.event.favorites_users_exists! 
    this.like = this.event.liked_users_exists!

    if(this.event.vk_group_id && this.event.vk_post_id){
      this.getVkEventLikes(this.event.vk_group_id, this.event.vk_post_id)
      this.isLikedUserVKEvent(this.event.vk_group_id, this.event.vk_post_id)
    }
  }

  ngAfterViewInit(): void {
    // 移除register()调用
    this.swiper = this.swiperRef?.nativeElement.swiper
    // 修正setTimeout的延迟时间位置
    setTimeout(() => {
      this.swiperCurrentSlide = this.swiper?.realIndex! + 1
      this.swiperTotalSlids =  this.swiper?.slides.length 
      this.swiper?.autoplay.start()
    }, 1000)

    this.swiper?.on('slideChange', () => {
      this.swiperCurrentSlide = this.swiper?.realIndex! + 1
    })
    
    this.cdr.detectChanges()
  }

  // ... 其他方法
}

3. 优化Swiper组件属性绑定（可选） #

将HTML中Swiper的原生属性改为Angular绑定语法，避免潜在的变更检测问题：

<swiper-container 
  [routerLink]="isSight ? ['/sights', event.id] : ['/events', event.id]"
  #swiper
  [modules]="swiperModules" 
  [autoplay]="{disableOnInteraction: false}"
  [followFinger]="false" 
  [loop]="true" 
  [initialSlide]="0" 
>
<!-- ... 其他内容 -->
</swiper-container>

验证 #

修改后，Swiper组件仅在全局注册一次，组件不会触发无限变更检测循环，页面卡顿消失，同时Swiper能正常加载运行。

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