用quicker-worker.js輕松跑一個大數據遍歷

qpwoeiru96 發布于2019-08-20 18:19 / 723人閱讀

摘要：之所以在遍歷的時候被卡住，就是因為我們遍歷的時候，占用主線程，導致其他程序無法進行。因此，將主線程中一個可能需要用到的計算移到另外一個線程中，主線程程序可以無縫繼續執行，通過來接收線程返回的數據，做到無縫對接。

最近在給公司的grid組件進行性能測試和改善，其中非常重要的一個點就是grid加載100k級別的數據時，竟然出現的狀況是，渲染不是問題，初始化的時候遍歷數據才是問題。

之所以渲染不是問題，是因為組件采用了特殊的渲染方式，它并沒有把所有數據一次性渲染到可視區域中，而是通過滾動條的計算，找出對應應該顯示的那些條目，僅僅渲染了部分數據，所以加入的DOM節點就少到可憐，自然快很多。

現在的問題，完全放在了初始化的時候，要對這么大的數據量進行遍歷，并且對每一個cell的數據執行format操作，可想而知，在不同的機器上，性能自然受到很大的影響。

我所采用的解決方案，是利用HTML5的新特性web worker來解決。worker的應用場景本來就是在backend進行大規模或持久化計算，用在這里正好。之所以在遍歷的時候被卡住，就是因為我們遍歷的時候，占用js主線程，導致其他程序無法進行。就算使用Promise優化，也會因為排隊造成排隊之后的操作被卡住。worker是在主線程之外另外開了一個線程，和主線程完全隔離，因此在內存分配上和進程占用上都不一樣，worker線程中的程序執行完全不影響主線程中的執行。因此，將主線程中一個可能需要用到500+ms的計算移到另外一個線程中，主線程程序可以無縫繼續執行，通過Promise來接收worker線程返回的數據，做到無縫對接。

下面來看具體實現：

1 獲取quicker-worker源碼

quicker-worker是我在結合了自己對其他開發者的代碼閱讀之后撰寫的兩個函數，站在前人的肩膀上倍感愉悅～

你可以通過 https://github.com/tangshuang... 獲取源碼。

2 使用run函數

在quicker-worker的readme中我詳細闡述了它的使用方法，這里就不具體介紹，為了解決上面的grid的問題，我們使用run函數來實現對grid組件的改造。

在grid組件中，有一個遍歷，在遍歷過程中，對每一個元素進行format。我們如下進行操作：

// .. 其他初始化
run(`function(data, formatter) {
    data.forEach(function(item) {
        formatter(item)
    })
    return data
}`, [data, formatter])
.then(data => {
    this.set(data)
    // .. 后續操作
})

就是這么簡單，沒有任何拖泥帶水的操作，就像一個promise一樣。

使用quicker-worker還可以實現非常漂亮的后臺監控，每隔一段時間去查詢數據是否變化。

let wk = create(`function(data, compare) {
  return $xhr.get("/api/books").then(function(res) {
    if (compare(data, res)) return res
  })
}`, {
  interval: 60*1000,
  xhr: true,
})
wk.invoke([data, compare]).then(newdata => {
  if (newdata) updateData(newdata)
})

就是這么簡單。如果你有什么疑問，可以在github上給我提issue。關注我的博客 www.tangshuang.net 給我留言。

托管Hadoop集群 USDP大數據平臺大數據時代我們活著更輕松大數據時代我們活得不輕松云環境跑大數據服務器云服務器跑大數據程序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84350.html

從簡歷被拒到收割今日頭條 offer，我用一年時間破繭成蝶！

摘要：正如我標題所說，簡歷被拒。看了我簡歷之后說頭條競爭激烈，我背景不夠，點到為止。。三準備面試其實從三月份投遞簡歷開始準備面試到四月份收，也不過個月的時間，但這都是建立在我過去一年的積累啊。本文是無精瘋同學投稿的面試經歷關注微信公眾號：進擊的java程序員K，即可獲取最新BAT面試資料一份在此感謝無精瘋同學的分享目錄：印象中的頭條面試背景準備面試 ...

tracymac7 2019-08-15 17:57 評論0 收藏0
從簡歷被拒到收割今日頭條 offer，我用一年時間破繭成蝶！

摘要：正如我標題所說，簡歷被拒。看了我簡歷之后說頭條競爭激烈，我背景不夠，點到為止。。三準備面試其實從三月份投遞簡歷開始準備面試到四月份收，也不過個月的時間，但這都是建立在我過去一年的積累啊。本文是無精瘋同學投稿的面試經歷關注微信公眾號：進擊的java程序員K，即可獲取最新BAT面試資料一份在此感謝無精瘋同學的分享目錄：印象中的頭條面試背景準備面試頭條一面（Java+項目）頭條...

wdzgege 2019-08-19 11:43 評論0 收藏0
一道簡單的多維數組取值問題

摘要：問題簡述給予一個多維數組和一個描述取值路徑的一維數組通過調用函數返回取值路徑描述的值，如原問題傳送門之所以想記錄一下是因為之前有在刷題的習慣，后來工作忙就怠慢了，今天閑來無事就準備刷幾道玩玩，然后就挑了一個比較簡單的中的難度評級的題。問題簡述給予一個多維數組和一個描述取值路徑的一維數組, 通過調用函數f返回取值路徑描述的值，如f([[1, 2], [3, 4], [5, 6]], ...

tracymac7 2019-08-22 11:20 評論0 收藏0
python的一些誤區

摘要：忽略了的版本這是一個在上不斷被人提起的問題。不幸的是它只運行在系統上。誤解了全局解釋器鎖意味著只有一個線程在一個程序可以運行在任何時間。規定的解決方案是使用模塊。濫用使得上的一個大神花了很多時間去解決它。這可能會產生一些非常不必要的后果。原文鏈接放在這里:1: http://nafiulis.me/potential-pythonic-pitfalls.html 很多問題沒搞懂，先放...

yimo 2019-07-24 17:59 評論0 收藏0
[爬蟲手記] 我是如何在3分鐘內開發完一個爬蟲的

摘要：前言開發爬蟲是一件有趣的事情。的可配置爬蟲是基于的，因此天生是支持并發的。遵守協議這個默認是開啟的。的可配置爬蟲降低了爬蟲的開發時間，增加了爬蟲開發效率，完善了工程化水平，將爬蟲工程師從日常的繁瑣配置工作中解放出來。前言開發爬蟲是一件有趣的事情。寫一個程序，對感興趣的目標網站發起HTTP請求，獲取HTML，解析HTML，提取數據，將數據保存到數據庫或者存為CSV、JSON等格式，再...

sushi 2019-07-31 10:28 評論0 收藏0