这道题考察了如何在不卡住页面的情况下渲染数据，也就是说不能一次性将几万条都渲染出来，而应该一次渲染部分 DOM，那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次。

代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>js如何渲染十万条数据并不卡住界面</title>
</head>
<body>
    <ul>控件</ul>
</body>
</html>
setTimeout(() => {
    let data = 100000;
    let once = 20;
    let num = data/once;
    let currentIndex = 0;
    let ul = document.querySelector('ul');
    let frameagent = document.createDocumentFragment();
    function add(){
        for (var i = 0; i < once; i++) {
            let li = document.createElement('li');
            li.innerText = Math.floor(Math.random() * data);
            frameagent.appendChild(li);
        }
        currentIndex += 1;
        ul.appendChild(frameagent);
        loop();
    }
    function loop(){
        if(currentIndex < num){
            window.requestAnimationFrame(add);
        }
    }
    loop();
},0)

本题来自于网络，所有权归其作者。

面试题：js如何渲染十万条数据并不卡住界面的更多相关文章

  1. 腾讯面试题,js处理1千万条数据排序并且页面不卡顿

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 实现java 中 list集合中有几十万条数据,每100条为一组取出

    解决"java 中 list集合中有几十万条数据,每100条为一组取出来如何实现,求代码!!!"的问题. 具体解决方案如下: /** * 实现java 中 list集合中有几十万条 ...

  3. 原！！mysql，几十万条数据中随机抽取1万以内的数据

    想了几种方法: 1.将所有符合条件的对象集合都查出来,在代码里做随机. 2.先查出所有符合条件的id,再代码随机需要抽查数量的id,再 到数据库 中 in. 3.利用order by rand() l ...

  4. 使用Python对MySQL数据库插入二十万条数据

    1.当我们测试的时候需要大量的数据的时候,往往需要我们自己造数据,一条一条的加是不现实的,这时候就需要使用脚本来批量生成数据了. import pymysql import random import ...

  5. js获取列表多条数据(接口)

    读取数据://ajax去服务器端校验 $.ajax({ type:"post", url:"http://", data:{deviceid:1}, dataT ...

  6. 【Oracle/Java】给十六张表各插入十万条数据 单线程耗时半小时 多线程耗时一刻钟

    测试机Oracle版本: SQL> select * from v$version; BANNER ----------------------------------------------- ...

  7. ES 插入十万条数据耗时1573秒

  8. Vue中如何书写js来渲染页面填充数据的部分代码

    new Vue({ el:"#app" , data:{ user:{ id:"", username:"", password:" ...

  9. 百度地图Canvas实现十万CAD数据秒级加载

    背景 前段时间工作室接到一个与地图相关的项目,我作为项目组成员主要负责地图方面的设计和开发.由于地图部分主要涉及的是前端页面的显示,作为一名Java后端的小白,第一次写了这么多HTML和JavaScr ...

随机推荐

  1. redis学习-事务命令

    multi:开启事务 exec:提交事务 discard:取消事务 1.开启事务之后,每次执行命令之后,都要先进入事务队列中,只有在执行 exec之后才开始执行 2.开启事务之后,每次执行命令之后,都 ...

  2. java反编译工具jad使用

    参考:http://blog.csdn.net/u014472711/article/details/53713269 http://lijingshou.iteye.com/blog/2005717 ...

  3. 百度Webuploader 大文件分片上传(.net接收)

    版权所有 2009-2018荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...

  4. 都有哪些 cache ？

    1. spring http://www.springframework.org/schema/cache 2. ehcache LOGO关键词:palindrome [ˈpælɪndrəʊm] 正读 ...

  5. 使用Revel（go）开发网站

    Revel很好的利用了Go语言的goroutine,把每一个request都分配到了goroutine里.不用再写一大堆的回调.如果你写过nodejs的话就会深刻的体会到callback hell是什 ...

  6. struts2从浅至深（四）下载文件

    1.创建下载文件动作类 2.配置struts 3.提供一个下载链接 4.下载页面 为什么文件名是链接名 只是以链接名显示,但文件的本身是个图片秩序改掉后缀名就可以了

  7. handsontable 问题

    碰到问题了,去官网上找community:http://docs.handsontable.com/0.16.1/tutorial-quick-start.html 1. 描述:把handson ta ...

  8. Leader Election 选举算法

    今天讲一讲分布式系统中必不可少的选举算法. leader 就是一堆服务器中的协调者,某一个时刻只能有一个leader且所有服务器都承认这个leader. leader election就是在一组进程中 ...

  9. NERDTree基本使用教程

    Vim插件之属性目录NERDTree   1.下载安装 下载地址: 官网:http://www.vim.org/scripts/script.php?script_id=1658 GitHib:htt ...

  10. C#委托、事件剖析(上)

    本节对委托.事件做以总结. 一.委托: 1.概念:先来说明变量和函数的概念,变量,以某个地址为起点的一段内存中所存储的值,函数,以某个地址为起点的一段内存中存储的机器语言指令.有了这2个概念以后,我们 ...