原生表单提交更优，因其自动序列化、防重复提交、URL编码容错、GET自动拼接、重定向自动跳转，且HTML解析阶段即可响应；JS拦截应仅在必要校验后条件执行。
用原生表单提交代替 JS 拦截 submit 事件
很多项目一上来就给 <form></form> 绑 event.preventDefault()，再用 fetch 手动发请求。这看似“可控”，实则绕过了浏览器内置的提交优化路径：比如自动序列化、默认防重复提交（submit 按钮自动禁用）、URL 编码容错、GET 请求自动拼 query、服务端重定向自动跳转等。更关键的是，它强制 JS 必须加载并执行完才能触发交互，而原生提交在 HTML 解析阶段就可响应——哪怕 JS 还没下载完，用户点提交照样能走。
适用场景：GET 搜索、简单筛选、跳转类表单（如登录后回跳）、无需复杂校验的后台管理入口。
- 把验证逻辑尽量前移到
required、type="email"、pattern等原生属性上 - 用
action和method明确声明目标，避免 JS 动态拼接 URL 出错 - 如果真要拦截，也建议只在必要字段通过后再
preventDefault，而非无条件拦截
靠 details/summary 实现折叠面板，不写 JS
手写 click + classList.toggle 控制显隐，看起来灵活，但每次点击都要触发重排、监听器绑定/解绑、状态维护。而 <details></details> 是原生可折叠组件，开合由浏览器原生控制，不依赖 JS，也不触发额外样式计算；它还自带语义（无障碍支持 aria-expanded 自动同步）、键盘支持（空格/回车切换）、以及 CSS 伪类 :open 可直接驱动样式变化。
注意：IE 完全不支持，Edge 79+、Chrome 12+、Firefox 49+、Safari 6.2+ 支持。如需兼容老版本，可用 @supports (display: details) 做渐进增强，降级为 JS 方案。
立即学习“前端免费学习笔记（深入）”；
- 不要给
<summary></summary>加onclick或addEventListener，会干扰原生行为 - 动画需靠
transition配合max-height或height，不能直接对:open做 transform -
<details open></details>的初始状态是同步渲染的，比 JS 设置style.display = 'block'更早生效
让 <a></a> 标签承担跳转职责，别用 div + click
把 <div onclick="location.href=..."> 当按钮用，等于主动放弃浏览器对链接的预加载能力（<code><link rel="prefetch">、hover 时预连接）、默认焦点管理、空格/回车触发、右键菜单（复制链接、新标签打开）、历史记录自动维护，以及最重要的——页面卸载前的资源清理保障。JS 模拟跳转还可能因执行时机问题导致 beforeunload 失效或页面卡死。
即使要“无刷新”跳转，也优先考虑 history.pushState + popstate，而不是屏蔽 <a></a> 默认行为再手动处理。
- 所有可跳转内容必须用
<a href></a>，哪怕只是锚点#section2 - 需要新窗口时，明确写
target="_blank" rel="noopener noreferrer"，别靠 JSwindow.open - 禁用状态用
aria-disabled="true"+ CSS 灰色样式，而不是移除href属性（否则丧失语义和键盘可访问性）
用 input type="range" 替代自定义滑块组件
一个带拖拽、tooltip、步进、键盘控制、无障碍支持的滑块，手写至少要处理 mousedown/touchstart、mousemove/touchmove、mouseup/touchend、keydown、focus、blur、change、input 十几个事件，还要做节流、边界判断、视觉反馈同步。而原生 <input type="range"> 全部内置，且不同平台渲染风格适配（iOS 滑块圆润、Windows 齿轮感），缩放/高对比度模式下也保持可用。
性能差异体现在：原生控件不创建额外 DOM 节点，不绑定多个事件监听器，不维护内部 state，不触发频繁的 requestAnimationFrame 更新。
- 样式定制仅限
::-webkit-slider-thumb和::-webkit-slider-runnable-track，别试图用 JS 重绘整个轨道 - 值范围用
min/max/step控制，不要在 JS 里做二次校验 - 需要实时反馈时，监听
input事件而非change，前者在拖拽中持续触发
最常被忽略的一点：默认行为不是“偷懒选项”，而是浏览器多年演进沉淀下来的最小开销路径。当你习惯性加一层 JS 封装时，得先问一句——浏览器原生是否已提供同等语义、同等体验、更低开销的实现？
