当前位置：首页 > news >正文

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

news 2025/7/3 10:40:35

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

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

问题背景

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

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

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

解决方案

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

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

import { useEffect, useRef } from 'react';export const useInfoWindow = () => {const infoWindowRef = useRef<HTMLDivElement>(null);const videoRef = useRef<HTMLVideoElement>(null);const initInfoWindow = () => {// 创建信息窗口DOMconst 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 { /* 返回地图相关方法 */ };
};