浏览器性能优化实战：从基础到高级的browser-use skill避坑指南

1次阅读

共计 2105 个字符，预计需要花费 6 分钟才能阅读完成。

重排 / 重绘问题 ：频繁的 DOM 操作导致浏览器不断重新计算布局和绘制，测试表明单个元素样式修改可能触发整个页面回流（测试设备：MacBook Pro M1/16GB，Chrome 112）。
内存泄漏陷阱 ：未解绑的事件监听器、闭包引用和游离的 DOM 节点会使内存占用持续增长，某电商项目曾因此导致移动端 OOM 崩溃率上升 40%。
主线程阻塞 ：超过 50ms 的同步 JS 任务就会造成可感知的卡顿，大数据量列表渲染时尤为明显。

DOM 插入操作 （测试 1000 个节点）：
常规写法： 直接 appendChild 平均耗时 128ms
优化方案： 文档碎片批量处理 平均耗时 17ms
性能提升：86.7%
事件绑定 （测试 500 个按钮）：
常规写法： 逐个 addEventListener 内存占用 8.2MB
优化方案： 事件委托 内存占用 1.3MB

// 反例：直接操作 DOM
const badExample = () => {const ul = document.getElementById('list');
  for(let i=0; i<1000; i++) {const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    ul.appendChild(li); // 每次都会触发重排
  }
};

// 正例：使用文档碎片
const goodExample = () => {const fragment = document.createDocumentFragment();
  const ul = document.getElementById('list');

  for(let i=0; i<1000; i++) {const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    fragment.appendChild(li); // 内存中操作
  }

  ul.appendChild(fragment); // 单次重排
};

// 反例：每个按钮单独绑定
document.querySelectorAll('.btn').forEach(btn => {btn.addEventListener('click', handleClick); // 产生 N 个监听器
});

// 正例：利用事件冒泡
document.getElementById('container').addEventListener('click', (e) => {if(e.target.classList.contains('btn')) {handleClick(e); // 仅 1 个监听器
  }
});

const weakMap = new WeakMap();

function processLargeData() {const bigData = new Array(1e6).fill('data');
  const domNode = document.getElementById('temp');

  // 当 domNode 被移除时，关联数据会自动回收
  weakMap.set(domNode, bigData); 
}

// sw.js
const CACHE_NAME = 'v1';
const ASSETS = ['/main.css', '/app.js'];

self.addEventListener('install', (event) => {
  event.waitUntil(caches.open(CACHE_NAME)
      .then(cache => cache.addAll(ASSETS))
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(caches.match(event.request)
      .then(response => response || fetch(event.request))
  );
});