当前位置：首页 > news >正文

css、dom 性能优化方向

news 2025/10/11 5:56:00

css 优化方向
这里建议先阅读一下浏览器的渲染相关
- 选择器优化
  1. 避免使用过于复杂的选择器、避免嵌套层级过深
    例如：body div.container ul li a span.my_icon { }, 优化为 -> my_icon{}, 除了匹配更快，代码也更具可读性，这里补充下浏览器是从右往左来解析css。
  2. 避免使用通配符
    例如：*{padding: 0; margin: 0}; 匹配所有元素，性能损耗随页面元素增加增长。优化为针对性对元素body, div, p, ul, li { margin: 0; padding: 0; }
  3. 优化统一选择器
    例如 tab_left: {width: 100px}、tab_center: {width: 100px} 可以优化为 .table_left,.table_center{width: 100px}，它们公共的部分可以提取写一起，提高匹配效率
  4. 优化统一属性
    例如margin-left: 10px; margin-top:10px; 优化为 margin: 10px 0 0 10px; 更快解析，方便渲染树的构建，
  5. 合理使用 import（不是@import，这个要避免使用，会阻塞加载）
    import 是框架的模块化方案输出后会以link标签的方式来加载，但是要保证导入的只包含复用样式
  6. 减少/合理使用高级选择器
    例如 [class*="button"] 这种应该避免使用
    例如大型表格几千个tr的情况 table tr:nth-child(2n)，这种会每个tr 都进行一次计算，性能损耗较大，可以使用服务端渲染或者js 初始化来优化
- 减少重绘、重排
  1. 避免频繁的操作样式
  2. 使用transform和opacity实现动画
  3. 合并DOM 操作，意思就是多个DOM 的读写操作尽量合并执行
    例如 element.style.width = '200px';、element.style.height = '300px';、element.style.margin = '10px'; 优化为element.style.cssText = width: 200px;height: 300px; margin: 10px;
- 布局
  1. 使用flex/grid，避免使用flot/position
  2. 使用contain 属性优化布局计算（作用也是影响分层结果）
    - layout (隔离内外布局的影响)
    - paint （类似overflow: hidden 的效果以及创建独立绘制层）
    - size 元素的尺寸不会依赖子元素的尺寸（需要指定元素尺寸）
    - style 限制计数器
    - content (layout paint style 的简写)

DOM 优化方向

操作DOM

const ulEle = document.querySelector('ul');//例如我现在要给ul 下添加100个liconst fragment = document.createDocumentFragment(); //先创建文本碎片for(let i = 0; i < 100; i++) {const liEle = document.createElement('li');liEle.innerHTML = i;// 这种每一次都触发重排// ulEle.appendChild(liEle);// 优化为：fragment.appendChild(liEle);}//触发一次重排ulEle.appendChild(fragment);

事件委托

const items = document.querySelectorAll('.list-item');
items.forEach(item => {item.addEventListener('click', handleClick);
});// 优化：事件委托
document.querySelector('.list').addEventListener('click', (e) => {if (e.target.classList.contains('list-item')) {handleClick(e);}
});

懒加载
虚拟DOM

虚拟列表滚动

对于子项高度明确的DOM 数据比较好处理，对于不知道子项的高度且子项高度也不统一的情况，可以采用预估以及动态修正的方式。

//实现示例
<head><meta charset="UTF-8" /><style>body {margin: 0;padding: 0;}#container {height: 600px;overflow-y: auto;border: 1px solid #ccc;position: relative;scroll-behavior: smooth; /* 平滑滚动 */background: #fff;}#spacer {position: relative;width: 100%;}.item {position: absolute;left: 0;width: 100%;box-sizing: border-box;border-bottom: 1px solid #eee;padding: 8px;transition: top 0.25s ease; /* 平滑过渡位置 */}.content {background: #d9f1ff;border-radius: 6px;padding: 6px;}</style></head><body><div id="container"><div id="spacer"></div></div><script>const total = 1000;const data = Array.from({ length: total }, (_, i) => ({//模拟接口数据id: i,text: `第 ${i} 项`,}));const container = document.getElementById("container"); //可视容器高度const spacer = document.getElementById("spacer"); //内部元素总高度const estimatedHeight = 60; // 预估子项的高度const buffer = 6; // 缓冲项数量const measuredHeights = new Map(); // 缓存实际子项实际高度 offsetHeightconst visibleItems = new Map(); // 缓存已经渲染的元素let avgHeight = estimatedHeight; // 动态的子项的平均高度function getAverageHeight() {if (measuredHeights.size === 0) return estimatedHeight; //如果没有缓存高度数据，默认返回预估子高度let sum = 0;for (let h of measuredHeights.values()) sum += h; //动态数据总高度return sum / measuredHeights.size; //平均高度}function getOffset(index) {//通过索引获取元素的偏移量（预估）let offset = 0;for (let i = 0; i < index; i++) {//计算偏移量offset += measuredHeights.get(i) ?? avgHeight; // 如果子项高度缓存不存在，则使用预估高度}return offset;}let ticking = false; // 防止重复渲染function render() {if (ticking) return;ticking = true;requestAnimationFrame(() => {// 批量处理更新ticking = false;spacer.innerHTML = ""; // 清空 spacerconst scrollTop = container.scrollTop;const startIndex = Math.max(0, Math.floor(scrollTop / avgHeight) - buffer); // 获取可见项的起始索引, 最小值0const endIndex = Math.min(total, startIndex + Math.ceil(container.clientHeight / avgHeight) + buffer); // 获取可见项的结束索引 最大值为总项数avgHeight = getAverageHeight(); // 平均高度spacer.style.height = total * avgHeight + "px"; //计算总高度const fragment = document.createDocumentFragment(); // 创建文档片段for (let i = startIndex; i < endIndex; i++) {//遍历可见项let item = visibleItems.get(i); //从缓存中获取可见项if (!item) {// 创建可见项item = document.createElement("div");item.className = "item";const randomExtra = data[i].heightType === "small" ? 60 + Math.random() * 20 : 100 + Math.random() * 50; //随机高度 60 - 150item.innerHTML = `<div class="item_content" style="height: ${randomExtra}px"><b>${i}</b> ${data[i].text}</div>`;item.style.top = getOffset(i) + "px"; //初始偏移量requestAnimationFrame(() => {const h = item.offsetHeight; // 获取子项真实高度if (!measuredHeights[i] || h !== measuredHeights.get(i)) { //如果子项高度缓存不存在或者高度有变化measuredHeights.set(i, h); // 缓存子项高度}avgHeight = getAverageHeight(); // 更新平均高度spacer.style.height = total * avgHeight + "px"; //更新总高度const items = document.querySelectorAll(".item"); items.forEach((el, idx) => { const index = idx + startIndex;el.style.top = getOffset(index) + "px"; //动态修正位置});});}visibleItems.set(i, item); //缓存已经渲染的元素fragment.appendChild(item);}spacer.appendChild(fragment);});}render();let timer = null;container.addEventListener("scroll", () => {if (timer) clearTimeout(timer);timer = setTimeout(render, 16); //节流触发});</script></body>