TalkingData研发副总裁马骥近日出席QCon全球软件开发大会北京站，并在会上做了以
《2018，你不知道的前端黑科技》为主题的演讲。QCon全球软件开发大会由极客邦科技与InfoQ中国主办，致力于分享和交流新技术在行业应用中的最新实践，助力企业技术选型、业务升级与顺利转型。本次北京站大会规模再创新高，汇聚来自300余家企业的2500余名技术人，其中80%以上的参会者为资深技术人；担任出品人及演讲嘉宾的技术专家超过200名，90%的专家拥有10年以上从业经验，多来自国内外行业领军企业和创新技术公司。
QCon北京2018
在Web技术发展的近20年来，有高潮也有低谷。当遇到瓶颈时，必须要用创新的思路及想法去解决，才能形成突破。在大会次日的“技术创新与前沿应用专场”中，TalkingData研发副总裁马骥以《2018，你不知道的前端黑科技》为主题，分享TalkingData近几年在大数据Web开发中一些创新和突破，包括绘制百万行的数据表格、位置大数据地图矢量绘制、Web端数据科学实践及Web端并行计算框架设计。
TalkingData研发副总裁 马骥
平滑流畅的绘制百万行数据表格
马骥表示，根据产品需求，要求以表格形式绘制百万条超大体量POI数据显示。首先遇到的瓶颈是DOM渲染，当数据量达到一万两万、甚至十几万的时候，表格非常卡顿，且CPU占用率极高。
通过排查，发现问题在于所使用的VUE框架下getter和setter所做的数据双向绑定。当所绑定的数据集非常大时，性能就会出现问题。
最后改为使用Object.preventExtensions、Object.seal、Object.freeze（扩展对象、密封对象、冻结对象），解决了性能问题，实现了百万行表格的平滑展现，良好承载了对地图和表格之间很重的检索需求。最终效果是，当击右侧一行数据，对应的地图POI点可以高亮显示；反之，点击地图上POI点要显示在数据表格里对应的数据，交互体验超出预期。
Web端数据科学实践
1、自动化配色
马骥认为，自动化是web端很好的数据科学场景。在TalkingData去年开源的地图可视化组件InMap中，对通过自动化提升效率做了重点尝试。据分析，很多数据分析师要花30%的工作量去调整数据可视化的样式，比如调整地图的配色上，这对非设计专业的人来说非常痛苦。如果能提供自动化的配色方案，则会能在很大程度上降低这一成本。
在TalkingData的实践中，要先对数据形态进行判断，用四分位以及平均数初步判断数据形态的分布和趋势，用大数据评估是指数型还是线型。然后用色谱通过获取面积等分点模型获取设置区间，最后通过自定义自动化完成自动配色。
2、异常数据检测
大数据永远都会有异常，而数据能否使用，需要进行检测，最基础的就是数据类型的检测。
马骥分享，TalkingData通过统计学模型——四分位的法则去做相对比较宽松的验证，比如四分位、上四分位和下四分位之间的三倍。
针对其中最为复杂的异常位置数据检测，马骥带领的团队查询相关论文，将Python版本翻译成JavaScript版本实现，原理是计算两点一线的距离，当距离越大时则密度越低，当距离越小则密度越大，这样就可以将异常点计算出来。
Web端并行计算架构设计
马骥认为，web端的密集型计算是可视化的挑战，其瓶颈在于JavaScript本身，因为JavaScript是一个单线程语言，这就导致一方面CPU的利用率偏低，另一方面密集计算执行需要等待。
在TalkingData InMap的架构实践中，通过增加前端能力，通过前后端协同提升整体性能，进而将服务器端的很多能力转移到客户端去实现，使客户端也具有计算能力，实现业务逻辑和计算能力逐渐上移。
InMap架构图
閱讀更多 TalkingData 的文章
