Next.js博客用Tailwind CSS实现响应式TOC卡顿，求解决方案

问题根源 #

你当前使用的invisible/xl:visible仅控制元素可见性，元素仍会在DOM中占据布局空间，浏览器需要持续维护该元素的布局信息，切换时易出现延迟；同时如果TOC组件本身内容较多，即使隐藏也会占用渲染资源，进一步拖慢响应速度。

解决方案 #

1. 替换为hidden/xl:block类（最直接有效）

改用控制元素显示/隐藏的display属性类，hidden会让元素完全脱离布局，浏览器不会为其计算布局和绘制，切换时性能更优：

<div className={`hidden xl:block`}>
  <TableOfContents />
</div>

注：Tailwind的xl断点默认是1280px，若你自定义了断点，需对应调整为你的大屏断点类。

2. 条件渲染TOC组件（彻底减少资源占用）

仅在大屏时才渲染TOC组件，避免小屏幕时组件在DOM中闲置：

import { useState, useEffect } from 'react';
import TableOfContents from './TableOfContents';

const BlogPage = () => {
  // 自定义Hook监听屏幕是否达到xl尺寸
  const useIsLargeScreen = () => {
    const [isLarge, setIsLarge] = useState(false);
    
    useEffect(() => {
      const checkScreenSize = () => {
        // 对应Tailwind xl断点的默认宽度1280px
        setIsLarge(window.innerWidth >= 1280);
      };
      
      checkScreenSize();
      window.addEventListener('resize', checkScreenSize);
      return () => window.removeEventListener('resize', checkScreenSize);
    }, []);
    
    return isLarge;
  };

  const showTOC = useIsLargeScreen();

  return (
    <div className="container mx-auto">
      {/* 博客内容 */}
      <main>...</main>
      {/* 仅大屏时渲染TOC */}
      {showTOC && <TableOfContents />}
    </div>
  );
};

export default BlogPage;

这种方式会在小屏幕时完全移除TOC组件的DOM节点，大幅减少页面渲染负担，切换时几乎无延迟。

3. 优化过渡动画（若需要平滑效果）

如果需要切换时有平滑过渡，避免直接用visibility的过渡，结合opacity和transform实现高性能动画，同时配合条件渲染：

import { useState, useEffect } from 'react';
import TableOfContents from './TableOfContents';

const BlogPage = () => {
  const [isLargeScreen, setIsLargeScreen] = useState(false);
  const [showTOC, setShowTOC] = useState(false);

  useEffect(() => {
    const checkSize = () => {
      const isLarge = window.innerWidth >= 1280;
      setIsLargeScreen(isLarge);
      // 延迟显示/隐藏，给动画留时间
      setTimeout(() => setShowTOC(isLarge), isLarge ? 0 : 300);
    };

    checkSize();
    window.addEventListener('resize', checkSize);
    return () => window.removeEventListener('resize', checkSize);
  }, []);

  return (
    <div className="container mx-auto">
      <main>...</main>
      {/* 用动画过渡显示/隐藏 */}
      {isLargeScreen && (
        <div className={`transition-all duration-300 ${showTOC ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-full'}`}>
          <TableOfContents />
        </div>
      )}
      {!isLargeScreen && showTOC && (
        <div className={`transition-all duration-300 opacity-0 translate-x-full`}>
          <TableOfContents />
        </div>
      )}
    </div>
  );
};

通过transform和opacity实现的动画属于浏览器的合成层操作，不会触发重排重绘，性能远高于visibility过渡。

内容的提问来源于stack exchange，提问作者박영진