2025-第五十三周

该周报主要为各个地方内容的汇总整理

技术

如何快速加载 CSS - 网页性能日历

本文介绍了如何利用压缩字典技术优化 CSS 加载速度，通过创建共享字典减少重复传输，实现首次加载快速、后续导航接近零带宽消耗的效果，并在不支持该技术的浏览器中优雅降级为关键 CSS 方案。

• 🚀 压缩字典技术为 CSS 加载提供了第三种优化方案，避免传统关键 CSS 与全量 CSS 之间的取舍问题
• 📚 通过创建全站共享的 CSS 字典文件，后续页面只需传输差异部分，大幅减少带宽消耗
• ⚡ 首次加载仅需关键 CSS，空闲时加载字典差异，后续导航 CSS 加载接近零成本
• 🔄 支持内容更新场景，新旧版本间仅需传输代码变更部分
• 🛠️ 需要服务器端逻辑处理不同变体，并考虑 CDN 缓存策略
• 🌐 目前 Chromium 浏览器已支持，Firefox 正在开发中，不支持时可降级为关键 CSS 方案
• 📊 对于多页面类型站点，需要静态生成 N 个关键 CSS 文件及其与全量字典的差异变体

深度卡片难题 – Frontend Masters 博客

本文探讨了在网页设计中实现“深度卡片”效果的挑战与解决方案，即让卡片内部呈现 3D 立体空间并随卡片旋转而保持透视效果，同时确保内容不超出卡片边界。

• 🧩 深度卡片概念：将传统扁平卡片转变为内含 3D 立体空间的“窗口”，旋转时内部元素呈现透视深度，增强交互体验与视觉冲击力。
• 🚫 CSS 限制：使用overflow: clip或hidden会强制元素扁平化，导致 3D 效果消失，这是 CSS 规范中“分组属性”与transform-style: preserve-3d的冲突。
• 🎭 模拟方案：通过scale()和translate()模拟透视效果，但在大幅旋转时会出现失真，无法完全替代真实 3D。
• 💡 突破性解决方案：利用perspective-origin动态调整透视原点，配合数学计算校正旋转导致的变形，实现在扁平化容器中投影出 3D 场景的错觉。
• 🛠️ 实现步骤：结合 HTML 结构、JavaScript 鼠标追踪、CSS 变量与变换，动态计算perspective和perspective-origin，使内部图层在 Z 轴分层并保持裁剪。
• 🌟 扩展应用：可添加阴影、透明度增强深度感，支持卡片翻转显示背面内容，内部图层动画以及创建全 3D 物体旋转效果。
• 🧠 核心启示：打破对 CSS 属性的固有偏见，通过创新思维与协作，能够解决看似无法实现的技术难题。

你可能不需要使用 Effect – React

React 的 Effect 是用于与外部系统同步的“逃生舱”，但许多场景下并不需要它。移除不必要的 Effect 可以使代码更易维护、性能更高且减少错误。

• 🚫 避免在渲染数据转换时使用 Effect：例如过滤列表，应在渲染时直接计算，而非通过 Effect 更新状态，以避免不必要的渲染循环。
• 🎯 用户事件处理应放在事件处理器中：如发送 API 请求或显示通知，事件处理器能明确用户操作意图，而 Effect 可能无法区分。
• 🔄 基于 props 或 state 的状态更新无需 Effect：例如计算全名，应在渲染时直接派生，而非通过 Effect 设置额外状态。
• 💾 使用 useMemo 缓存昂贵计算：避免重复执行慢速函数，仅在依赖项变化时重新计算。
• 🔑 通过 key 重置组件状态：当 prop 变化时，使用 key 属性让 React 重新创建组件，以自动重置内部状态。
• ⚡ 在事件处理器中批量更新状态：避免链式 Effect 导致多次渲染，将相关状态更新集中在同一事件中处理。
• 📡 仅将 Effect 用于同步外部系统：如订阅浏览器 API 或第三方库，但优先使用 useSyncExternalStore 等内置 Hook。
• 🧹 数据获取时需处理竞态条件：添加清理函数忽略过时响应，或使用框架提供的数据获取机制。
• 🏗️ 应用初始化逻辑应放在模块作用域：避免在 Effect 中运行仅需执行一次的代码，防止开发环境重复执行。
• 🔁 状态提升简化数据流：当子组件需通知父组件时，考虑将状态提升至父组件，使数据流向更清晰。

useEffect 清除计划

本文批判了 React 中useEffect的滥用，主张应尽可能消除它，并列举了其三大罪状。文章指出，useEffect仅在两种核心场景下是必要的：响应组件挂载/卸载时的副作用（如操作 DOM、订阅事件），以及响应异步变化的 props。对于其他情况，应优先采用事件驱动模式，并介绍了使用useEffectEvent或useImperativeHandle来优化或替代useEffect的方法。

• 🚨 useEffect 的三大罪状：导致重复渲染、缺乏注释时难以理解、依赖管理复杂。
• 🛠️ 必要场景一：组件生命周期副作用：如操作 document、订阅 WebSocket、设置定时器等无法通过 JSX 完成的操作。
• 🔄 必要场景二：响应异步 Props 变化：当子组件需要根据父组件异步传入的数据执行操作时。
• ⚠️ 反面教材：监听状态变化：应使用onChange等事件处理器，而非useEffect来响应状态变更。
• 🆕 优化工具：useEffectEvent：React 19.2+ 引入，可避免依赖传染，更优雅地处理 Effect 逻辑。
• 🔀 替代方案：useImperativeHandle：可将数据驱动转为过程驱动，通过父组件事件触发子组件逻辑，从而消除某些useEffect。
• 📝 使用建议：若必须使用useEffect，应确保一个 Effect 只做一件事、添加清晰注释、并注意处理竞态条件。

工具

GitHub - AllThingsSmitty/basic-design-patterns: 🔧 JavaScript 基础设计模式示例集 🧰

这是一个收集 JavaScript 中基本设计模式示例的开源项目，旨在通过实用案例帮助开发者编写更高效、可维护的代码。

• 🧰 项目包含创建型、结构型和行为型三大类设计模式，如单例、工厂方法、观察者等
• 📚 提供每种模式的简明定义与用途说明，便于快速理解与应用
• 🔗 采用 CC0-1.0 许可证，支持自由使用与贡献
• 🌟 在 GitHub 上获得 612 个星标和 37 次分叉，显示其受欢迎程度
• 🤝 包含行为准则和贡献指南，鼓励社区参与和改进

GitHub - craigbuckler/staticsearch: 静态网站搜索引擎

StaticSearch 是一个为静态网站设计的客户端搜索引擎，无需后端服务器或数据库，通过 JavaScript 和 JSON 数据文件实现搜索功能。

• 🔍 静态网站搜索引擎：适用于任何静态网站生成器，无需后端支持
• 📂 索引生成：通过 CLI 命令为网站目录生成搜索索引文件
• 🛠️ 简单集成：提供 Web 组件，轻松将搜索功能添加到网站模板中
• 🌐 多语言支持：主要针对英语，但兼容大多数西方语言
• 📚 完整文档：提供详细的配置帮助和 API 文档
• ⚙️ 灵活配置：支持环境变量和 Node.js API 配置选项
• 🔄 更新同步：网站内容变更后需重新运行索引器以更新搜索数据

更新

设计

AI

其他

新一代工程师的破局与发展

新一代工程师正经历从固定岗位到动态能力的转型，AI 编程工具如 Claude Code 和 Cursor 的崛起正在重塑工程师的工作方式与能力要求。

• 🚀 AI 编程提升效率：使用 AI 工具可显著提升开发效率，助力工程师达到更高水平
• 💡 能力转型是关键：工程师需从执行者转向问题定义与解决方案设计者
• 🔄 工具迭代迅速：AI 编程工具快速演进，如 Claude Code 在短期内展现出强大竞争力
• 😨 职业冲击与机遇：AI 既能提升工程师水平，也带来职业发展的挑战与思考
• 💰 成本效益显著：合理使用 AI 工具（如每月约 70 美元）可获得远超传统方式的价值
• 📈 实践分享交流：行业会议和社区分享成为推动转型的重要途径

译：迈向 2026 年我的 LLM 编程工作流

本文概述了作者 Addy Osmani 在迈向 2026 年时，经过一年多实践总结出的与 AI 协作编程的成熟工作流。核心思想是将大型语言模型（LLM）视为一个需要明确指导、上下文和监督的强大结对程序员，而非自主决策者。文章强调，有效利用 AI 编程助手需要结合经典的软件工程纪律，如先规划后编码、分解任务、提供上下文、严格测试和审查，从而形成一种“AI 增强的软件工程”方法，在提升生产力的同时，确保开发者对最终代码质量负责。

• 🗺️ 从清晰的计划开始：不要直接生成代码。首先与 AI 协作，通过反复提问来制定详细的规格说明（spec.md）和分步项目计划。这确保了人类和 AI 目标一致，避免了后续的混乱和返工。
• 🧩 将工作分解为小的迭代块：避免让 AI 一次性生成大量代码。将项目分解为小任务或工单，逐个实现和测试。这符合软件工程最佳实践，能防止 AI 产生混乱、不一致的代码，并便于理解和控制。
• 📚 提供广泛的上下文和指导：AI 的输出质量高度依赖上下文。主动向 AI 提供相关代码、文档、技术约束和项目规范。可以使用工具打包上下文，或在提示中明确指令，以减少幻觉并生成更符合需求的代码。
• 🔧 选择合适的模型（并在需要时使用多个）：根据任务特点选择最合适的编码 LLM，不同模型各有“个性”。如果一个模型表现不佳，可以尝试切换到另一个模型以获得更好的解决方案或第二种意见。
• 🤖 在整个开发生命周期中利用 AI：在命令行、IDE 甚至通过异步代理（如 Claude Code, Copilot Agent）等各个环节使用 AI 工具。它们能加速样板代码生成、测试运行和问题修复，但仍需开发者的指导和监督。
• 👁️ 保持人类在环——验证、测试和审查一切：永远不要盲目信任 AI 生成的代码。将其视为“过度自信且容易犯错”的初级程序员，必须进行彻底的代码审查、运行测试（包括单元测试和手动验证），并对最终质量负责。
• 💾 经常提交，并将版本控制作为安全网：采用细粒度的版本控制，频繁提交并附上清晰信息。这相当于创建“存档点”，便于在 AI 引入问题时快速回滚，同时提交历史也能为 AI 提供有价值的上下文。
• 📐 用规则和示例定制 AI 的行为：通过项目特定的规则文件（如 CLAUDE.md）、系统提示或内联示例，引导 AI 遵循团队的编码风格、约定和最佳实践。这能显著提高输出代码的可用性和一致性。
• ⚙️ 拥抱测试和自动化作为力量倍增器：强大的 CI/CD、linter 和自动化测试套件是 AI 编程的得力助手。它们能即时捕捉错误，并提供反馈让 AI 进行修复，形成一个高质量、快速迭代的良性循环。
• 🧠 持续学习和适应：将每次与 AI 的协作视为学习机会。扎实的软件工程基础会被 AI 放大，而审查和调试 AI 代码也能加深开发者对技术和架构的理解。AI 是力量倍增器，但核心的专业知识和判断力仍在开发者。