perf(about): 优化页面初始化和渲染性能

- 使用requestIdleCallback优化初始数据获取时机
- 降级方案使用延迟setTimeout避免阻塞主线程
- 引入requestAnimationFrame优化DOM更新避免强制重排
- 为3D球体添加防抖尺寸计算和批量样式更新
- 监听窗口resize事件动态调整3D球体布局
- 添加主题/语言变更的日志记录便于调试

js/about.js

@@ -220,8 +220,15 @@ class DataManager {
     }
 
     init() {
-        setTimeout(() => this.fetchGithub(), 0);
+        // 使用requestIdleCallback或setTimeout优化初始化调用
-        setTimeout(() => this.fetchBlog(), 0);
+        if ('requestIdleCallback' in window) {
+            requestIdleCallback(() => this.fetchGithub(), { timeout: 1000 });
+            requestIdleCallback(() => this.fetchBlog(), { timeout: 1000 });
+        } else {
+            // 降级到setTimeout，但稍后执行以避免阻塞
+            setTimeout(() => this.fetchGithub(), 50);
+            setTimeout(() => this.fetchBlog(), 100);
+        }
     }
 
     // 创建带超时的fetch函数
@@ -336,10 +343,16 @@ class DataManager {
                 <div class="repo-desc">${escapeHtml(dShort)}</div>
             </div>`;
         });
-        const pc = $('#projects-container');
+        
-        pc.removeClass('fade-in');
+        // 使用requestAnimationFrame避免强制重排
-        pc.html(html);
+        requestAnimationFrame(() => {
-        pc.addClass('fade-in');
+            const pc = $('#projects-container');
+            pc.removeClass('fade-in');
+            requestAnimationFrame(() => {
+                pc.html(html);
+                pc.addClass('fade-in');
+            });
+        });
     }
 
     // 从RSS获取博客文章
@@ -447,10 +460,16 @@ class DataManager {
                 <div class="b-cat">${escapeHtml(cat)}</div>
             </div>`;
         });
-        const bc = $('#blog-container');
+        
-        bc.removeClass('fade-in');
+        // 使用requestAnimationFrame避免强制重排
-        bc.html(html);
+        requestAnimationFrame(() => {
-        bc.addClass('fade-in');
+            const bc = $('#blog-container');
+            bc.removeClass('fade-in');
+            requestAnimationFrame(() => {
+                bc.html(html);
+                bc.addClass('fade-in');
+            });
+        });
     }
 }
 
@@ -585,6 +604,7 @@ class UIManager {
         const themeObserver = new MutationObserver(() => {
             const newTheme = document.documentElement.getAttribute('data-theme');
             const newLang = document.documentElement.getAttribute('data-lang');
+            console.log('Theme/Language changed:', newTheme, newLang);
             // 延迟执行
             setTimeout(() => {
                 // 重新加载整个评论组件
@@ -738,78 +758,111 @@ class UIManager {
         } else {
             // PC: 3D Sphere
             container.classList.remove('mobile-scroll');
-            container.__animToken = Date.now();
-            const tags = [];
             
-            techStack.forEach((item, index) => {
+            // 使用防抖优化尺寸计算
-                const el = document.createElement('a');
+            let resizeTimeout;
-                el.className = 'tech-tag-3d';
+            const updateContainerSize = () => {
-                const colorClass = `tag-color-${item.gradientId || ((index % 10) + 1)}`;
+                if (resizeTimeout) {
-                el.classList.add(colorClass);
+                    clearTimeout(resizeTimeout);
-                el.innerText = item.name;
-                el.style.border = 'none';
-                container.appendChild(el);
-                tags.push({el, x: 0, y: 0, z: 0});
-            });
-
-            // 动态半径，避免容器溢出
-            let radius = Math.max(160, Math.min(container.offsetWidth, container.offsetHeight) / 2 - 24);
-            const dtr = Math.PI / 180;
-            let lasta = 1, lastb = 1;
-            let active = false, mouseX = 0, mouseY = 0;
-
-            // Init positions
-            tags.forEach((tag, i) => {
-                let phi = Math.acos(-1 + (2 * i + 1) / tags.length);
-                let theta = Math.sqrt(tags.length * Math.PI) * phi;
-                tag.x = radius * Math.cos(theta) * Math.sin(phi);
-                tag.y = radius * Math.sin(theta) * Math.sin(phi);
-                tag.z = radius * Math.cos(phi);
-            });
-
-            container.onmouseover = () => active = true;
-            container.onmouseout = () => active = false;
-            container.onmousemove = (e) => {
-                let rect = container.getBoundingClientRect();
-                mouseX = (e.clientX - (rect.left + rect.width / 2)) / 5;
-                mouseY = (e.clientY - (rect.top + rect.height / 2)) / 5;
-            };
-
-            const update = () => {
-                let a, b;
-                if (active) {
-                    a = (-Math.min(Math.max(-mouseY, -200), 200) / radius) * 2;
-                    b = (Math.min(Math.max(-mouseX, -200), 200) / radius) * 2;
-                } else {
-                    a = lasta * 0.98; // Auto rotate
-                    b = lastb * 0.98;
                 }
-                lasta = a;
+                resizeTimeout = setTimeout(() => {
-                lastb = b;
+                    init3DSphere();
-
+                }, 100);
-                if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01 && !active) a = 0.5; // Keep spinning slowly
-
-                let sa = Math.sin(a * dtr), ca = Math.cos(a * dtr);
-                let sb = Math.sin(b * dtr), cb = Math.cos(b * dtr);
-
-                tags.forEach(tag => {
-                    let rx1 = tag.x, ry1 = tag.y * ca - tag.z * sa, rz1 = tag.y * sa + tag.z * ca;
-                    let ry2 = ry1, rz2 = rx1 * -sb + rz1 * cb;
-                    tag.x = rx1 * cb + rz1 * sb;
-                    tag.y = ry2;
-                    tag.z = rz2;
-
-                    let scale = (tag.z + radius) / (2 * radius) + 0.45;
-                    scale = Math.min(Math.max(scale, 0.7), 1.15);
-                    tag.el.style.opacity = (tag.z + radius) / (2 * radius) + 0.2;
-                    tag.el.style.zIndex = parseInt(scale * 100);
-                    let left = tag.x + container.offsetWidth / 2 - tag.el.offsetWidth / 2;
-                    let top = tag.y + container.offsetHeight / 2 - tag.el.offsetHeight / 2;
-                    tag.el.style.transform = `translate(${left}px, ${top}px) scale(${scale})`;
-                });
-                requestAnimationFrame(update);
             };
-            update();
+            
+            // 初始化3D球体
+            const init3DSphere = () => {
+                // 清除之前的动画
+                if (container.__animToken) {
+                    cancelAnimationFrame(container.__animToken);
+                }
+                
+                // 清空容器
+                container.innerHTML = '';
+                
+                const tags = [];
+                
+                techStack.forEach((item, index) => {
+                    const el = document.createElement('a');
+                    el.className = 'tech-tag-3d';
+                    const colorClass = `tag-color-${item.gradientId || ((index % 10) + 1)}`;
+                    el.classList.add(colorClass);
+                    el.innerText = item.name;
+                    el.style.border = 'none';
+                    container.appendChild(el);
+                    tags.push({el, x: 0, y: 0, z: 0});
+                });
+                
+                // 动态半径，避免容器溢出，使用防抖优化
+                let radius = Math.max(160, Math.min(container.offsetWidth, container.offsetHeight) / 2 - 24);
+                const dtr = Math.PI / 180;
+                let lasta = 1, lastb = 1;
+                let active = false, mouseX = 0, mouseY = 0;
+                
+                // 初始化位置
+                tags.forEach((tag, i) => {
+                    let phi = Math.acos(-1 + (2 * i + 1) / tags.length);
+                    let theta = Math.sqrt(tags.length * Math.PI) * phi;
+                    tag.x = radius * Math.cos(theta) * Math.sin(phi);
+                    tag.y = radius * Math.sin(theta) * Math.sin(phi);
+                    tag.z = radius * Math.cos(phi);
+                });
+                
+                container.onmouseover = () => active = true;
+                container.onmouseout = () => active = false;
+                container.onmousemove = (e) => {
+                    let rect = container.getBoundingClientRect();
+                    mouseX = (e.clientX - (rect.left + rect.width / 2)) / 5;
+                    mouseY = (e.clientY - (rect.top + rect.height / 2)) / 5;
+                };
+                
+                const update = () => {
+                    let a, b;
+                    if (active) {
+                        a = (-Math.min(Math.max(-mouseY, -200), 200) / radius) * 2;
+                        b = (Math.min(Math.max(-mouseX, -200), 200) / radius) * 2;
+                    } else {
+                        a = lasta * 0.98; // Auto rotate
+                        b = lastb * 0.98;
+                    }
+                    lasta = a;
+                    lastb = b;
+                    
+                    if (Math.abs(a) <= 0.01 && Math.abs(b) <= 0.01 && !active) a = 0.5; // Keep spinning slowly
+                    
+                    let sa = Math.sin(a * dtr), ca = Math.cos(a * dtr);
+                    let sb = Math.sin(b * dtr), cb = Math.cos(b * dtr);
+                    
+                    // 批量更新样式以减少重排
+                    const fragment = document.createDocumentFragment();
+                    
+                    tags.forEach(tag => {
+                        let rx1 = tag.x, ry1 = tag.y * ca - tag.z * sa, rz1 = tag.y * sa + tag.z * ca;
+                        let ry2 = ry1, rz2 = rx1 * -sb + rz1 * cb;
+                        tag.x = rx1 * cb + rz1 * sb;
+                        tag.y = ry2;
+                        tag.z = rz2;
+                        
+                        let scale = (tag.z + radius) / (2 * radius) + 0.45;
+                        scale = Math.min(Math.max(scale, 0.7), 1.15);
+                        tag.el.style.opacity = (tag.z + radius) / (2 * radius) + 0.2;
+                        tag.el.style.zIndex = parseInt(scale * 100);
+                        let left = tag.x + container.offsetWidth / 2 - tag.el.offsetWidth / 2;
+                        let top = tag.y + container.offsetHeight / 2 - tag.el.offsetHeight / 2;
+                        tag.el.style.transform = `translate(${left}px, ${top}px) scale(${scale})`;
+                    });
+                    
+                    container.__animToken = requestAnimationFrame(update);
+                };
+                
+                container.__animToken = requestAnimationFrame(update);
+            };
+            
+            // 初始化3D球体
+            init3DSphere();
+            
+            // 监听窗口大小变化
+            window.addEventListener('resize', updateContainerSize);
         }
     }