HTML本身没有函数，拖慢浏览器的是<script>中未优化的JavaScript代码，如频繁DOM操作、同步布局计算、未节流事件等。
HTML 本身没有“函数”，拖慢浏览器的从来不是 HTML 标签，而是写在 <script> 里的 JavaScript 代码——尤其是那些在主线程反复执行、未加节流、或意外触发重排重绘的操作。
为什么你看到“HTML 函数”就卡顿？
常见误解：把 onclick、oninput 这类内联事件处理当成“HTML 函数”。它们只是语法糖，实际绑定的是 JS 函数。一旦这个函数里有 document.getElementById 频繁查 DOM、用 offsetTop 触发同步布局计算、或在 scroll 里直接改样式，浏览器就会掉帧。
- 内联事件（如
onclick="handle()"）会隐式创建全局函数，不利于压缩和作用域隔离 -
innerHTML += ...每次都触发完整 HTML 解析 + 重排，比textContent或appendChild慢一个数量级 - 表单控件（
<input type="range">）绑定input事件却不节流，移动端滑动时每秒可能触发上百次
requestAnimationFrame 不是万能解药
它只保证 JS 执行时机对齐屏幕刷新率，但若你在回调里仍做大量计算或强制同步读取布局（如 getBoundingClientRect()），照样卡顿。关键不是“放哪儿执行”，而是“执行什么”。
- 读取布局信息（
offsetHeight、clientWidth等）必须前置，不要穿插在写操作中间 - 批量 DOM 更新优先用
DocumentFragment或innerHTML（仅当结构简单时），避免逐个appendChild -
requestAnimationFrame适合动画逻辑，不适合数据处理；复杂计算请移入Web Worker
Chrome DevTools 里一眼定位真凶
打开 Performance 面板，录制一次交互，重点关注 Main 线程的长任务（红色块 > 50ms）和频繁出现的 Layout / Paint 块。右键堆栈 → “Zoom to” 可快速跳转到对应 JS 行。
立即学习“前端免费学习笔记（深入）”；
- 若看到大量
Recalculate Style，检查是否用了通配符 CSS 选择器（* {}）或!important破坏层叠优化 - 若
Parse HTML时间异常高，可能是服务端返回了未压缩的巨量内联 HTML 字符串 - 注意
Timer Fired下挂载的setTimeout/setInterval，尤其那些未清理的setInterval，会在后台持续抢占主线程
硬件加速不等于免死金牌——transform: translateZ(0) 强制图层提升，但若同时还在 JS 中频繁修改 top/left，反而引发图层合成冲突。真正影响性能的，永远是开发者对渲染管线的理解深度，而不是某行 HTML 写得够不够“炫”。
