:::: MENU ::::

TalkingData's Blog

现在开始,用数据说话。

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

cialis erfaring cialis i norge hva er kamagra cialis efeitos secundarios cialis bula viagra effekt viagra norge viagra på nett viagra nettbutikk viagra infarmed levitra comprimidos cialis uten resept cialis pris levitra eller cialis kamagra gel comprar viagra farmacia
  • Apr 25 / 2018
  • 0
Data, Enterprise, News

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架构图

Leave a comment

随时欢迎您 联系我们