Angular YouTube组件性能问题求助：Safari下持续JS事件致高CPU占用

我在使用Angular YouTube组件时遇到严重性能问题：通过Safari Timeline监控发现，页面会持续触发大量JavaScript事件，导致CPU占用率居高不下，整体性能卡顿。但只要注释掉该YouTube组件，Timeline显示的事件数量立刻大幅减少，CPU占用显著下降，页面性能恢复正常。

目前已尝试过多个版本的Angular YouTube库，当前使用的是最新版15.1.4，调研许久仍未找到解决方案，恳请各位提供解决思路。

代码示例 #

组件HTML代码

<youtube-player 
    [videoId]="videoId"
    suggestedQuality="large"
    [height]="156"
    [width]="275">
</youtube-player>

TypeScript代码

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

@Component({
    selector: 'app-youtube-player',
    templateUrl: './youtube-player.component.html',
    styleUrls: ['./youtube-player.component.css']
})
export class YoutubePlayerComponent implements OnInit {

    private apiLoaded = false;
    @Input() videoId: string;

    constructor() { }

    ngOnInit(): void {

        if (!this.apiLoaded) {
            const tag = document.createElement('script');
            tag.src = 'https://www.youtube.com/iframe_api';
            document.body.appendChild(tag);
            this.apiLoaded = true;
        }
    }
}

Safari Timeline截图 #

• YouTube组件渲染时：
  

• 注释YouTube组件后：
  

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