DOM如何渲染大量千级万级数据页面也不会卡住-面试题

一个例子是创建 WebQQ 的 QQ 好友列表。列表中通常会有成百上千个好友,如果一个好友 用一个节点来表示,当我们在页面中渲染这个列表的时候,可能要一次性往页面中创建成百上千 个节点。 在短时间内往页面中大量添加 DOM 节点显然也会让浏览器吃不消,我们看到的结果往往就 是浏览器的卡顿甚至假死。代码如下:

var ary = [];
for ( var i = 1; i <= 1000; i++ ){
    ary.push( i ); // 假设 ary 装载了 1000 个好友的数据
};
var renderFriendList = function( data ){
    for ( var i = 0, l = data.length; i < l; i++ ){
        var div = document.createElement( 'div' );
        div.innerHTML = i;
        document.body.appendChild( div );
    }
};
renderFriendList( ary );

这个问题的解决方案之一是下面的 timeChunk 函数, timeChunk 函数让创建节点的工作分批进 行,比如把 1 秒钟创建 1000 个节点,改为每隔 200 毫秒创建 8 个节点。

// data 数据  func 插入操作  interval 时间周期  该周期插入的项目数
var timeChunk = function(data, func, interval, count){
    var obj, timer;

    var start = function(){
        for(var i = 0; i < Math.min(count || 1, data.length); i++){
            obj = data.shift();
            func(obj);
        }
    };

    return function(){
        timer = setInterval(function(){
            if(data.length === 0){
                return clearInterval(timer);
            }

            start();
        }, interval);
    };
}

var data= [];
for ( var i = 1; i <= 1000; i++ ){
    data.push( i );
};

renderFriendList = timeChunk(data, function(n){
    var div = document.createElement( 'div' );
    div.innerHTML = n;
    document.body.appendChild( div );
}, 200, 10);

renderFriendList();

欢迎关注进阶大前端IT圈公众号,即时获取更多前端技术,还可获取百人的前端群,里面很多知名互联网前端朋友,前端技术更新太快,不能被落伍淘汰,共同学习,共同进步!

原文链接:segmentfault.com

上一篇:js将扁平结构数据转换为树形结构
下一篇:javascript 柯里化

相关推荐

  • (立下flag)每日10道前端面试题-15 关于【高级技巧】十问

    (/public/upload/4dc64bf14f4bd714fcd87e98b6a10373) 第一问:安全类型检测——typeof和instanceof 区别以及缺陷,以及解决方案 这两...

    1 个月前
  • 高级前端面试题大汇总(只有试题,没有答案)

    面试题来源于网络,看一下高级前端的面试题,可以知道自己和高级前端的差距。有些面试题会重复。 ...

    2 年前
  • 面试题|手写JSON解析器

    这周的 Cassidoo 的每周简讯有这么一个面试题:: 写一个函数,这个函数接收一个正确的 JSON 字符串并将其转化为一个对象(或字典,映射等,这取决于你选择的语言)。

    3 个月前
  • 面试题:没有es6老项目,如何用jq解决异步的问题?

    我们都知道es6提供了promise异步写法,但是大部分的公司都是jq写的,那我们如何用Jq来写和promise异步一样的写法呢?这个知道的人不多下面我们就来写写把 注意: 1 JQ 1.5以上 ...

    2 年前
  • 面试题:nginx有配置过吗?反向代理知道吗?

    这篇文章主要是针对跨域进行配置,如果大佬们会配置的话,就不用看了~简述反向代理和正向代理反向代理: 我们将请求发送到服务器,然后服务器对我们的请求进行转发,我们只需要和代理服务器进行通信就好,偷个图:...

    1 个月前
  • 面试题:Hooks 与 React 生命周期的关系

    React 生命周期很多人都了解,但通常我们所了解的都是 单个组件 的生命周期,但针对 Hooks 组件、多个关联组件(父子组件和兄弟组件) 的生命周期又是怎么样的喃?你有思考和了解过吗,接下来我们将...

    10 个月前
  • 面试题(前端-字节跳动)

    只是做个记录 第一题 我叫王大锤,是一家出版社的编辑。我负责校对投稿来的英文稿件,这份工作非常烦人,因为每天都要去修正无数的拼写错误。但是,优秀的人总能在平凡的工作中发现真理。

    9 个月前
  • 面试题重点突出

    什么是跨域?跨域请求资源的方法有哪些? 1、什么是跨域? 由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况: 网络协议不同,如htt...

    1 年前
  • 面试题里的那些各种手写

    最近准备初级前端面试,发现有很多手写实现什么的,例如什么手写实现bind,promise。手写ajax,手写一些算法。 翻阅了很多书籍和博客。 这里做一个总结改进,算是对我后面大概为期一个月找工作的...

    1 年前
  • 面试题联盟之 VUE 篇

    面试题联盟之 VUE 篇 1.SPA 单页面的理解 SPA( singlepage application )仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。

    2 个月前

官方社区

扫码加入 JavaScript 社区