前端&AI技术双周刊-2024.12.20

前端技术

• Node v22.12.0 (LTS)
  Node.js v22.12.0（LTS）版本发布，值得注意的是，这是第一个默认启用 require(esm) 的 Node LTS 版本。require(esm) 默认启用使 Node.js 在处理 ES 模块时行为发生变化，不再因 require() 加载 ES 模块抛出 ERR_REQUIRE_ESM，但加载含顶级 await 的 ES 模块或其依赖时可能抛出 ERR_REQUIRE_ASYNC_MODULE，可通过 process.features.require_module 和 “module-sync” 检测其支持情况，不过该特性仍在实验阶段，用户反馈有助于进一步完善。

• WebKit Features in Safari 18.2
  Apple 发布了 Safari 18.2。Safari 18.2 基于 WebKit 带来 61 项新特性与 111 个问题修复，涵盖 CSS、空间视频与照片、WebXR、Genmoji、媒体、HTML、WebAssembly、Web API、JavaScript、安全隐私、Web Inspector、WebDriver、WKWebView 等众多方面，提升了浏览器功能、性能、安全性与用户体验，适用于多种苹果设备操作系统。

• How To Fix Largest Contentful Paint For Background Images
  最大内容绘制（LCP）可能受多种元素影响，其中背景图片（通过 CSS 设置）若未优化，可能因请求链的差异导致渲染延迟，进而影响核心网页指标。本文通过对比 HTML 中 img 标签与 CSS 背景图片在请求链上的差异，解释 CSS 背景图片导致渲染延迟的机制，并给出优化背景图片的策略。

• Pure CSS Halftone Effect in 3 Declarations
  3 行 CSS 代码实现半色调效果。可通过一个 div 元素及三个 CSS 属性达成，包括 background、background-blend-mode: multiply 和 filter: contrast()，并阐述了其原理及相关注意事项。

• A Layered Approach to Speculation Rules
  推测规则（Speculation Rules）API 提供了 prefetch 和 prerender 两种推测加载类型，可提前支付下一页的 TTFB、FCP 和 LCP 成本，提升页面加载性能。本文介绍了推测规则 API 在实际网站优化中的应用，提供了从简单到复杂的多种应用策略，对于前端开发者理解和运用该 API 进行性能优化具有很高的参考价值。展示了如何根据不同网站特点（如流量大小、后端复杂度等）灵活调整推测规则的使用方式，有助于开发者在不同项目场景中制定合适的优化方案。

• Working with JavaScript’s Scheduler API
  文章全面且深入地介绍了 JavaScript Scheduler API 这一较新且重要的特性，涵盖其功能、使用方法、优先级机制、动态变化、中止任务以及浏览器支持等方面。该 API 通过 yield() 和 postTask() 方法实现对任务执行的控制，支持三种优先级（user-blocking、user-visible、background），可确保关键任务优先执行，同时支持任务优先级动态变化和任务中止功能，为管理 Web 应用中的任务优先级提供了标准化方法。

AI 资讯

• ChatGPT Search 向所有用户免费开放
  OpenAI 对 ChatGPT Search 进行了优化，包括提升搜索速度（尤其是移动端）、新增地图体验、支持语音查询搜索（激活高级语音模式后），且已面向全球登录的免费用户开放，周活跃用户数超 2 亿，可能对谷歌搜索地位产生冲击。

• 字节推出豆包视觉推理大模型，价格低至 0.003 元/千token
  在 12 月 18 日举办的火山引擎 Force 大会上，字节跳动正式发布豆包视觉理解大模型，该模型通过结合文本和图像信息，展现出卓越的内容识别和推理能力。千 token 输入价格仅为 3 厘，一元就可处理 284 张 720P 的图片。

• Genesis: A Generative and Universal Physics Engine for Robotics and Beyond
  这是生成式大模型的时代——它们能生成文本、图像、音频、视频、3D 对象…… 而如果将所有这些组合到一起，我们可能会得到一个世界！Genesis 生成式物理引擎可以生成 4D 动态世界，代表了生成式物理引擎领域的先进水平，融合了多项前沿技术，如物理模拟、人工智能、数据生成等，为机器人、具身 AI 等领域带来新的发展契机。

• Using Transformers.js for AI in the Browser
  文章详细介绍了如何使用 Transformers.js 在浏览器中进行 AI 开发，开发者可以通过 “pipeline” API 能轻松实现多种任务，如文本情感分析和图像对象检测等。文章包括代码示例和实际应用场景，对于想要在前端集成 AI 功能的开发者具有很强的指导意义。

拓展阅读

• CSS Wrapped 2024
  2024 年是 CSS 发展的又一重要年份，Chrome 在这一年为 CSS 带来诸多新特性和改进，涵盖组件、交互、开发者体验等方面，增强了网页的功能性、交互性和开发便利性，推动了 Web 平台发展。全面了解这些新特性有助于在项目中创建更具吸引力和功能性的用户界面。

• Kinesis.js
  Kinesis.js 是一套用于轻松创建动态交互动画的组件库，提供了多种功能和组件来实现复杂的动画效果，旨在提升用户界面（UI）的动态性和交互性。