大数据如何在前端流畅展示
如果要在前端呈现大量的数据,一般的策略就是分页。前端要呈现百万数据,这个需求是很少见的,但是展示千条稍微复杂点的数据,这种需求还是比较常见,只要内存够,javascript 肯定是吃得消的,计算几千上万条数据,js 效率根本不在话下,但是 DOM 的渲染浏览器扛不住,CPU 稍微搓点的电脑必然会卡爆。
策略:显示三屏数据,其他的移除 DOM。
一、 策略
下面是我简单勾画的一个草图,我们把一串数据放到一个容器当中,这串数据的高度(Data List)肯定是比 Container 的高度要高很多的,如果我们一次性把数据都显示出来,浏览器需要花费大量的时间来计算每个 data 的位置,并且依次渲染出来,整个过程中 JS 并没有花费太多的时间,开销主要是 DOM 渲染。
为了解决这个问题,我们让数据是显示一部分,这一部分是 Container 可视区域的内容,以及上下各一屏(一屏指的是 Container 高度所能容纳的区域大小)的缓存内容。如果 Container 比较高,也可是只缓存半屏,缓存的原因是,在我们滚动滚动条的时候,js 需要时间来拼凑字符串(或者创建 Node ),这个时候浏览器还来不及渲染,所以会出现临时的空白,这种体验是相当不好的。
二、Demo
<title>百万数据前端快速流畅显示</title>
<style type="text/css">
#box {position: relative; height: 300px; width: 200px; border:1px solid #CCC; overflow: auto}
#box div { position: absolute; height: 20px; width: 100%; left: 0; overflow: hidden; font: 16px/20px Courier;}
</style><div id="box"></div><script type="text/javascript">
var total = 1e5, len = total, height = 300, delta = 20, num = height / delta, data = [];for(var i = 0; i < total; i++){data.push({content: "item-" + i});
}var box = document.getElementById("box");
box.onscroll = function(){var sTop = box.scrollTop||0, first = parseInt(sTop / delta, 10), start = Math.max(first - num, 0), end = Math.min(first + num, len - 1), i = 0;for(var s = start; s <= end; s++){var child = box.children[s];if(!box.contains(child) && s != len - 1){insert(s);}}while(child = box.children[i++]){var index = child.getAttribute("data-index");if((index > end || index < start) && index != len - 1){box.removeChild(child);}}};function insert(i){var div = document.createElement("div");div.setAttribute("data-index", i);div.style.top = delta * i + "px";div.appendChild(document.createTextNode(data[i].content));box.appendChild(div);
}box.onscroll();
insert(len - 1);
</script>
三、算法说明
- 计算 start 和 end 节点
Container 可以容纳的 Data 数目为 num = height / delta,Container 顶部第一个节点的索引值为
var first = parseInt(Container.scrollTop / delta);
由于我们上下都有留出一屏,所以
var start = Math.max(first - num, 0);
var end = Math.min(first + num, len - 1);
- 插入节点
通过上面的计算,从 start 到 end 将节点一次插入到 Container 中,并且将最后一个节点插入到 DOM 中。
// 插入最后一个节点
insert(len - 1);
// 插入从 start 到 end 之间的节点
for(var s = start; s <= end; s++){var child = Container.children[s];// 如果 Container 中已经有该节点,或者该节点为最后一个节点则跳过if(!Container.contains(child) && s != len - 1){insert(s);}
}
这里解释下为什么要插入最后一个节点,插入节点的方式是:
function insert(i){var div = document.createElement("div");div.setAttribute("data-index", i);div.style.top = delta * i + "px";div.appendChild(document.createTextNode(data[i].content));Container.appendChild(div);
}
可以看到我们给插入的节点都加了一个 top 属性,最后一个节点的 top 是最大的,只有把这个节点插入到 DOM 中,才能让滚动条拉长,让人感觉放了很多的数据。
- 删除节点
为了减少浏览器的重排(reflow),我们可以隐藏三屏之外的数据。我这里为了方便,直接给删除掉了,后续需要再重新插入。
while(child = Container.children[i++]){var index = child.getAttribute("data-index");// 这里记得不要把最后一个节点给删除掉了if((index > end || index < start) && index != len - 1){Container.removeChild(child);}
}
当 DOM 加载完毕之后,触发一次 Container.onscroll(),然后整个程序就 OK 了。
四、小结
本文主要是叙述大数据加载的一点基本原理,了解下算法就行了
大数据如何在前端流畅展示相关推荐
- AI和大数据下,前端技术将如何发展?
简介:2010年前后,各种大数据应用进入爆发期.如果说之前的Web应用更多地是在"产生"数据,那在2010年之后,如何更好地"展现"数据则被提上了新的高度,很多 ...
- 青春有你,成长同行——2022《大数据实践课》成果展示
1 实践单位:中国广核新能源控股有限公司 项目名称:基于机器学习的风电机组传动链故障诊断 小组成员: 高 祥 机械系(组长) 李艳文 机械系 范祥祺 工物系 研究目标:随着风电机组运行年限的增加,机 ...
- 数据库查询经常卡死?面对亿级大数据量,我是这么展示分析的
建议你们看到文末,不会亏待你们 日常一提数据分析和可视化,就想到这个工具操作要多简单易用,图表要多美多炫,然而总是忽略背后的数据支撑. excel 几十万行数据就卡死崩,谈何数据透视表.可视化? 近千 ...
- 大数据时代,前端开发者该如何提升自身竞争力(附教程视频)
重点在文尾!!! 提升技能是一条慢长而艰苦的道路,不能靠一时激情,也不是熬几天几夜就能学好的,必须养成平时努力学习的习惯.所以: 贵在坚持与选择! 这一天我不钓虾,东西也少吃.母亲很为难,没有法子想. ...
- 前端转行大数据?没必要
文/北妈 阅读本文需要 4.5分钟 一最近又有读者,问我要不要转去学大数据,好像前端和大数据一点不沾边.... 说实话我是无语的 文长,需耐心看完,读时有耐心,看完有信心. 这几年大数据和机器学习一直 ...
- 国家大数据(贵州)综合试验区展示中心正式开馆
国家大数据(贵州)综合试验区展示中心(简称"展示中心")正式开馆.展示中心是贵州.贵阳大数据产业发展的微缩景观,将作为贵州大数据展示窗口,打造全国乃至世界重要的大数据展示交流.共享 ...
- 大数据平台展示可视化效果,echarts图表实战项目(源码50套)
本文重点介绍HTML5图表框架echarts入门Demo及实战项目(含源码),以此来实现echarts大屏展示大数据平台可视化酷炫效果. 缘起:最近接了个任务需要用H5在前台两个大电视上做两页数据展示 ...
- 一篇文章读懂什么是大数据
大数据概述 如果说,作为目前IT行业最火热.薪资最具有发展前景的两个方向--大数据和人工智能.现在甚至火热到凡是一个公司,都在说自己做大数据相关的业务,那么作为当前时代的程序员,我们应当了解,什么是大 ...
- 数据分析:大数据时代的必备技能之Tableau
文章目录 BI 可视化明星 - Tableau 一.前言 1.Tableau 和 BI 有什么关系? 2.为什么要学习 Tableau ? 二.Tableau 商业数据分析 1.Tableau 简介 ...
最新文章
- 《预训练周刊》第4期:智源「悟道1.0」发布、GPT-3对新一代APP的赋能路径
- client-go使用实例
- Idea中一个服务按多个端口同时启动
- ftp 上传文件夹_ftp工具哪个好?Viper FTP for Mac激活版带给大家
- tab切换实现方式1
- 在CentOS上安装MongoDB
- JUnit与TestNG:您应该选择哪种测试框架?
- 拉取远程分支_git clone切换分支步骤,代理设置,作者信息设置
- 建议提交的时候默认保存到剪贴板
- mysql性能优化较佳实践_MySQL性能优化的21个最佳实践 和 mysql使用索引
- 【2020牛客寒假基础算法训练营】第五场总结
- 如何写一篇学术研讨会级的论文
- 英语语法快速入门1--简单句(附思维导图)
- vue实现拍照人脸识别功能带人脸选中框
- sqlserver获取周数
- 里氏替换原则——举例说明Java设计模式中的里氏替换原则
- SQLServer The datediff function resulted in an overflow
- 送书 | Python最优算法实战
- 论文阅读003:《Learning local feature descriptors with triplets and shallow convolutional neural networks》
- Karas中LSTM模型的各个参数的含义