JS 分时函数性能优化验证 性能提升500%

1.背景

在一些开发场景中，我们可能会一次性向文档中注入上千个节点，在短时间内向浏览器中大量添加DOM节点可能会让浏览器吃不消，结果往往会让浏览器卡顿或吃不消，解决方案之一便是使用分时函数

    
    
    
    


    
分时函数性能优化验证

    

1.png

分时函数的思想就是将一次性执行大量重复操作时，分批次时间周期的进行，这样就可以不阻塞页面首屏的渲染，避免出现假死现象。

    
    
    
    


    
分时函数性能优化验证

    

2.png

通过对比可以看到后者经过分时函数的首屏里scripting的时间只有425ms，前者是2410ms，通过分时函数使得首屏性能提节省了500%的时间，非常可观。