<NexuCloud>

function batchDOMUpdates(updates) {
    const fragment = document.createDocumentFragment();
    updates.forEach(update => {
        const el = document.createElement('div');
        el.textContent = update.text;
        fragment.appendChild(el);
    });
    container.appendChild(fragment);
}

批量DOM更新可以显著减少重排次数，提高渲染效率。使用DocumentFragment是最佳实践。此方法在处理大量DOM元素插入时效果尤为明显。

const user = {
    name: 'Alice',
    profile: { age: 25, city: 'Beijing' }
};

// 解构嵌套对象
const { name, profile: { city } } = user;
console.log(name, city); // Alice Beijing

解构赋值让对象属性提取更简洁，尤其适用于配置对象和API响应数据处理。这种语法糖大大提升了代码可读性。

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}

.item:nth-child(3n+1) {
    grid-column: span 2; /* 首列宽两格 */
}

Grid布局适合复杂二维布局场景，auto-fit与minmax结合可实现响应式网格。这是现代CSS布局的核心技术之一。

// 错误示例：未返回Promise
asyncFunc()
  .then(result => {
    anotherAsyncFunc(result); // 缺少return!
  })
  .catch(handleError);

// 正确写法
asyncFunc()
  .then(result => anotherAsyncFunc(result))
  .catch(handleError);

Promise链中必须返回新的Promise，否则后续catch无法捕获中间环节的异常。这是异步编程中的常见误区。

let angle = 0;
function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    
    ctx.save();
    ctx.translate(centerX, centerY);
    ctx.rotate(angle);
    drawRotatingShape();
    ctx.restore();
    
    angle += 0.05;
    requestAnimationFrame(animate);
}

使用requestAnimationFrame实现流畅动画，记得每次清空画布并保存/恢复状态。这是创建高性能Web动画的标准方法。