这道题考察了如何在不卡住页面的情况下渲染数据，也就是说不能一次性将几万条都渲染出来，而应该一次渲染部分 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. Jsp的语法和指令

    Jsp的三种注释 前端语言注释:<!-- --> 会被转译,也会被发送,但是不会被浏览器执行 java语言注释: 会被转译,但是不会被servlet执行 Jsp注释:<%--  -- ...

  2. ORACLE实用函数之一 ratio_to_report的简单使用

    应用场景: 查询学生成绩级别(ABCDE)个人数和所占百分比(案列简单,勿喷). 表结构: create or replace table stu_grade( id varchar2(36), le ...

  3. RAC环境数据库重启实例

    1.重启之前最好先看一下节点信息和运行状态 可以通过srvctl status database -d 数据库名 //查看节点信息 Crs_stat //查看节点状态 可以看到数据节点它由两个实例组成 ...

  4. 【转】web应用缓慢故障分析

    在这以后里分享一篇关于web应用缓慢的分析过程,感觉挺有用的. 原文出处:http://xjsunjie.blog.51cto.com/999372/751585 友在一家购物网站做运维不久,今日打电 ...

  5. c语言学生信息管理系统-学习结构体

    #include<stdio.h> #include<stdlib.h> //结构体可以存放的学生信息最大个数,不可变变量 ; //学生信息结构体数组,最多可以存放100个学生 ...

  6. BZOJ 1014 [JSOI2008]火星人prefix (Splay + Hash + 二分)

    1014: [JSOI2008]火星人prefix Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 8112  Solved: 2569[Submit] ...

  7. Android真机调试试验

    之前一直使用模拟器,很不好用,今天使用真机调试试验. 准备材料:电脑,Android手机. 首先,就遇到了一个问题,我的手机是华为的,之前不知道怎么回事,打开调试总是自动关闭,而且切换总是切换不了,老 ...

  8. Transaction And Lock--唯一索引下INSERT导致的死锁

    背景: 曾经的一位同事问我:"数据库只有并发INSERT 操作,会造成死锁么?",我没有太多思考地回答"不会",但真的不会吗? 测试: --========== ...

  9. Alwayson--使用证书创建高可用性组

    --场景: --有服务器SQLNode11,SQLNODE21,SQLNODE31三台在同一故障转移群集SQLNode01中 --的数据库服务器,安装SQL SERVER 2012 并配置启动alwa ...

  10. CentOS环境变量配置并生效

    配置环境变量 1). #:vi /etc/profile 在最后面添加 PATH=~/dotnet/bin:$PATHexport PATH 2). #:source /etc/profile