TalkingData馬驥出席QCon,分享前端黑科技

導讀

TalkingData研發副總裁馬驥近日出席QCon全球軟體開發大會北京站，並在會上做了以《2018，你不知道的前端黑科技》為主題的演講。

QCon全球軟體開發大會由極客邦科技與InfoQ中國主辦，致力於分享和交流新技術在行業應用中的最新實踐，助力企業技術選型、業務升級與順利轉型。本次北京站大會規模再創新高，匯聚來自300餘家企業的2500餘名技術人，其中80%以上的參會者為資深技術人；擔任出品人及演講嘉賓的技術專家超過200名，90%的專家擁有10年以上從業經驗，多來自國內外行業領軍企業和創新技術公司。

在Web技術發展的近20年來，有高潮也有低谷。當遇到瓶頸時，必須要用創新的思路及想法去解決，才能形成突破。在大會次日的「技術創新與前沿應用專場」中，TalkingData研發副總裁馬驥以《2018，你不知道的前端黑科技》為主題，分享TalkingData近幾年在大數據Web開發中一些創新和突破，包括繪製百萬行的數據表格、位置大數據地圖矢量繪製、Web端數據科學實踐及Web端並行計算框架設計。

平滑流暢的繪製百萬行數據表格

馬驥表示，根據產品需求，要求以表格形式繪製百萬條超大體量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的架構實踐中，通過增加前端能力，通過前後端協同提升整體性能，進而將伺服器端的很多能力轉移到客戶端去實現，使客戶端也具有計算能力，實現業務邏輯和計算能力逐漸上移。

推薦閱讀：