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