How to Handle and Optimize Hundreds of DOM Operations

When facing scenarios requiring hundreds of DOM operations, this often indicates potential performance issues, as frequent DOM updates can trigger layout thrashing and repaints, which can degrade user experience. To optimize this scenario, we can implement the following strategies:

1. Using DocumentFragment

DocumentFragment is a lightweight DOM node that serves as a temporary container for other DOM nodes. Construct the entire DOM structure in memory and append it to the DOM tree in a single operation to minimize repaints.

Example:

javascript
// Create a new empty DocumentFragment
let fragment = document.createDocumentFragment();

// Loop to add DOM nodes to the DocumentFragment
for (let i = 0; i < 300; i++) {
  let div = document.createElement('div');
  div.textContent = `Item ${i}`;
  fragment.appendChild(div);
}

// Finally, append the DocumentFragment to the DOM
document.body.appendChild(fragment);

2. Batch Updating Styles

When modifying element styles, avoid individual updates; instead, use class names for style changes or leverage cssText to apply multiple style properties at once.

Example:

javascript
// Not recommended: individual updates
element.style.color = 'blue';
element.style.fontSize = '14px';
element.style.margin = '10px';

// Recommended: use cssText or class names
element.className = 'new-style';
// or
element.style.cssText = 'color: blue; font-size: 14px; margin: 10px;';

3. Using requestAnimationFrame

For DOM operations involving animations or visual updates, utilize requestAnimationFrame. This API queues DOM operations to execute before the browser's next repaint, preventing unnecessary repaints.

Example:

javascript
function update() {
  // Perform DOM operations
}

// Schedule update before the next repaint
requestAnimationFrame(update);

4. Virtual DOM Libraries

Virtual DOM technologies (such as React's virtual DOM) reduce unnecessary DOM operations by comparing changes in a JavaScript memory structure synchronized with the actual DOM, updating only modified sections.

Example:

jsx
class MyComponent extends React.Component {
  render() {
    return (
      <div>
        {this.props.items.map(item => <div key={item.id}>{item.text}</div>)}
      </div>
    );
  }
}

5. Optimizing Selectors and Avoiding Layout Thrashing

• Prioritize efficient selectors to avoid complex CSS selectors, which increase DOM query time.
• Minimize frequent read-write operations on DOM properties like offsetHeight to prevent layout thrashing; separate read and write operations.

Conclusion

The key to optimizing DOM operations is reducing repaints and reflows while minimizing direct DOM interactions. The strategies above aim to achieve this goal. In practical projects, select appropriate optimization techniques based on specific requirements.