diff --git a/src/views/Home/HomePage.tsx b/src/views/Home/HomePage.tsx index 38f1484e..ef50e489 100644 --- a/src/views/Home/HomePage.tsx +++ b/src/views/Home/HomePage.tsx @@ -1,7 +1,7 @@ // src/views/Home/HomePage.tsx // 首页 - 专业投资分析平台 -import React, { useEffect, useCallback, useState } from 'react'; +import React, { useEffect, useCallback, useRef } from 'react'; import { Box, Container, VStack, SimpleGrid } from '@chakra-ui/react'; import { useNavigate } from 'react-router-dom'; import { useAuth } from '@/contexts/AuthContext'; @@ -11,7 +11,6 @@ import { ACQUISITION_EVENTS } from '@/lib/constants'; import { CORE_FEATURES } from '@/constants/homeFeatures'; import { performanceMonitor } from '@/utils/performanceMonitor'; import type { Feature } from '@/types/home'; -import { HeroBackground } from './components/HeroBackground'; import { HeroHeader } from './components/HeroHeader'; import { FeaturedFeatureCard } from './components/FeaturedFeatureCard'; import { FeatureCard } from './components/FeatureCard'; @@ -25,7 +24,13 @@ const HomePage: React.FC = () => { const { user, isAuthenticated } = useAuth(); const navigate = useNavigate(); const { track } = usePostHogTrack(); - const [imageLoaded, setImageLoaded] = useState(false); + + // ⚡ 性能标记:渲染开始(组件函数执行时,使用 ref 避免严格模式下重复标记) + const hasMarkedStart = useRef(false); + if (!hasMarkedStart.current) { + performanceMonitor.mark('homepage-render-start'); + hasMarkedStart.current = true; + } // 响应式配置 const { @@ -34,12 +39,11 @@ const HomePage: React.FC = () => { headingLetterSpacing, heroTextSize, containerPx, - showDecorations } = useHomeResponsive(); - // ⚡ 性能标记:首页组件挂载 = 渲染开始 + // ⚡ 性能标记:渲染完成(DOM 已挂载) useEffect(() => { - performanceMonitor.mark('homepage-render-start'); + performanceMonitor.mark('homepage-render-end'); }, []); // PostHog 追踪:页面浏览 @@ -70,13 +74,6 @@ const HomePage: React.FC = () => { } }, [track, navigate]); - // 背景图片加载完成回调 - const handleImageLoad = useCallback(() => { - setImageLoaded(true); - // ⚡ 性能标记:首页渲染完成(背景图片加载完成 = 首屏视觉完整) - performanceMonitor.mark('homepage-render-end'); - }, []); - // 特色功能(第一个) const featuredFeature = CORE_FEATURES[0]; // 其他功能 @@ -91,12 +88,6 @@ const HomePage: React.FC = () => { bg="linear-gradient(135deg, #0E0C15 0%, #15131D 50%, #252134 100%)" overflow="hidden" > - {/* 背景装饰 */} - void; - showDecorations: boolean | undefined; -} - -/** - * 首页英雄区背景组件 - * 包含背景图片和装饰性几何图形 - */ -export const HeroBackground: React.FC = ({ - imageLoaded, - onImageLoad, - showDecorations -}) => { - return ( - <> - {/* 背景图片 */} - - - {/* 预加载背景图片 */} - - - - - {/* 装饰性几何图形 - 移动端隐藏 */} - {showDecorations && ( - <> - - - - )} - - ); -};