TalkingData马骥出席QCon,分享前端黑科技

TalkingData研发副总裁马骥近日出席QCon全球软件开发大会北京站,并在会上做了以《2018,你不知道的前端黑科技》为主题的演讲。

QCon全球软件开发大会由极客邦科技与InfoQ中国主办,致力于分享和交流新技术在行业应用中的最新实践,助力企业技术选型、业务升级与顺利转型。本次北京站大会规模再创新高,汇聚来自300余家企业的2500余名技术人,其中80%以上的参会者为资深技术人;担任出品人及演讲嘉宾的技术专家超过200名,90%的专家拥有10年以上从业经验,多来自国内外行业领军企业和创新技术公司。

TalkingData马骥出席QCon,分享前端黑科技

QCon北京2018

在Web技术发展的近20年来,有高潮也有低谷。当遇到瓶颈时,必须要用创新的思路及想法去解决,才能形成突破。在大会次日的“技术创新与前沿应用专场”中,TalkingData研发副总裁马骥以《2018,你不知道的前端黑科技》为主题,分享TalkingData近几年在大数据Web开发中一些创新和突破,包括绘制百万行的数据表格、位置大数据地图矢量绘制、Web端数据科学实践及Web端并行计算框架设计。

TalkingData马骥出席QCon,分享前端黑科技

TalkingData研发副总裁 马骥

平滑流畅的绘制百万行数据表格

马骥表示,根据产品需求,要求以表格形式绘制百万条超大体量POI数据显示。首先遇到的瓶颈是DOM渲染,当数据量达到一万两万、甚至十几万的时候,表格非常卡顿,且CPU占用率极高。

通过排查,发现问题在于所使用的VUE框架下getter和setter所做的数据双向绑定。当所绑定的数据集非常大时,性能就会出现问题。

TalkingData马骥出席QCon,分享前端黑科技

最后改为使用Object.preventExtensions、Object.seal、Object.freeze(扩展对象、密封对象、冻结对象),解决了性能问题,实现了百万行表格的平滑展现,良好承载了对地图和表格之间很重的检索需求。最终效果是,当击右侧一行数据,对应的地图POI点可以高亮显示;反之,点击地图上POI点要显示在数据表格里对应的数据,交互体验超出预期。

Web端数据科学实践

1、自动化配色

马骥认为,自动化是web端很好的数据科学场景。在TalkingData去年开源的地图可视化组件InMap中,对通过自动化提升效率做了重点尝试。据分析,很多数据分析师要花30%的工作量去调整数据可视化的样式,比如调整地图的配色上,这对非设计专业的人来说非常痛苦。如果能提供自动化的配色方案,则会能在很大程度上降低这一成本。

TalkingData马骥出席QCon,分享前端黑科技

在TalkingData的实践中,要先对数据形态进行判断,用四分位以及平均数初步判断数据形态的分布和趋势,用大数据评估是指数型还是线型。然后用色谱通过获取面积等分点模型获取设置区间,最后通过自定义自动化完成自动配色。

2、异常数据检测

大数据永远都会有异常,而数据能否使用,需要进行检测,最基础的就是数据类型的检测。

马骥分享,TalkingData通过统计学模型——四分位的法则去做相对比较宽松的验证,比如四分位、上四分位和下四分位之间的三倍。

TalkingData马骥出席QCon,分享前端黑科技

针对其中最为复杂的异常位置数据检测,马骥带领的团队查询相关论文,将Python版本翻译成JavaScript版本实现,原理是计算两点一线的距离,当距离越大时则密度越低,当距离越小则密度越大,这样就可以将异常点计算出来。

Web端并行计算架构设计

马骥认为,web端的密集型计算是可视化的挑战,其瓶颈在于JavaScript本身,因为JavaScript是一个单线程语言,这就导致一方面CPU的利用率偏低,另一方面密集计算执行需要等待。

在TalkingData InMap的架构实践中,通过增加前端能力,通过前后端协同提升整体性能,进而将服务器端的很多能力转移到客户端去实现,使客户端也具有计算能力,实现业务逻辑和计算能力逐渐上移。

TalkingData马骥出席QCon,分享前端黑科技

InMap架构图

发表评论

电子邮件地址不会被公开。 必填项已用*标注