【前端进阶】【实战】【性能优化】前端开发中的事件监听与DOM操作优化实践

前端开发中的事件监听与DOM操作优化实践

在前端开发中，事件监听器的管理和DOM操作的优化是提升应用性能和稳定性的关键。本文将结合具体案例，探讨如何通过技术手段解决这些问题，并分享一些实用的优化技巧。

问题背景

在一个基于高德地图的应用中，我们实现了一个信息窗口组件（InfoWindow），其中包含视频播放功能和轮播图展示。随着用户交互的增加，我们遇到了以下问题：

1. 信息窗口频繁打开关闭后，页面性能明显下降
2. 视频播放事件偶尔会触发多次
3. 轮播图初始化有时会失败

经过分析，发现这些问题主要是由于事件监听器未正确清理、DOM操作时序问题以及事件冒泡导致的。

解决方案

1. 增强事件监听器清理机制

在复杂的前端应用中，事件监听器的正确清理至关重要，否则会导致内存泄漏和不可预期的行为。以下是我们的改进代码：

import { useEffect, useRef } from 'react';

export const useInfoWindow = () => {
  const infoWindowRef = useRef<HTMLDivElement>(null);
  const videoRef = useRef<HTMLVideoElement>(null);

  const initInfoWindow = () => {
    // 创建信息窗口DOM
    const infoWindow = document.createElement('div');
    infoWindow.className = 'info-window';
    infoWindowRef.current = infoWindow;
    
    // 创建视频元素
    const video = document.createElement('video');
    video.id = 'info-video';
    video.src = 'https://example.com/video.mp4';
    videoRef.current = video;
    
    // 添加视频事件监听器
    video.addEventListener('play', handleVideoPlay);
    video.addEventListener('pause', handleVideoPause);
    
    // 添加到信息窗口
    infoWindow.appendChild(video);
    document.body.appendChild(infoWindow);
  };

  const handleVideoPlay = (e: Event) => {
    e.stopPropagation();
    console.log('[Video Event] Play triggered on:', videoRef.current);
    // 处理视频播放逻辑
  };

  const handleVideoPause = (e: Event) => {
    e.stopPropagation();
    console.log('[Video Event] Pause triggered on:', videoRef.current);
    // 处理视频暂停逻辑
  };

  const destroyInfoWindow = () => {
    if (infoWindowRef.current) {
      console.log('Destroying info window and cleaning up listeners');
      
      // 强制清理视频事件监听器
      if (videoRef.current) {
        videoRef.current.removeEventListener('play', handleVideoPlay);
        videoRef.current.removeEventListener('pause', handleVideoPause);
        
        // 通过克隆节点彻底移除所有事件监听器
        const parent = videoRef.current.parentNode;
        if (parent) {
          const clonedVideo = videoRef.current.cloneNode(true) as HTMLVideoElement;
          parent.replaceChild(clonedVideo, videoRef.current);
          videoRef.current = clonedVideo;
        }
      }
      
      // 移除信息窗口
      document.body.removeChild(infoWindowRef.current);
      infoWindowRef.current = null;
    }
  };

  // 组件卸载时清理
  useEffect(() => {
    return () => {
      destroyInfoWindow();
    };
  }, []);

  return { initInfoWindow, destroyInfoWindow };
};

2. 改进DOM元素查询逻辑

为了确保DOM操作的时序正确性，我们对轮播图初始化逻辑进行了优化：

export const initCarousel = (containerId: string): Promise<void> => {
  return new Promise((resolve, reject) => {
    console.log(`Initializing carousel for container: ${containerId}`);
    
    // 使用requestAnimationFrame确保DOM完全更新后再进行查询
    requestAnimationFrame(() => {
      const container = document.getElementById(containerId);
      
      if (!container) {
        const errorMsg = `Carousel container with id ${containerId} not found`;
        console.error(errorMsg);
        reject(new Error(errorMsg));
        return;
      }
      
      // 查找最新的轮播项元素
      const carouselItems = container.querySelectorAll('.carousel-item');
      
      if (carouselItems.length === 0) {
        const errorMsg = `No carousel items found in container ${containerId}`;
        console.error(errorMsg);
        reject(new Error(errorMsg));
        return;
      }
      
      console.log(`Found ${carouselItems.length} carousel items`);
      
      // 初始化轮播逻辑
      // ...
      
      console.log(`Carousel initialized successfully for container ${containerId}`);
      resolve();
    });
  });
};

3. 更新异步调用逻辑

在地图组件中，我们更新了调用轮播图初始化的代码，以支持Promise返回值并添加错误处理：

import { useEffect } from 'react';
import { initCarousel } from './carousel';

export const useAMap = () => {
  useEffect(() => {
    // 初始化地图
    const map = new AMap.Map('map-container', {
      zoom: 10,
      center: [116.397428, 39.90923]
    });
    
    // 地图加载完成后初始化信息窗口和轮播图
    map.on('complete', async () => {
      try {
        console.log('Map loaded successfully, initializing carousel');
        
        // 初始化信息窗口
        // ...
        
        // 等待轮播容器准备好
        await initCarousel('carousel-container');
        
        console.log('Carousel initialized successfully');
      } catch (error) {
        console.error('Failed to initialize carousel:', error);
        // 可以添加降级处理逻辑
      }
    });
    
    // 组件卸载时清理
    return () => {
      if (map) {
        map.destroy();
        console.log('Map destroyed');
      }
    };
  }, []);
  
  return { /* 返回地图相关方法 */ };
};

优化效果

通过上述改进，我们的应用获得了以下提升：

1. 内存泄漏防护：通过克隆节点彻底清理事件监听器，解决了信息窗口频繁打开关闭导致的性能下降问题
2. 异步安全：使用Promise和requestAnimationFrame确保DOM操作的时序正确，轮播图初始化成功率提高到100%
3. 调试友好：添加的大量控制台日志帮助我们快速定位并解决了多个偶发问题
4. 事件隔离：通过stopPropagation防止事件冲突，视频播放事件不再重复触发

这些优化措施不仅提升了应用的稳定性和性能，也为后续开发和维护提供了良好的基础。在复杂的前端应用开发中，合理管理事件监听器和优化DOM操作是持续需要关注的重点。