Odin Project画板程序Click Handler耗时过长问题求助

核心问题分析 #

从你给出的表现来看，网格尺寸越大，点击处理耗时呈指数级增长，64×64直接卡死，大概率是频繁DOM操作或者事件绑定方式不合理导致的，和样式、sizeSelected函数关系不大。

具体排查优化方向 #

1. 避免循环中频繁操作DOM
   如果你是在创建网格时，循环一次就往容器里append一个格子，那每一次append都会触发浏览器重排重绘，4096个格子（64×64）就会触发4096次重排，直接拖垮性能。
   改成用DocumentFragment先缓存所有格子，最后一次性插入DOM：

   function buildGrid(size) {
     const gridContainer = document.getElementById('grid-container');
     gridContainer.innerHTML = '';
     const fragment = document.createDocumentFragment();
     const cellSize = 100 / size;
   
     for (let i = 0; i < size * size; i++) {
       const cell = document.createElement('div');
       cell.classList.add('grid-cell');
       cell.style.width = `${cellSize}%`;
       cell.style.height = `${cellSize}%`;
       fragment.appendChild(cell); // 先存到片段里，不触发DOM更新
     }
   
     gridContainer.appendChild(fragment); // 一次性插入，只触发一次重排
   }
   

2. 用事件委托代替给每个格子绑定事件
   要是你给每个格子单独绑定了click事件，64×64就是4096个事件监听，既占内存又耗时。换成给网格容器绑定一次事件，通过事件冒泡判断点击目标：

   const gridContainer = document.getElementById('grid-container');
   gridContainer.addEventListener('click', (e) => {
     if (e.target.classList.contains('grid-cell')) {
       // 这里写你的填充逻辑，比如 e.target.style.backgroundColor = '#000';
     }
   });
   

3. 检查点击处理函数里的冗余操作
   确认你的尺寸按钮点击事件里，是不是除了创建网格，还做了其他重复计算或不必要的DOM操作？比如重复获取同一个DOM元素、多次修改样式属性等，把这些操作提前到循环外完成。

验证方法 #

先把创建网格的逻辑改成用文档片段，再把事件绑定换成委托，测试64×64网格的响应速度，应该能解决卡死问题。

内容的提问来源于stack exchange，提问作者Maelstrom116