长任务会卡死主线程，导致页面无法响应；Performance面板中≥50ms色块、Tasks筛选及Call Tree可定位HTML解析类长任务；切片需按场景选时间片、节点数或微任务方式；Web Worker不能操作DOM，仅适用于纯计算。
长任务直接冻结主线程，不是“慢”，是“卡死”
HTML 页面里一个超过 50ms 的同步 JavaScript 任务，会让浏览器完全无法响应点击、滚动、输入——这不是渲染变慢，是主线程被独占。比如你在 load 事件里用 innerHTML 插入 10 万行表格，或在 input 回调里遍历全部 querySelectorAll('.item') 节点，都会触发 Chrome DevTools 标记的 Long Task，且用户操作会排队等待，直到它结束。
Performance 面板里怎么确认是 HTML 解析类长任务
打开 Chrome DevTools → Performance → 录制并复现操作（如点击加载按钮），关键看三处：
- Main 轨道中宽度 ≥50ms 的连续色块，鼠标悬停能看到
Duration和调用栈，若堆栈顶部是DOMParser.parseFromString或大量appendChild，就是解析/构建 DOM 导致 - Summary 下筛选
Tasks，找Duration > 50ms条目，点击跳转后看火焰图底部是否密集出现Recalculate Style或Layout - Call Tree 按
Total Time排序，排第一的函数如果含parseRow、renderTable、buildTree等字样，基本就是问题源头
注意：performance.getEntriesByType('longtask') 默认为空，必须提前用 PerformanceObserver 监听，否则录完就丢了。
切片不是加个 setTimeout 就行，得匹配场景选方式
简单套 setTimeout 容易让任务延迟堆积、帧率不稳，真正有效的切片要结合上下文：
立即学习“前端免费学习笔记（深入）”；
-
时间片动态切片：适合结构不均的数据，用
performance.now()实时监控耗时，每处理 100 个节点就检查是否超 5ms，超则用requestIdleCallback让出控制权 -
节点数固定切片：适合表格、列表等结构清晰内容，每次只处理
Math.min(50, remaining)行，用闭包保存currentIndex和数据引用 -
微任务切片：用
Promise.resolve().then()替代setTimeout，避免宏任务调度延迟；但它不保证“下一帧”，只保证当前宏任务结束后立即执行
别在 for 循环里直接写 setTimeout，那样会瞬间注册几千个定时器，反而加重调度压力。
Web Worker 不是万能解药，它根本不能碰 DOM
如果你的任务本质是“把字符串变成 DOM 节点”，比如解析 HTML 片段、生成 documentFragment，那 Web Worker 帮不上忙——它没有 document、不能调 createElement。Worker 只适合纯计算型任务，例如：
- 从原始 JSON 数据里提取字段、校验格式、聚合统计
- 对 CSV 内容做行列转换、数值计算、加密解密
- 图像像素级处理（如滤镜）、文本分词、正则批量匹配
真正要解决 HTML 构建卡顿，得回到主线程内做切片 + 懒加载 + display: none 动态管理，而不是幻想 Worker 能帮你挂载节点。
