博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
html数据渲染笔试题,面试题:js如何渲染十万条数据并不卡住界面
阅读量:6485 次
发布时间:2019-06-23

本文共 648 字,大约阅读时间需要 2 分钟。

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

代码如下:

js如何渲染十万条数据并不卡住界面
  • 控件

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)

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

转载地址:http://fhnuo.baihongyu.com/

你可能感兴趣的文章
UML
查看>>
UWP Composition API - 锁定列的FlexGrid
查看>>
Java函数结束时的内存回收坑
查看>>
JS引用类型 -- Object类型
查看>>
木其工作室代写程序 [原]Java环境的搭建
查看>>
创意网站应用--原创奇妙点子想法
查看>>
自己动手写个Android数据库orm框架,支持关联关系,数据懒加载
查看>>
利用JS最真实的模拟鼠标点击
查看>>
百度Touch.js
查看>>
C#生成数据库中表的XML文件
查看>>
《windows程序设计》学习_3.3:利用xp扫雷资源
查看>>
递归之求二维数组的最短路径、给定一个整数和一个数组任意选择数组中的数累加能否得到该整数...
查看>>
用PyRestful快速构建Tornado下REST APIs 的支持
查看>>
【转载】MiniUtilityFramework(七):STRING
查看>>
[mysql] 如何将拷贝过来的数据 *.ibd 文件生效 及查看数据存储位置
查看>>
windows 下,go语言 交叉编译
查看>>
Python装饰器实现异步回调
查看>>
从 C++ 到 Objective-C 的快速指南
查看>>
IO流-ZIP文档
查看>>
【Android】14.1 内部文件存储和读取
查看>>