AI 摘要：作者讲述了一次离奇的前端性能调试经历，网页仪表板在 Safari 下的加载时间从 1 秒激增至 10 秒。通过性能分析和 AI 辅助的二分查找法，最终定位问题根源为一个使用了 Noto Color Emoji 字体的心形表情符号（❤️）。该字体在 Safari 上的特定渲染路径导致了极高的布局耗时，文章对此进行了技术复盘并给出了临时解决方案。

1. 问题发现与初步排查
• 作者发现网页仪表板加载时间异常增加，初步怀疑是 React 框架的性能问题。
• 使用 Safari 性能分析器排查后，发现 CPU 时间主要消耗在 Layout 阶段，而非 JavaScript 执行或网络请求。
• 排除了服务器延迟、第三方脚本等因素，确认问题具有浏览器特异性。

2. 定位核心故障点
• 利用 Claude（AI 编程助手）进行代码二分查找，迅速隔离出导致性能下降的代码段。
• 发现“发送反馈”按钮中新增的一个 ❤️ 表情符号是罪魁祸首。
• 测试显示，移除该表情后布局仅需 2ms，保留则需 1600ms，性能差距达百倍。

3. 技术深度解析
• 问题源于项目引入了 Google 的 Noto Color Emoji 字体，旨在解决 Linux 环境下的表情渲染一致性。
• 该字体依赖 COLRv1 标准，在 Safari 中回退到 SVG 渲染时触发了 CoreSVG 层面的性能 Bug。
• 创建最小复现案例证实：仅引入该字体并渲染单个字符即可导致 Safari 26.2 出现严重卡顿。

4. 解决方案与反思
• 临时解决方案：在 CSS 中将 Apple Color Emoji 优先级置于 Noto Color Emoji 之前，避免在苹果平台触发该 Bug。
• 对 AI 编程工具的辩证思考：AI 虽然极大加速了 Bug 定位和复现过程，但其建议引入的字体库也是导致该问题的根源，体现了 AI 工具的高效与风险并存。

Allen Pike

A Broken Heart

Or, getting a 100x speedup with one dumb line of code.

AI 摘要： 本期 Frontend Focus 第 696 期（2025年6月11日）聚焦于苹果 WWDC 2025 开发者大会的最新动态，特别介绍了 Safari 26 Beta 版本的新功能与改进，同时涵盖了 CSS 领域的最新技术和工具。此外，文章还提供了丰富的教程、工具和资源，内容涉及 CSS 新特性、网页打印优化、UI 组件开发等多个前端开发热点话题，旨在帮助开发者紧跟技术趋势并提升实践能力。

WWDC 2025 更新
• 主题演讲：WWDC 2025 主题演讲时长约一个半小时，内容偏向概述，开发者细节较少，可通过 The Verge 的 10 分钟精剪版快速了解，或观看更深入的 State of the Union 更新。
• Safari 26 Beta 与 WebKit 新功能：Safari 版本号从 18 跳跃至 26，与苹果操作系统版本号一致，带来了 60 多项新功能和 100 多项改进，包括 WebGPU 支持、锚点定位、滚动驱动动画等；同时提供近 40 分钟视频，详细讲解 CSS 新特性及音视频、图像、图标等媒体支持。
• 声明式 Web Push：通过 20 分钟视频讲解声明式 Web Push 的工作原理，如何基于现有标准构建通知功能，并保持向后兼容性。

文章、观点与教程
• 部分关键帧动画技巧：Josh W. Comeau 分享了创建动态、可组合关键帧动画的技巧，讲解清晰且注重可访问性。
• CSS contrast-color() 函数探讨：Daniel Schwarz 分析该函数在 Web 可访问性方面的现状、局限性及未来改进方向。
• Scroll-Driven Letter Grid：Chris Coyier 介绍一种利用可变字体随滚动变化的技术，但受限于浏览器支持，Safari 和 Firefox 暂不支持。
• Jen Simmons 谈新 CSS 特性：WebKit 团队的 Jen Simmons 讨论声明式 Web Push、表单控件样式、排版及 contrast-color() 等新特性。
• SVG path 元素解析：Myriam Frisano 讲解 SVG <path> 元素基础及其复杂命令，附带示例和可视化内容。
• Printing the web: making webpages look good on paper：Declan Chidlow 探讨如何通过 CSS 优化网页打印效果，打造整洁易读的文档。
• 其他教程：包括快速部署个人作品集网站、HTML 弹出通知自动关闭、CSS 与 JavaScript 粘性元素代码片段等内容。

工具、代码与资源
• SF Symbols 7：苹果图标库更新至 Beta 版，新增数百符号，总数接近 7000 个。
• Astro 5.9 发布：新增内容安全策略实验支持及 Markdown 渲染辅助函数。
• Storybook 9 更新：UI 组件工具新增交互、视觉和可访问性测试功能，支持 React、Svelte 等多种框架。
• Spectral.js 颜色混合库：基于 Kubelka-Munk 理论实现更接近颜料混合的颜色过渡效果。 #color
• 其他工具：包括 Smooothy 滑块组件、Fulldev UI 内容驱动网站组件库、SmoothUI 动画组件等。