/* @file index.html */

微任务 vs 宏任务：背景色什么时候变？

点击按钮后连续修改背景色 100 次。微任务版你只看到最终颜色，宏任务版你能看到闪烁过程。

/* @file style.css */ .highlight { background: #fef3c7; } .dark .highlight { background: #78350f; } .result { color: #10b981; font-weight: 600; } .timestamp { color: #6b7280; } /* @file main.js */ const log = document.getElementById('log'); const colors = ['#ef4444','#f97316','#eab308','#22c55e','#3b82f6','#8b5cf6','#ec4899']; let step = 0; function addLog(msg, cls = '') { const el = document.createElement('div'); el.className = cls; el.textContent = `[${performance.now().toFixed(1)}ms] ${msg}`; log.appendChild(el); log.scrollTop = log.scrollHeight; } document.getElementById('btn-micro').addEventListener('click', () => { log.innerHTML = ''; addLog('开始：用 Promise.then 连续改背景色 100 次'); const start = performance.now(); for (let i = 0; i < 100; i++) { Promise.resolve().then(() => { document.body.style.backgroundColor = colors[i % colors.length]; }); } Promise.resolve().then(() => { const elapsed = (performance.now() - start).toFixed(1); addLog(`全部微任务执行完毕，耗时 ${elapsed}ms`, 'result'); addLog('你只看到最终颜色——因为微任务全部清空后才渲染', 'result'); }); }); document.getElementById('btn-macro').addEventListener('click', () => { log.innerHTML = ''; addLog('开始：用 setTimeout 逐个改背景色（前 20 次）'); for (let i = 0; i < 20; i++) { setTimeout(() => { document.body.style.backgroundColor = colors[i % colors.length]; if (i === 19) { addLog('20 次 setTimeout 全部执行完毕', 'result'); addLog('你能看到颜色闪烁——每个宏任务之间都有渲染机会', 'result'); } }, i * 50); } }); document.getElementById('btn-reset').addEventListener('click', () => { document.body.style.backgroundColor = ''; log.innerHTML = ''; addLog('已重置'); });