• 35648

    文章

  • 23

    评论

  • 20

    友链

  • 最近新加了很多技术文章,大家多来逛逛吧~~~~
  • 喜欢这个网站的朋友可以加一下QQ群,我们一起交流技术。

JS渲染十万数据列表

欢迎来到阿八个人博客网站。本 阿八个人博客 网站提供最新的站长新闻,各种互联网资讯。 喜欢本站的朋友可以收藏本站,或者加QQ:我们大家一起来交流技术! URL链接:https://www.abboke.com/jsh/2019/0703/5040.html 1190000019645162

直入正题:假设有十万条数据的列表要展示,该如何优化?
如果直接上,不管你是一条一条插入,还是先存入fragment再一次性插入,白屏时间都在6s+,浏览器应该是合并了dom更新操作,如果不做优化,并不会分批渲染。
注意:测试所用的item结构是极其简单的,一旦渲染的item是复杂结构那么渲染的时间倍增

item.innerHTML = <p><i>${text}</i></p><strong>测试</strong>;

图片描述

  1. 优化一,分批渲染requestAnimationFrame
    requestAnimationFrame和setTimeout的区别就不多复述了,网上一大把。先渲染一部分,然后执行循环逻辑。但是这个部分到底是多少,需要自己调试了,我写的是300,但不一定适用。
    const totalFn = () => {
      window.requestAnimationFrame(() => {
        if (i <= data.length) {
          computedHeight(data.slice(i, i + 300)); // 执行插入dom操作
          i += 300;
          totalFn();
        } else {
          root.style.height = max + 'px'
        }
      })
    }
    totalFn();
这样能做到秒开,无长时间白屏。

图片描述

but,如果只是这样就回答的太简单了点,可能面试官还希望更深入的解答,比如我十万条数据就算能秒加载,但是渲染复杂逻辑,说不定会卡卡的,因为页面元素太多了。在不考虑分页的情况下,如何进一步优化。

  1. 优化二,只渲染可视区范围内的dom(只提供思路了)

这块涉及的交互就略复杂了,首先为了保证和一次性加载出来的效果一致,比如有滚动惯性,需要计算总高度。
简单的玩法,每一个item是同样的高度,那么计算高度就很简单了,但是如果每个item的高度不同,那么要就需要隐藏计算(把dom插入隐藏域,而且需要采用优化一的手段,不然会卡),但是那样又会导致整个计算过程过于漫长,需要寻找到最适合的点。
得到高度后,绑定scroll事件,根据scrollTop的值,动态计算展示哪一块内容,为了保证位置,还需要在首部填充空白块占位。
仍然可能存在的问题,比如scroll触发的时机,scroll在ios下是不能做到实时触发的,比如在惯性滚动过程中,触发不了scroll事件,可能会导致部分白屏(暂时没有想到如何解决),如果用iscroll.js,不知道能不能
模拟到原生的效果。

相关文章

暂住......别动,不想说点什么吗?
  • 全部评论(0
    还没有评论,快来抢沙发吧!