低端机 input 卡顿主因是高频输入触发过多同步计算与 dom 更新，优化需减少 js 工作量、避免强制布局、用防抖+raf 控制更新节奏、禁用默认键盘、拆分表单隔离更新、精简样式。
低端机上 input 输入框高频输入卡顿，核心问题不是“输得太快”，而是每次输入都触发了过多同步计算和 DOM 更新，超出了设备渲染能力。优化关键在于：减少每轮输入的 JS 工作量、避开强制布局、控制更新节奏、适配底层交互机制。
用防抖 + requestAnimationFrame 控制更新频率
input 的 input 事件在快速连打时可能每 10–20ms 就触发一次，但低端安卓 WebView 或旧版 iOS Safari 的 JS 执行+重绘根本跟不上。直接在回调里改 textContent、style 或读 offsetHeight，会立刻引发 layout thrashing（布局抖动）。
- 只在 input 回调中缓存值、标记“需更新”，不做任何 DOM 操作
- 用 requestAnimationFrame 把所有 UI 更新收束到下一帧，确保与浏览器渲染管线对齐
- 加 pending 标志防止重复注册 rAF，避免帧内多次执行
禁用默认键盘弹出，绕过输入法干扰
很多卡顿其实来自“焦点 → 键盘弹出 → 页面重排 → 键盘收起 → 页面再重排”的连锁反应，尤其在自定义选择器（如日期、地区）场景下更明显。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 对非自由输入场景（如点选时间），优先设 readonly="true"，点击时再临时移除；注意避免在低端机上频繁 toggle 导致闪烁
- 安卓 WebView 可配合 inputmode="none"，明确告诉系统无需唤起输入法
- iOS 上若需保留可编辑性但屏蔽键盘，可用 blur() + focus() + preventDefault() 组合拦截，但需兼容 Safari 行为
拆分大表单，隔离响应式更新范围
当页面含数百个 v-model 或 onChange 监听的 input 时，Vue/React 的响应式系统或原生事件监听器会批量触发更新，JS 堆内存飙升、CPU 占满是常态。
- 把每个输入框封装成独立子组件，利用组件级更新隔离，避免整个表单 rerender
- 子组件内部用 props + emit 实现受控，不依赖全局响应式状态联动
- 对只读展示类 input（如订单号、状态标签），直接用 div + contenteditable="false" 替代，彻底移除事件绑定开销
精简样式与伪类，规避低端渲染陷阱
部分中低端安卓 WebView 对 -webkit-appearance、::placeholder、::-webkit-input-placeholder 等样式解析缓慢，甚至触发回退到低效渲染路径。
- 统一设 -webkit-appearance: none，再手动重写基础样式，避免浏览器 fallback 渲染
- 禁用 transition 和 transform 动画（尤其是 scale），Safari 对缩放后元素的 touch 坐标计算易失效
- 避免在 input 上叠加过多 box-shadow、渐变背景或 border-radius 复杂值，这些在低端 GPU 上绘制成本极高
