栗子前端技术周刊第 31 期 - Chrome 126 将集成 Gemini、Angular 18、Next.js 15 RC...

🌰栗子前端技术周刊第 31 期 (2024.5.20 - 2024.5.26)：浏览前端一周最新消息，学习国内外优秀文章视频，让我们保持对前端的好奇心。

📰 技术资讯

1. Chrome 126 将集成大型语言模型（LLM）： Chrome 126 将集成 Gemini Nano，使用 Gemini Nano 可以实现翻译、转录等功能，同时 Chrome DevTools 中的 Gemini 可以帮助你调试错误并提供解决方案。

2. Angular v18 发布：Angular v18 正式发布，内容包括实验性地支持 zoneless 方案以提升开发体验和性能（Angular 目前是通过 zone.js 来进行变更检测）；angular.dev 成为 Angular 的官方文档网站；Material 3 组件库、可延迟视图、内置控制流现已稳定；服务器端渲染的改进。

3. Next.js 15 RC 发布：Next.js 15 RC 现已发布，允许你体验一些最新功能，比如 React 19 RC、React Compiler 等等。
4. VitePress 1.2：这是一款面向 Markdown 的静态网站生成器，具有流畅的开发体验，1.2 版本主要是一些小特性和 bug 修复。

📒 技术文章

1. A Guide to JS Performance Analysis with Chrome DevTools：使用 Chrome DevTools 分析 JS 性能的指南 - 本文将详细介绍如何使用 Chrome DevTools 进行 JavaScript 性能分析，配合一个真实案例进行讲解。
2. How to document your JavaScript package：你编写了一些有用的代码，随后想发布这些代码，下一步该怎么办？有用的文档！Deno 团队展示了如何使用 JSDoc 编写有价值的文档。
3. useEffect 一定在页面渲染后才会执行吗？：关于 useEffect 的真正执行时机究竟是渲染前的同步还是渲染后的异步，文中通过示例来给出答案，大概了解一下即可。

🔧 开发工具

1. restore-scroll：恢复元素的滚动位置，支持任何可滚动的元素，内部通过 React Router 的 useBeforeUnload、useNavigation 和 useLocation Hook 实现。

import { ElementScrollRestoration } from '@epic-web/restore-scroll'

return (
	<div>
		<ul id="christmas-gifts">
			<li>🎁</li>
			<li>🎂</li>
			<li>🎉</li>
		</ul>
		<ElementScrollRestoration elementQuery="#christmas-gifts" />
	</div>
)

2. Signature Pad 5.0：平滑签名绘图 - 如果你的 web 应用需要提供在线签名能力，可以试试这款组件。

3. react-joyride：react 引导库，底层使用 react-floater 进行定位和样式设计，也支持你使用自己的组件。

🚀🚀🚀 以上资讯文章选自常见周刊，如 JavaScript Weekly 等，周刊内容也会不断优化改进，希望你们能够喜欢。

💖 欢迎关注微信公众号：栗子前端