css-in-js首屏加载慢50–200ms，因样式注入必须等js执行完，而传统css可并行下载、预解析、高效缓存，且运行时开销更高。

运行时注入样式必须等 JS 执行完才能开始

浏览器对 link rel="stylesheet" 有预加载器（preload scanner），JS 还没执行时，CSS 文件已在并行下载；而 CSS-in-JS 的 style.textContent = '...' 或 sheet.insertRule() 必须等 JS bundle 解析、执行、走到组件 render 阶段才触发。这意味着首屏关键样式被卡在 JS 主线程里，LCP 直接受拖累。

常见现象：Lighthouse 报 “Eliminate render-blocking resources”，且 Render Tree Construction 阶段耗时异常高；SSR 场景下漏掉服务端样式提取，直接导致 FOUC 或 CLS > 0.25。

每次渲染都可能触发同步 DOM 操作

CSS-in-JS 库（如 styled-components、@emotion/react）在组件 mount 或 props 变化时，会同步做：字符串插值 → 哈希计算 → 查重 → 创建/复用 <style></style> 标签 → 调用 insertRule()。这些全是主线程同步任务，无法中断。

高频场景下（如滚动卡片列表、实时颜色切换），insertRule() 调用堆叠明显，Chrome Performance 面板中常看到大量绿色 layout 任务，React DevTools 显示 commit 阶段占比超 40%。

Feishu calendar sync, local ics to json data for AI agent

将ICS日历文件转为JSON格式，用于飞书日历导入导出及数据集成。

下载

• 错误写法：css={theme => ({ color: theme.text })} —— 每次 render 都生成新对象，强制重注入
• 正确做法：静态样式外提；动态部分用 CSS 变量 + className 切换

缓存与复用机制天然失效

传统 CSS 文件内容稳定，Cache-Control: public, max-age=31536000 下 CDN 缓存命中率极高；而 CSS-in-JS 注入的 <style></style> 内容依赖 JS 执行顺序、环境变量、甚至随机 salt，一次无关代码改动就可能导致整页样式 hash 全变。

后果很实际：用户每次更新 JS bundle，都得重新下载全部样式 —— 即使视觉上毫无变化。构建工具（Webpack/Vite）默认不感知这部分内容，也无对应 long-term caching 策略。

容易被忽略的一点：useInsertionEffect 虽能优化注入时机，但它本身不解决缓存问题；若未配合哈希 key 复用已有 <style></style> 标签，高频渲染下反而加剧内存分配压力。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！