能，但仅当display:none真正生效时——它跳过layout和paint，不占空间、不触发重排、不被屏幕阅读器读取；若被css覆盖、嵌套在visibility:hidden祖先中或受shadow dom隔离，则无效。
display: none 在小屏下真能省渲染开销吗
能，但只在它真正生效的前提下——即元素没被 CSS 覆盖、没嵌套在 visibility: hidden 祖先里、也没被 Shadow DOM 隔离。浏览器解析 HTML 时，每个标签都会生成 DOM 节点；display: none 不阻止节点创建，但跳过 layout 和 paint 阶段，不占空间、不触发重排、不被屏幕阅读器读取。
常见错误现象：.sidebar 在 @media (max-width: 768px) 里设了 display: none，但页面小屏下仍有大片空白——大概率是祖先元素用了 visibility: hidden 或 opacity: 0，导致子元素实际未脱离文档流。
- 检查 DevTools 的 Computed 标签页，确认
display最终计算值确实是none，而非被更高权重规则覆盖 - 避免在媒体查询里写
.sidebar { display: block; }又在基础样式里写.sidebar { display: none; }，顺序和权重容易翻车 - 如果用 JS 切换，优先操作 class（如
el.classList.toggle('d-none')），而不是直接改el.style.display，否则可能覆盖原始 display 类型（比如从inline-flex错误回退成block）
hidden 属性比 display: none 更省资源吗
不更省，只是语义更准、行为更可控。hidden 是 HTML5 原生布尔属性，效果等同于 [hidden] { display: none !important; }，但它明确告诉浏览器“这个元素当前不相关”，对表单序列化和无障碍支持更可靠。
关键差异在表单和 JS 行为：new FormData(form) 完全忽略 hidden 元素，而 display: none 的 <input> 仍会被提交；document.querySelectorAll('.item') 两者都包含，但 form.elements 列表里查不到 hidden 的控件。
-
el.hidden = false不保证显示——必须检查el.style.display是否残留'none'，若有得手动el.style.removeProperty('display') - Safari iOS 9.3+ 才完整支持
hidden；老版本需 fallback 到display: none+ 清空value和移除required - 若父容器是
display: contents，hidden会失效——这个值会让子元素脱离常规布局上下文，hidden失去作用域
哪些“隐藏”该删，而不是留着
真正该物理删除的，是那些“永远不显示”的节点。藏在 display: none 下面，只是给浏览器多添一道解析负担——200 个 display: none 的 <div> 可使 DOM 构建延迟 40–60ms。
<ul>
<li>无权限时的编辑按钮：SSR 时就不该输出，而非靠 JS 或 CSS 隐藏</li>
<li>多语言占位符：<code><div lang="ja" style="display:none">…，若当前 locale 是 <code>zh-CN，整块结构应剔除
<div id="ie-fallback" style="display:none">…，现在可直接删
<li>含 <code><iframe></iframe>、<video></video> 或第三方脚本的模块：即使 display: none，它们仍可能后台加载或执行，造成资源浪费表格列响应式隐藏为什么不能用 nth-child
因为表格没有原生“列”节点，<colgroup></colgroup> 不支持 display，nth-child 依赖位置，一旦后端加列或模板调整顺序就崩。真正稳定的方式是用 data-column 标记语义，并同步控制 <thead> 和 <code><tbody> 中所有对应单元格。
<ul><li>必须同时给 <code><th data-column="phone"> 和所有 <code><td data-column="phone"> 加相同属性
<li>媒体查询里写 <code>[data-column="phone"] { display: none; }，别碰 <col> 标签
el.classList.toggle()，别直接设 style.display —— 表格单元格默认是 table-cell，恢复时很难准确还原原始 display 值[data-column="xxx"] 选择器能穿透作用域生效最易被忽略的点：隐藏不是目的，减少无效 DOM 节点才是。很多所谓“优化”只是把节点塞进 display: none 里假装看不见，结果首屏 HTML 体积更大、解析更慢、内存占用更高——真正的节省，始于服务端条件渲染，而不是客户端藏来藏去。
