display: none仅视觉隐藏元素，不移除DOM、不暂停脚本；visibility: hidden保留布局占位；彻底移除需用remove()或服务端控制输出。
用 display: none 隐藏 HTML 元素最直接，但要注意它不阻止 DOM 渲染和脚本执行
很多初学者以为加了 display: none 就“彻底消失”，其实只是视觉隐藏：元素仍在 DOM 中，绑定的事件、定时器、getBoundingClientRect() 都能正常工作，甚至可能被屏幕阅读器读到（取决于 aria-hidden 设置）。
适用场景：需要频繁切换显隐、依赖 JS 控制状态的模块（比如折叠面板、表单步骤）。
-
display: none会触发重排（reflow），高频操作时注意性能 - 如果元素含视频、iframe 或第三方 SDK 脚本，
display: none不会暂停它们——音频可能继续播放，统计脚本仍会加载 - 想兼顾可访问性，建议同步加
aria-hidden="true"
用 visibility: hidden 保留占位但隐藏内容，适合过渡动画
和 display: none 不同，visibility: hidden 保持元素的盒模型（宽高、margin 等照常占据空间），子元素默认继承该属性，但可通过 visibility: visible 单独恢复。
常见错误现象：visibility: hidden 下点击事件仍可触发（除非显式设 pointer-events: none），容易误以为“完全不可交互”。
立即学习“前端免费学习笔记（深入）”；
- 适合做淡入淡出动画的中间态（配合
opacity使用更自然） - 不能用于“移除布局影响”的场景——比如想让父容器高度收缩，它做不到
- IE8+ 支持良好，无需前缀
真正从 DOM 移除用 remove() 或 innerHTML = ''，但得小心内存泄漏
如果目标是“彻底不留痕迹”，就得操作 DOM 树本身。现代浏览器推荐用 element.remove()，兼容性够用（IE 不支持，需 fallback）；老项目可能还在用 parentNode.removeChild(element)。
容易踩的坑：
- 用
innerHTML = ''清空容器时，如果里面有通过addEventListener绑定的事件，且没手动removeEventListener，就可能留下悬空引用，尤其在单页应用中易引发内存泄漏 -
remove()不会自动清理 jQuery 数据缓存或 Vue/React 的响应式依赖，框架内操作优先走框架 API（如v-if、useState） - 移除后若需重新插入，记得保存对节点的引用，别反复
document.createElement
服务端不输出比前端隐藏更干净，但得看是否真需要
前端隐藏本质是“骗客户端”，HTML 还在源码里，右键“查看页面源代码”或禁用 JS 后全暴露。真要保密，就得服务端控制——比如 Django 的 {% if user.is_staff %}，或 Express 中根据权限跳过 res.render() 片段。
典型误用场景：用 JS 隐藏管理按钮，却把敏感 API 地址写死在前端代码里。
- 静态资源（JS/CSS/图片路径）即使 HTML 不渲染，只要被引用就可能被爬虫或开发者工具抓到
- CSR（客户端渲染）应用中，路由守卫（如 React Router 的
useNavigate+ 权限判断）只能防跳转，不能防源码泄露 - 如果只是“不让普通用户看到”，服务端不输出是最省心的方案；如果是“动态展示/收起”，才轮到前端隐藏技术上场
