这道题考察了如何在不卡住页面的情况下渲染数据，也就是说不能一次性将几万条都渲染出来，而应该一次渲染部分 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. 2018.09.10 bzoj1499: [NOI2005]瑰丽华尔兹（单调队列优化dp）

    传送门 单调队列优化dp好题. 这题其实很简单. 我们很容易想到一个O(T∗n∗m)" role="presentation" style="position: ...

  2. 2018.08.17 bzoj4653: [Noi2016]区间（线段树+尺取法）

    传送门 将坐标离散化之后直接用尺取法(双指针)+线段树维护. 其实就是说只要目前所有点的被覆盖次数是大于等于m的就移动左指针删除区间更新答案,否则移动右指针加入区间更新答案. 话说忘记排序以及建树的时 ...

  3. Linux下安装配置 Jdk1.6+Tomcat6+Apache2.2.x+jk_mod1.2 详解

    本篇以Redhat AS5,内核为Linux 2.6.18-8.el5 为例,其中Redhat/Fedora系列基本一致,其他Linux或者版本均可以参考. STEP 1 软件下载:1. jdk1.6 ...

  4. NATAPP打穿内网

    前一篇博文写了ngrok作为内网穿透工具现在开始开始学习另外一种内 网穿透natapp(他也是基于ngrok的一种高速内网穿透服务)多的介绍就 不说了,开始进入正题. 第一步:先登录natapp官网( ...

  5. （匹配）Dolls --HDU --4160

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=4160 代码: #include<stdio.h> #include<string.h& ...

  6. Oracle 在not in中使用null的问题

    http://www.linuxidc.com/Linux/2012-07/66212.htm 以前还专门小总结过一下Oracle中关于NULL的一些问题,碰巧今天在看书的过程中又看到了另外一个以前没 ...

  7. Windows 7下通过Excel2007连接Oracle数据库并对表查询

    http://blog.csdn.net/pan_tian/article/details/8133668 1. 环境变量的设置 1.1  ORACLE_HOME环境变量的设置,我这里指向了我的Ora ...

  8. AndroidPn源码分析（二）

    接上篇: (一)客户端与服务器建立连接 上一篇写到ClientSession createClientSession这里,创建一个客户端的session.在SessionManager类中创建了ses ...

  9. TFS：需要包管理许可证才能进一步操作You need a Package Management license to go further

    问题: 为什么团队成员没有查看包管理服务的权限?如下图: 答案: TFS系统的访问级别设置,决定在默认配置中用户是否有包管理的访问权限.默认配置中,只有"VS Enterprise" ...

  10. vux Tabbar组件入门备忘大佬多指点

    一.Tabbar引入及使用 1.新创建vue文件 2.在vue文件中添加插件 <template> <div> <tabbar style="position: ...