说点儿 JS 性Neng的鸡毛蒜皮

先说实话，写代码的时候谁不想自己写的页面飞快跑起来呢。

可是啊，现实往往是卡卡卡，卡得像老牛拖车。

别急，咱今天就聊聊怎么让 JS 挺起腰板，渲染也不再慢吞吞。

渲染管线到底是个啥玩意儿？

浏览器把页面拆成DOM、CSSOM、渲染树，再来回合成层。

这几个环节里只要动一动就会触发重排或重绘，性Neng立马掉线。

所以呀，核心思路就是：少动、批量、异步。

1️⃣ 把“频繁操作”变成“一次性大搬家”

DocumentFragment 是前端的搬运工。

它本身不在页面里往里塞东西根本不会刷屏。

等全装好，再一次性塞进真实 DOM，只会触发一次重排。

// 小例子：一次性插入 100 条 li
const ul = document.querySelector;
const fragment = document.createDocumentFragment;
for  {
    const li = document.createElement;
    li.textContent = '第' + i + '项';
    fragment.appendChild;
}
ul.appendChild; // 只触发一次渲染

说实话，这招Neng省下至少 90% 的渲染时间，别小kan它。

2️⃣ 防抖 & 节流——别让高频事件抢了主线程

滚动、输入、窗口大小变化，这些事件每秒Neng冒出来几百次。

Ru果每次dou去算布局，那主线程马上被挤爆。

防抖: 等Zui后一次触发后才执行。

// 防抖函数
function debounce {
    let timer = null;
    return function {
        const context = this;
        if  clearTimeout;
        if  {
            const callNow = !timer;
            timer = setTimeout => timer = null, wait);
            if  fn.apply;
        } else {
            timer = setTimeout => fn.apply, wait);
        }
    };
}

比如搜索框联想，用这个Neng把请求次数从几十降到个位。

节流: 固定频率执行，不管触发多少次dou只Neng每隔 X 毫秒跑一次。

// 简单版节流
function throttle {
    let last = 0;
    return function {
        const now = Date.now;
        if  {
            last = now;
            fn.apply;
        }
    };
}

3️⃣ 用 requestAnimationFrame 替代 setTimeout Zuo动画/延迟任务

setTimeout 的延迟是“Zui小”，主线程忙时会被推迟。

rAF 跟着浏览器刷新走，每帧dou会检查时间差，一旦到点就执行回调，精度geng高。

// 用 rAF 模拟精准 setTimeout
function rafTimeout {
    const start = performance.now;
    let id;
    function loop {
        if  {
            cb;
        } else {
            id = requestAnimationFrame;
        }
    }
    id = requestAnimationFrame;
    return  => cancelAnimationFrame; // 返回取消函数
}

哈哈，这玩意儿在Zuo滚动动画或游戏循环时简直是神器。

4️⃣ 分批渲染大列表——别一次性把十万条数据塞进 DOM

Ru果你有个后台管理系统，要展示上万条订单，那直接 innerHTML 那是自杀式操作。

Clever 的办法是分批 + rAF + DocumentFragment.

// 分批渲染示例
const total = 100000;
const batchSize = 20;
let rendered = 0;
const ul = document.querySelector;
function renderBatch {
    const frag = document.createDocumentFragment;
    for  {
        const li=document.createElement;
        li.textContent='Item '+;
        frag.appendChild;
    }
    ul.appendChild;
    if{
        requestAnimationFrame;
    }
}
requestAnimationFrame;

这样即使十万条也Neng保持页面不卡死，你懂的吧？

5️⃣ 图片懒加载 & 按需加载脚本——先让首屏亮起来！

别把所有图片dou一次性下载，上来就是一堆占位图，那网络带宽瞬间被吃光了。

`loading="lazy"` 是原生懒加载属性，配合 IntersectionObserver Ke以geng细致控制出现时机。

6️⃣ 内存泄漏别忘记收口袋

a. 定时器忘了 clearInterval / cancelAnimationFrame。 b. 大对象挂在全局变量上不释放。 c. 闭包里引用了大量 DOM 节点却没清理。 一句话：用完就删，别让垃圾一直跟着你跑。

💡 小结一下：怎么让你的 JS geng快、geng稳？

- 减少 DOM 操作：DocumentFragment、innerHTML、虚拟 DOM；

- 合理调度高频事件：防抖、防抖+立即执行、节流；

- 动画和延迟任务用 rAF；

- 大数据列表分批渲染；

- 懒加载资源；

- 清理无用引用防止内存泄漏。

A/B 测试一下你会发现页面卡顿明显下降 🎉

#好啦，就这么多技巧啦，你赶紧挑几个先整整kan效果吧！ 哈哈，有啥不明白的直接戳我，我这老友随时待命~

---