用 display: none 隐藏模块最直接但需谨慎，因其不阻止资源加载；优先清空 src 或移除 dom；hidden 属性更语义化且兼容主流浏览器；构建时批量清理冗余模块更可靠。
用 display: none 隐藏模块最直接，但别乱用
多数 HTML5 模板里，冗余模块（比如备用轮播图、旧版联系表单、测试用的 section）只是暂时不用，不是要删。直接加 display: none 是最快方式，浏览器会跳过渲染，DOM 仍存在，方便后续调试或切换。
但要注意：display: none 不影响 DOM 结构，如果模块含 video、iframe 或第三方脚本（如 Google Maps API 初始化代码），它们可能仍在后台加载或执行，造成资源浪费甚至报错。
- 优先检查被隐藏模块是否含
src、data-src或onload类属性，手动清空或延迟加载 - 若模块由 JS 动态插入（如
document.createElement('div')后 append），建议改用remove()或注释掉整段初始化逻辑，而非仅视觉隐藏 - 避免对
body直接写display: none—— 某些 CMS 模板会把整个页脚包进一个 class 为footer-legacy的div，误设成display: none可能连新版页脚也一起消失
用 hidden 属性更语义化，但兼容性需确认
hidden 是 HTML5 原生布尔属性，效果等同于 display: none，但语义明确：“这个元素当前不相关”。主流浏览器（Chrome 23+、Firefox 22+、Edge 12+、Safari 6.1+）都支持，IE10+ 也支持，但 IE9 及以下完全忽略该属性。
如果你的模板明确不支持 IE9，用 hidden 更干净；否则得补 CSS 兜底：
立即学习“前端免费学习笔记（深入）”；
html
<section hidden>
<h2>废弃的客户评价模块</h2>
<p>已迁至新版 testimonial 组件</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/ai/2220" title="标书对比王"><img
src="https://img.php.cn/upload/ai_manual/000/000/000/175680267244663.png" alt="标书对比王" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/ai/2220" title="标书对比王">标书对比王</a>
<p>标书对比王是一款标书查重工具，支持多份投标文件两两相互比对，重复内容高亮标记，可快速定位重复内容原文所在位置，并可导出比对报告。</p>
</div>
<a href="/ai/2220" title="标书对比王" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
</section>
css
[hidden] {
display: none !important;
}
注意：不要和 aria-hidden="true" 混用——后者只影响辅助技术，不影响视觉呈现；而 hidden 是真正隐藏。
模板中常见冗余模块位置与识别方法
HTML5 模板通常在以下位置藏有未删除的冗余模块，容易被忽略：
-
<!-- START: OLD NAV -->到<!-- END: OLD NAV -->之间的注释块 —— 很多开发者留着“以防万一”，但注释内若含script标签，JS 仍会执行 -
class名含demo、sample、backup、v1、old-的div或section（例如：<div class="hero-banner-demo">）<li>未被任何 CSS 或 JS 引用的 <code>id，如<div id="contact-form-v1">，但全局搜索 JS 文件发现只有 <code>contact-form-v2被调用 - 使用了
data-*属性但无对应 JS 处理逻辑的模块，比如<div data-module="counter" data-init="false"> —— 若 <code>data-init始终为false，且无监听逻辑，可安全移除用构建工具批量清理比手改更可靠
如果你用 Webpack、Vite 或 Gulp 构建 HTML 模板，可以在编译阶段过滤冗余模块，比人工查找更彻底。例如 Vite 插件中用正则匹配并移除带特定注释标记的区块：
js // vite.config.js export default defineConfig({ plugins: [ { name: 'remove-redundant-sections', transformIndexHtml(html) { return html .replace(/<!-- START: REDUNDANT -->[\s\S]*?<!-- END: REDUNDANT -->/g, '') .replace(/<div[^>]*class="[^"]*demo[^"]*"[^>]*>[\s\S]*?<\/div>/g, ''); } } ] });关键点在于：正则要非贪婪匹配（
*?），且注意 HTML 中换行和空格变化；线上环境务必开启构建时清理，开发环境可保留注释便于回溯。很多团队漏掉这步，导致上线后仍带一堆console.log和测试按钮。真正麻烦的不是“怎么隐藏”，而是“怎么确认它确实没在运行”——尤其当模块含异步请求、定时器或事件监听器时，光看 HTML 结构根本不够。动手前，先打开 DevTools 的 Network 和 Sources 面板，刷新页面，观察哪些资源还在加载、哪些脚本仍在执行。
