这道题考察了如何在不卡住页面的情况下渲染数据，也就是说不能一次性将几万条都渲染出来，而应该一次渲染部分 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.06.28 BZOJ1014 [JSOI2008]火星人prefix（非旋treap+hash）

    [JSOI2008]火星人prefix Time Limit: 10 Sec Memory Limit: 162 MB Submit: 8951 Solved: 2860 Description 火星 ...

  2. 2018.08.04 spoj TTM to the moon（主席树）

    spoj传送门 vjudge传送门 主席树板子题. 支持历史版本的区间和,区间和,区间修改和时光倒流. 其中新奇一点的也只有区间修改了,这个东西直接标记永久化就行了. 如果想下传标记的话也行,需要在p ...

  3. EditPlus常用快捷键[私人]

    EditPlus快捷键大全网上一搜一大把, 本文档只记录自己常用的快捷键, 随时更新: 必用: ctrl + c 复制 ctrl + x 剪切 ctrl + v 粘贴 ctrl + z 回滚 ctrl ...

  4. PAT甲 1008. Elevator (20) 2016-09-09 23:00 22人阅读 评论(0) 收藏

    1008. Elevator (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue The highest ...

  5. Paxos与zookeeper

    1,什么是Paxos算法? Paxos算法是分布式计算领域中一个非常重要的算法,主要解决分布式系统如何就某个值(决议)达成一致的问题.一个典型的场景是分布式数据库的一致问题:如果分布式数据库的各个节点 ...

  6. ACL授权实例

    上一篇关于ACL的文章中:位运算实现ACL授权与认证过程的原理解析,我们学习了通过位运算实现ACL授权与认证的原理核心,今天我们一起来看授权的实例. 实现的功能很简单:打开授权界面时,加载已授权信息. ...

  7. Python学习-18.Python中的错误处理（三）

    在某些情况下,我们需要定义自己的异常并且抛出 先定义一个错误: class MyError(BaseException): def __init__(self): pass 上面定义了一个叫MyErr ...

  8. Jersey构建Restful风格的webservices

    最近一直在搞老项目的开发工作,很少写博文了.听了两位阿里巴巴大牛的讨论,决定试试用restful风格的webservices看看. 这里用的是Jersey这个框架,刚开始弄,有点麻烦,只能到处查资料. ...

  9. Visual Studio 6 (VC6）连接Team Foundation Server (TFS 2018），实现源代码的版本管理

    1. 概述 Visual Studio 6(VB6, VC6, Foxpro-)是微软公司在1998年推出的一款基于Windows平台的软件开发工具,也是微软推出.NET开发框架之前的最后一个IDE工 ...

  10. 将GridView的数据导出Excel

    HttpContext.Current.Response.AppendHeader("Content-Disposition", "attachment;filename ...