糸の窝
    avatar

    关于处理JS滚动事件中DOM操作的优化

    2022-05-14
    JavaScript / 开发

    最近不是在做MDx嘛（就现在这个主题），滚动的时候会将AppBar的站点名称替换成当前的页面名称，最近调试的时候看着DOM那里一直在闪，就想虽然这是刷新同一个文本，视觉上不会变动，但是他确实是一直在操作DOM的，这会不会对性能造成影响呢？

    先说结论：会

    心动不如行动 想着就测了测，打开about:blank，在DOM栏里添加一个div#123。

    切到console，分别输入

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 无论内容是否相同都会刷新同一内容
    console.log(performance.now());
    for(let i=0;i<=1000;i++){
        document.getElementById('123').innerText='123';
    }
    console.log(performance.now());
    // 23361.899999976158
    // 23369
    // 用时 233.7

    和

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 先判断内容是否相同，不相同才刷新
    console.log(performance.now());
    for(let i=0;i<=1000;i++){
        if(document.getElementById('123').innerText!='123'){
            document.getElementById('123').innerText='123';
        }
    }
    console.log(performance.now());
    // 33920.19999998808
    // 33924
    // 用时 3.80000001192

    结果在我意料之中，反复刷新DOM（即使是同一个内容）也会造成性能损失

    长按或右键保存图片
    使用微信扫描后在微信内分享
    本文链接：https://www.yuameshi.top/2022/05/optimize-js-scroll-refreshing-dom/
    本文采用 CC BY-NC-SA 3.0 协议进行许可