js实时刷新导致页面卡死

// 示例：使用 React 的 useState 和 useEffect
import React, { useState, useEffect } from 'react';

function App() {
  const [data, setData] = useState([]);

  useEffect(() => {
    const intervalId = setInterval(() => {
      // 模拟数据更新
      setData(prevData => [...prevData, Math.random()]);
    }, 1000);

    return () => clearInterval(intervalId); // 清除定时器
  }, []);

  return (
    <div>
      {data.map((item, index) => (
        <div key={index}>{item}</div>
      ))}
    </div>
  );
}

export default App;

// 示例：批量更新 DOM
function batchUpdate() {
  const fragment = document.createDocumentFragment();
  for (let i = 0; i < 1000; i++) {
    const div = document.createElement('div');
    div.textContent = `Item ${i}`;
    fragment.appendChild(div);
  }
  document.body.appendChild(fragment);
}

// 示例：使用 lodash 的 debounce 函数
import _ from 'lodash';

function handleScroll() {
  console.log('Scrolling...');
}

const debouncedHandleScroll = _.debounce(handleScroll, 200);

window.addEventListener('scroll', debouncedHandleScroll);

// 示例：使用 Web Workers
const worker = new Worker('worker.js');
worker.postMessage({ data: [1, 2, 3] });
worker.onmessage = function(event) {
  console.log('Received result:', event.data);
};