大数据调度前端页面

『壹』 大数据需要学习前端吗

不需要学习很精通，但是要了解代码结构，可以学习java基础和数据库

『贰』 如何在网页上实现千万级别的大数据可视化渲染

实现千万级别的大数据可视化渲染技巧：

借助Echarts、HighCharts、D3.js等开源的可视化插件，嵌入代码，开发成插件包，可视化工程师和前端开发常用。

代表工具FineReport（www.finereport.com），通用的报表制作和数据可视化工具，是一个开放的商业报表工具。好比Excel，小到可以存储统计数据、制作各式各样的图表、dashboard，大到制作财务报表、开发进销存系统。大家若不熟悉，可自行和Excel绑定对比。

Vue的背后

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。用Vue的时候不需要开发者全部学会，而是学一部分就可以用一部分，就可以简单概括为渐进式的前端框架。

『叁』 js大数据量如何实现页面的局部渲染（不是局部刷新）--解决方法

把看到的区域当画布，创建足够能展现界面的Dom就够了。
比如一个屏幕的高度一般是800像素左右，假设一条记录占用的高度是20像素，我们只用创建40个对象即可。
接下来就是对这40个对象进行数据填充，通过滚动条调整填充数据的起始下标。
10W条记录，IE下有些卡
<style type="text/css">
.panel{
overflow:scroll;
width:200px;
height:80%;
}
.panel .scroll{
}
.item{
width:500px;
height:20px;
}
.odd{
background-color:#ccc;
}
.items{
overflow:hidden;
position:absolute;
}
.red{
color:red;
}
.green{
color:green;
}
</style>
<script>
window.console = window.console || { log: function() {} };

function absolutePoint(element) {
var result = [element.offsetLeft, element.offsetTop];
element = element.offsetParent;
while (element) {
result[0] += element.offsetLeft;
result[1] += element.offsetTop;
element = element.offsetParent;
}
return result;
}
function ListView(options){
options = options || {};

var self = this,
$C = function(tagName) { return document.createElement(tagName); }, // 创建节点
p,
height,
item_height, // 项高
view_count, // 可见项条数
parent = options.parent || document.body, // 容器
height, // 面板历史高度
div_panel = $C("div"),
div_scroll = $C("div"),
div_items = $C("div"),
div_items_list = [$C("div")],
freed = [div_panel, div_scroll, div_items]; // 可释放的对象

div_panel.className = "panel";
parent.appendChild(div_panel);

div_items.className = "items";
document.body.appendChild(div_items);

div_scroll.className = "scroll";
div_panel.appendChild(div_scroll);

div_panel.onscroll = function() {
doChange();
}
div_panel.onresize = function() {
doChange();
}

div_items_list[0].className = "item";
div_items.appendChild(div_items_list[0]);

div_scroll.style.width = div_items_list[0].clientWidth + "px";
item_height = div_items_list[0].clientHeight;

p = absolutePoint(div_panel);
with(div_items.style) {
left = p[0] + "px";
top = p[1] + "px";
width = div_panel.clientWidth;
height = div_panel.clientHeight;
}
/**
* 界面改变
*/
function doChange() {
if (!item_height) return;
var i, div;
if (height != div_panel.clientHeight) {
height = div_panel.clientHeight;
view_count = parseInt(height / item_height);
for (i = div_items_list.length; i < view_count; i++) {
div = $C("div");
div.className = "item" + (i % 2 == 0 ? "" : " odd");
div_items.appendChild(div);
div_items_list.push(div);
}
for (i = 0; i < div_items_list.length; i++) {
div_items_list[i].style.display = i < view_count ? "" : "none";
}
div_scroll.style.height = div_panel.clientHeight + options.count - view_count + "px";
console.log(["view_count", view_count]);
}
div_items.scrollLeft = div_panel.scrollLeft;
if (!options.ondrawitem) return;
i = Math.min(view_count, div_items_list.length);
while(i--) {
// 重新绘制
options.ondrawitem(i + div_panel.scrollTop, div_items_list[i]);
}
}

doChange();
this.doChange = doChange;
/**
* 释放Dom对象
*/
this.dispose = function() {
var i = freed.length;
while(i--) {
freed[i].parentNode.removeChild(freed[i]);
}
i = freed.length;
while(i--) {
div_items_list[i].parentNode.removeChild(div_items_list[i]);
}
}
}
function format(template, json) {
if (!json) return template;
return template && template.replace(/\$\{(.+?)\}/g, function() {
return json[arguments[1]];
})
}
window.onload = function() {
var i = 100000, data = new Array(i);
while(i--) {
data[i] = { index: i, random: Math.random(), key: (+new Date()).toString(36) };
}
var listview = new ListView({
count: data.length,
ondrawitem: function(i, div) {
div.innerHTML = format(" <em>${index} </em> <span class=\"red\">${random} </span> <span class=\"green\">${key} </span>", data[i]);
}
});
};
</script>

『肆』 js大数据量如何实现页面的局部渲染（不是局部刷新）

不知道你所说的“实现局部渲染”是什么意思，
不就是加载时间太长了?
这里要优化的，回肯定是你的js代码,
比如答，尽量减少对document的操作次数(可组装成一条或几条记录后，再将生成的html添加到document,而不是一边组装一边添加)
另外可以对1000多条数据分页啊！

『伍』 前端处理较大数据量防止页面卡死的方法

把数组分割一下，然后把数据一段一段的显示到页面，可利用 window.requestAnimationFrame或者setInterval不断填充数据；

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在 下次重绘之前 调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行；

原文

『陆』 前端怎么优化大数据页面

1.减少HTTP请求次数

尽量合并图片、CSS、JS。比如加载一个页面，如果有5个css文件的话，那么会发出5次http请求，这样会让用户第一次访问你的页面的时候会长时间等待。而如果把这个5个文件合成一个的话，就只需要发出一次http请求，节省网络请求时间，加快页面的加载。

2.使用CDN

网站上静态资源即css、js全都使用cdn分发，图片亦然。

3.避免空的src和href

当link标签的href属性为空、script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的URL作为它们的属性值，从而把页面空袜巧的内容加载进来作为它斗键们的值。所以要避免犯这样的疏忽。

4.为文件头指定Expires

Exipres是用来设置文件的好乎过期时间的，一般对css、js、图片资源有效。他可以使内容具有缓存性，这样下回再访问同样的资源时就通过浏览器缓存区读取，不需要再发出http请求

『柒』 前端怎么优化大数据页面

显示三屏数据，其他的移除DOM。

如果要陆蠢在前端呈现大量的数据，一般的策略就是分页。前端要呈早凳陪现百万数据，这个需求是很少见的，但是展示千条稍微复杂粗庆点的数据，这种需求还是比较常见，只要内存够，javascript肯定是吃得消的，计算几千上万条数据，js效率根本不在话下，

『捌』 如何进行大数据分析及处理

探码科技大数据分析及处理过程

聚云化雨的处理方式

• 聚云：探码科技全面覆盖各类数据的处理应用。以数据为原料，通过网络数据采集、生产设备数据采集的方式将各种原始数据凝结成云，为客户打造强大的数据存储库；

• 化雨：利用模型算法和人工智能等技术对存储的数据进行计算整合让数据与算法产生质变反应化云为雨，让真正有价值的数据流动起来；

• 开渠引流，润物无声：将落下“雨水”汇合成数据湖泊，对数据进行标注与处理根据行业需求开渠引流，将一条一条的数据支流汇合集成数据应用中，为行业用户带来价值，做到春风化雨，润物无声。

『玖』 针对前端大数据量处理（如10W+）

一般对两个数组做做交集和并集处理用遍历方法一般就是通过遍历for等方法，但是如果遇到大数据量（10万条数据）就会用到很长的时间和耗费内存，因为javascrip为单线程，会影响到用户的体验和页面渲染、逻辑处理等问题！

使用定时器去让大数据遍历的时候能分成很多个异步方法(每个异步方法去遍历大数据数组的一部分数据)去执行，互相也不影响，并监听到所有异步方法执行完成再进行下一步处理！岂不美滋滋！

之前方法

使用for循环一次性遍历0W条数据来查找交集和并集，发现使用的时间能达到10S左右（相当影响体验感受和逻辑处理）

方法优化 DataProcessing 类

// 测试数据

63毫秒！ 可以对DataProcessing进行更多的扩展！

多学习、多看报、多运动，不对的地方望指出来，谢谢

『拾』 Hadoop 和 BI 如何结合搭建一个基于 Hadoop+Hive 的数据仓库，它的前端展现如何实现如何实现 BI

刚好不久前做过一个，使用hadoop+hive+elasticsearch给公司做的BI。

过程是这样的：

1. 数据由产生端向数据收集服务器发送请求，json文本形式存在收集服务器磁盘上。
   

2. 定时任务，通过MR Job将数据清洗整理修复分类，云端持久化，之后的数据作为BI的基础数据存入hive。

3. 定时任务，每天跑hive sql（写了一个动态渲染sql语句的引擎），更新累积表，并分析出具体各个指标的分析结果，存入elasticsearch。

4. 前端用的highcharts，jquery请求后端，传入一些范围限制条件，后端拿到限制条件组出查询语句，从ES中取出符合的结果，返给前端。

5. 前端展现，即是分类的指标，筛选条件，指标内有图表和详细数据，以及多条件多指标横纵对比，导出等等。