資訊專欄INFORMATION COLUMN
摘要：之所以在遍歷的時候被卡住，就是因為我們遍歷的時候，占用主線程，導(dǎo)致其他程序無法進行。因此，將主線程中一個可能需要用到的計算移到另外一個線程中，主線程程序可以無縫繼續(xù)執(zhí)行，通過來接收線程返回的數(shù)據(jù)，做到無縫對接。
最近在給公司的grid組件進行性能測試和改善，其中非常重要的一個點就是grid加載100k級別的數(shù)據(jù)時，竟然出現(xiàn)的狀況是，渲染不是問題，初始化的時候遍歷數(shù)據(jù)才是問題。
之所以渲染不是問題，是因為組件采用了特殊的渲染方式，它并沒有把所有數(shù)據(jù)一次性渲染到可視區(qū)域中，而是通過滾動條的計算，找出對應(yīng)應(yīng)該顯示的那些條目，僅僅渲染了部分?jǐn)?shù)據(jù)，所以加入的DOM節(jié)點就少到可憐，自然快很多。
現(xiàn)在的問題，完全放在了初始化的時候，要對這么大的數(shù)據(jù)量進行遍歷，并且對每一個cell的數(shù)據(jù)執(zhí)行format操作，可想而知，在不同的機器上，性能自然受到很大的影響。
我所采用的解決方案，是利用HTML5的新特性web worker來解決。worker的應(yīng)用場景本來就是在backend進行大規(guī)?；虺志没嬎悖迷谶@里正好。之所以在遍歷的時候被卡住，就是因為我們遍歷的時候，占用js主線程，導(dǎo)致其他程序無法進行。就算使用Promise優(yōu)化，也會因為排隊造成排隊之后的操作被卡住。worker是在主線程之外另外開了一個線程，和主線程完全隔離，因此在內(nèi)存分配上和進程占用上都不一樣，worker線程中的程序執(zhí)行完全不影響主線程中的執(zhí)行。因此，將主線程中一個可能需要用到500+ms的計算移到另外一個線程中，主線程程序可以無縫繼續(xù)執(zhí)行，通過Promise來接收worker線程返回的數(shù)據(jù)，做到無縫對接。
下面來看具體實現(xiàn)：
1 獲取quicker-worker源碼
quicker-worker是我在結(jié)合了自己對其他開發(fā)者的代碼閱讀之后撰寫的兩個函數(shù)，站在前人的肩膀上倍感愉悅～
你可以通過 https://github.com/tangshuang... 獲取源碼。
2 使用run函數(shù)
在quicker-worker的readme中我詳細(xì)闡述了它的使用方法，這里就不具體介紹，為了解決上面的grid的問題，我們使用run函數(shù)來實現(xiàn)對grid組件的改造。
在grid組件中，有一個遍歷，在遍歷過程中，對每一個元素進行format。我們?nèi)缦逻M行操作：
// .. 其他初始化
run(`function(data, formatter) {
data.forEach(function(item) {
formatter(item)
})
return data
}`, [data, formatter])
.then(data => {
this.set(data)
// .. 后續(xù)操作
})
就是這么簡單，沒有任何拖泥帶水的操作，就像一個promise一樣。
使用quicker-worker還可以實現(xiàn)非常漂亮的后臺監(jiān)控，每隔一段時間去查詢數(shù)據(jù)是否變化。
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。關(guān)注我的博客 www.tangshuang.net 給我留言。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/84350.html
摘要：正如我標(biāo)題所說，簡歷被拒?？戳宋液啔v之后說頭條競爭激烈，我背景不夠，點到為止。。三準(zhǔn)備面試其實從三月份投遞簡歷開始準(zhǔn)備面試到四月份收，也不過個月的時間，但這都是建立在我過去一年的積累啊。 本文是 無精瘋 同學(xué)投稿的面試經(jīng)歷 關(guān)注微信公眾號：進擊的java程序員K，即可獲取最新BAT面試資料一份 在此感謝 無精瘋 同學(xué)的分享 目錄： 印象中的頭條 面試背景 準(zhǔn)備面試 ...
摘要：正如我標(biāo)題所說，簡歷被拒?？戳宋液啔v之后說頭條競爭激烈，我背景不夠，點到為止。。三準(zhǔn)備面試其實從三月份投遞簡歷開始準(zhǔn)備面試到四月份收，也不過個月的時間，但這都是建立在我過去一年的積累啊。 本文是 無精瘋 同學(xué)投稿的面試經(jīng)歷 關(guān)注微信公眾號：進擊的java程序員K，即可獲取最新BAT面試資料一份 在此感謝 無精瘋 同學(xué)的分享目錄：印象中的頭條面試背景準(zhǔn)備面試頭條一面（Java+項目）頭條...
摘要：問題簡述給予一個多維數(shù)組和一個描述取值路徑的一維數(shù)組通過調(diào)用函數(shù)返回取值路徑描述的值，如原問題傳送門之所以想記錄一下是因為之前有在刷題的習(xí)慣，后來工作忙就怠慢了，今天閑來無事就準(zhǔn)備刷幾道玩玩，然后就挑了一個比較簡單的中的難度評級的題。 問題簡述 給予一個多維數(shù)組和一個描述取值路徑的一維數(shù)組, 通過調(diào)用函數(shù)f返回取值路徑描述的值，如f([[1, 2], [3, 4], [5, 6]], ...
摘要：忽略了的版本這是一個在上不斷被人提起的問題。不幸的是它只運行在系統(tǒng)上。誤解了全局解釋器鎖意味著只有一個線程在一個程序可以運行在任何時間。規(guī)定的解決方案是使用模塊。濫用使得上的一個大神花了很多時間去解決它。這可能會產(chǎn)生一些非常不必要的后果。 原文鏈接放在這里:1: http://nafiulis.me/potential-pythonic-pitfalls.html 很多問題沒搞懂，先放...
摘要：前言開發(fā)爬蟲是一件有趣的事情。的可配置爬蟲是基于的，因此天生是支持并發(fā)的。遵守協(xié)議這個默認(rèn)是開啟的。的可配置爬蟲降低了爬蟲的開發(fā)時間，增加了爬蟲開發(fā)效率，完善了工程化水平，將爬蟲工程師從日常的繁瑣配置工作中解放出來。 前言 開發(fā)爬蟲是一件有趣的事情。寫一個程序，對感興趣的目標(biāo)網(wǎng)站發(fā)起HTTP請求，獲取HTML，解析HTML，提取數(shù)據(jù)，將數(shù)據(jù)保存到數(shù)據(jù)庫或者存為CSV、JSON等格式，再...
閱讀 1101·2021-10-11 10:59
閱讀 3685·2021-09-26 09:55
閱讀 946·2019-08-30 15:55
閱讀 2712·2019-08-30 15:44
閱讀 486·2019-08-30 14:06
閱讀 774·2019-08-30 11:26
閱讀 3404·2019-08-30 10:49
閱讀 2621·2019-08-29 12:53
