前端面试题：如何渲染大批量数据而页面不被卡住

 FE-Interview  javascript 66

  

   

    

     

    
    

     

          setTimeout(
      () => {
     
    
   

    

     

    
    

     
        
      // 总共加载10万条数据
     
    
   

    

     

    
    

     
        
      const total = 
      100000
     
    
   

    

     

    
    

     
            
      // 一次加载20条
     
    
   

    

     

    
    

     
        
      const once = 
      20
     
    
   

    

     

    
    

     
            
      // 需要加载多少次
     
    
   

    

     

    
    

     
        
      const loopCount = total / once
     
    
   

    

     

    
    

     
            
      // 加载到第几次了
     
    
   

    

     

    
    

     
        
      let currentNum = 
      0
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
        
      function add() {
     
    
   

    

     

    
    

     
            
      // 创建一个文档碎片（上古朕哥叫法）
     
    
   

    

     

    
    

     
            
      let bigBox = 
      document.createDocumentFragment()
     
    
   

    

     

    
    

     
            
      let ul = 
      document.querySelector(
      'ul')
     
    
   

    

     

    
    

     
                
      // 每次加载once条
     
    
   

    

     

    
    

     
            
      for (
      let i = 
      0; i < once; i++) {
     
    
   

    

     

    
    

     
                
      let li = 
      document.createElement(
      'li');
     
    
   

    

     

    
    

     

                      li.innerText = 
      Math.random() * 
      100
     
    
   

    

     

    
    

     

                      bigBox.appendChild(li)
     
    
   

    

     

    
    

     

                  }
     
    
   

    

     

    
    

     
            
      // 插进UI
     
    
   

    

     

    
    

     

                  ul.appendChild(bigBox)
     
    
   

    

     

    
    

     

                  currentNum++
     
    
   

    

     

    
    

     

                  loop()
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
        
      function loop() {
     
    
   

    

     

    
    

     
            
      if (currentNum < loopCount) {
     
    
   

    

     

    
    

     
                
      // requestAnimationFrame(add) 每隔10000/屏幕刷新率 毫秒执行一次函数 
     
    
   

    

     

    
    

     
                
      window.requestAnimationFrame(add)
     
    
   

    

     

    
    

     

                  }
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     

              loop()
     
    
   

    

     

    
    

     

          }, 
      0)
     
    
  

知识点

document.createDocumentFragment( )

没什么好讲的，老知识了，科普一下吧😄

如果当我们要向document中添加大量数据时(比如10w条)，如果逐条添加节点，这个过程就会十分缓慢。 

当然,你也可以建个新的节点,比如说ul,先将li添加到ul上,然后再将ul添加到页面中.但这样要在父元素中多添加一个<ul>但文档碎片不会产生这种额外节点。

window.requestAnimationFrame( )

与setTimeout相比，requestAnimationFrame最大的优势是由系统来决定回调函数的执行时机。具体一点讲，如果屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，如果刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引起丢帧现象，也不会导致动画出现卡顿的问题。