React移动端Chrome点击乌尔都语切换按钮页面卡顿求助

移动端Chrome切换乌尔都语时卡顿，根源是乌尔都语复杂字体的渲染开销远高于英文，再加上代码里冗余的isLoading状态、多个定时器和手动DOM操作，叠加触发了Chrome移动端的重排重绘性能瓶颈。

修复步骤 #

• 砍掉冗余状态和定时器：isLoading状态和setTimeout完全多余，直接用showUrdu控制文本切换，把透明度过渡交给CSS处理，彻底减少JS层面的DOM操作。
• 优化乌尔都语字体渲染：给urdu-text类添加专属CSS属性，帮助Chrome优化字体加载和渲染，避免布局抖动。
• 简化组件渲染逻辑：让renderDescription组件更稳定，减少不必要的重渲染。

修改后的核心代码 #

const [showUrdu, setShowUrdu] = useState(false);
const urduTextRef = useRef(null);

const handleLanguageSwitch = useCallback(() => {
  setShowUrdu(prev => !prev);
}, []);

// 移除所有isLoading相关的状态和useEffect

const renderDescription = useCallback(() => {
  return (
    <p
      ref={urduTextRef}
      className={`${showUrdu ? "urdu-text" : "text-gray-600"} transition-opacity duration-300 ease-in-out`}
    >
      {showUrdu ? selectedProduct.description.urdu : selectedProduct.description.english}
    </p>
  );
}, [showUrdu, selectedProduct]);

新增乌尔都语字体优化CSS #

.urdu-text {
  font-family: 'Noto Nastaliq Urdu', serif;
  font-display: swap; /* 字体加载时先显示 fallback，避免空白 */
  font-variant-ligatures: normal; /* 控制连字渲染，降低性能开销 */
  line-height: 1.8; /* 提前设置行高，避免切换时布局偏移 */
}

模态框滚动优化 #

把滚动限制在模态框内部，避免全局滚动触发的性能问题：

{isModalOpen && selectedProduct && (
  <div className="fixed inset-0 z-50">
    <div className="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
      <div
        className="fixed inset-0 transition-opacity modal-backdrop"
        onClick={() => setIsModalOpen(false)}
      ></div>
      <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full max-h-[90vh] overflow-y-auto">
        {/* 内部原有内容保持不变 */}
      </div>
    </div>
  </div>
)}

修复说明 #

• 移除冗余状态和定时器后，减少了状态更新次数和DOM操作，避免JS与渲染引擎的冲突。
• font-display: swap让浏览器先显示系统字体，等乌尔都语字体加载完成后再替换，避免长时间空白和突然布局变化。
• 提前设置line-height防止切换语言时文本高度变化触发重排。
• 模态框内部滚动限制避免了全局布局干扰，进一步提升移动端Chrome的渲染稳定性。

内容的提问来源于stack exchange，提问作者Hamza Shakoor