#优质博文 #前端 #性能优化 #react
How To Improve INP: React⚛️

AI 摘要：文章探讨了如何在 React 应用中优化 INP（Interaction-to-Next-Paint）以提升用户体验。这包括启用并发渲染（使用 startTransition 和 <Suspense> 实现选择性/渐进式 Hydration）、通过 CSS 提供即时反馈、用 useAfterPaintEffect 替代同步 useEffect 以减少阻塞渲染、以及中断冗余任务（例如通过 AbortController ）。建议尽量避免长时间运行的任务、优先处理用户可见的内容，同时利用 React 18 的新特性提升性能。

via kurtextrem

kurtextrem.de

How To Improve INP: React⚛️

All-in-one guide for improving Interaction-to-Next-Paint (INP) React applications. Introduces the useAfterPaintEffect hook.

#优质博文 #响应式 #前端 #移动端适配 #css
Control the Viewport Resize Behavior on mobile with interactive-widget

AI 摘要：文章介绍了通过 interactive-widget 关键字在 <meta> 标签中控制移动设备上虚拟键盘弹出时的视口调整行为。默认情况下，虚拟键盘会调整视觉视口（Visual Viewport），但不会影响布局视口（Layout Viewport）。通过设置 interactive-widget=resizes-content ，可以让布局视口也随之调整，从而使视口单位动态变化。该功能已在 Chrome 108+ 和 Firefox 132+ 支持，但 Safari 尚未实现。

via HTMHell

Control the Viewport Resize Behavior on mobile with `interactive-widget` - HTMHell

A collection of bad practices in HTML, copied from real websites.

#follow #碎碎念
刚刚发现可以生成无限制数量的邀请码了~ 爆10个邀请码，实在想要没有的可以评论区找我要一下w
B8GfZZXbzn
dXGYtzaQwB
pSo0xu8yye
Q0KhfmRpEt
e0U3K9cfRp
vT6uWEoEYm
J0YPr82Xvs
HJCp3K9lju
cnqUFZs7PE
Kzqbwl_K0f