动态渲染需明确数据来源与更新边界：后端数据应请求后渲染，静态小数据才适合JS过滤；用专用容器隔离渲染区域，结合DocumentFragment提升性能；筛选条件需处理“不限”语义；防抖必须作用于整体筛选逻辑，并补充blur/change触发。
动态渲染前必须先明确数据来源和更新边界
前端动态渲染多条件筛选列表，本质不是“把 HTML 拼出来”，而是决定「何时重新生成 DOM」以及「用哪部分数据驱动哪部分 UI」。如果数据来自后端接口，就别在页面加载时一次性全量渲染再 JS 过滤；如果数据是静态 JSON 或小规模（≤1000 条），才适合用 JS 在内存中 filter + innerHTML 或 createElement 重绘。
容易踩的坑：innerHTML += ... 累加拼接会触发多次重排，且丢失已绑定事件；直接 document.getElementById('list').innerHTML = '' 再循环插入，会清空所有子节点包括可能存在的分页按钮、loading 状态等无关但共存的 DOM。
- 推荐做法：用一个干净的容器（如
<div id="result-list"></div>）专用于渲染结果，与筛选表单、分页控件物理隔离 - 每次筛选触发后，只清空该容器并用新数据重建，不 touch 其他区域
- 若用了
data-属性存原始值（如data-price="299"），渲染时务必保留，否则后续二次筛选无法读取
用 createElement + DocumentFragment 避免卡顿
当筛选后要渲染几十到几百条卡片或表格行时，innerHTML 字符串拼接看似简单，但浏览器解析 HTML 字符串有开销，且易引入 XSS（尤其用户输入未转义就进模板）。createElement 虽代码稍长，但可控、安全、性能更稳。
关键点在于别每条都直接 appendChild 到真实 DOM——那样会触发 N 次 layout。应先创建 DocumentFragment，把所有新节点 append 进去，最后一次插入 Fragment。
立即学习“前端免费学习笔记（深入）”；
function renderList(items) {
const frag = document.createDocumentFragment();
items.forEach(item => {
const div = document.createElement('div');
div.className = 'pet-card';
div.dataset.id = item.id;
div.dataset.breed = item.breed;
div.dataset.age = item.age;
div.innerHTML = `
<h3>${item.name}</h3>
<p>品种：<span>${item.breed}</span></p>
<p>年龄：<span>${item.age}</span></p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10828" title="财经HTML高端海报生成"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20dbae7c507.jpg" alt="财经HTML高端海报生成" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10828" title="财经HTML高端海报生成">财经HTML高端海报生成</a>
<p>复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP</p>
</div>
<a href="/xiazai/skill10828" title="财经HTML高端海报生成" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
`;
frag.appendChild(div);
});
document.getElementById('result-list').replaceChildren(frag);
}
filter() 回调里别漏掉“不限”语义
用户没选任何筛选项，或某个下拉框保持默认空值（<option value="">全部</option>），这个字段就不能参与过滤逻辑。常见错误是写成 item.breed === breedValue，一旦 breedValue 是空字符串，结果就是所有项都被筛掉。
正确写法是每个条件默认为 true，仅当有实际值时才加入判断：
filters.breed === '' || item.breed === filters.breed!filters.priceMax || item.price!filters.tags.length || filters.tags.some(t => item.tags.includes(t))
注意：如果用 FormData 读取表单，formData.get('breed') 对未选中的 <select></select> 返回 null，需统一转成空字符串再参与判断。
防抖不是可选项，是必选项
多个输入框（比如姓名、部门、状态）同时监听 input 事件，用户快速打字时，若每次按键都执行完整 filter + render，会出现「上一次渲染还没完，下一次又来了」的竞态，轻则卡顿，重则显示错乱（例如刚输完“张”就删掉，却渲染了“张三”的结果）。
防抖函数本身不难写，但重点在于「谁来防抖」：不是给每个 input 单独防抖，而是把整个筛选逻辑封装成一个函数（如 performFilter()），然后对它做防抖。
let filterTimer;
function performFilter() {
const formData = new FormData(document.querySelector('#filter-form'));
const params = Object.fromEntries(formData.entries());
const filtered = rawData.filter(item =>
(params.name === '' || item.name.includes(params.name)) &&
(params.dept === '' || item.dept === params.dept)
);
renderList(filtered);
}
document.querySelectorAll('#filter-form input, #filter-form select')
.forEach(el => el.addEventListener('input', () => {
clearTimeout(filterTimer);
filterTimer = setTimeout(performFilter, 300);
}));
真正容易被忽略的是：移动端软键盘收起、失焦（blur）时也应立即触发一次筛选，否则用户点完下拉选项后没反应，会以为功能坏了。得额外监听 change 事件补一刀。
