JS前端千萬級彈幕數(shù)據(jù)循環(huán)優(yōu)化示例
引言
最近做了直播相關(guān)的業(yè)務(wù),然后對于大數(shù)據(jù)相關(guān)的優(yōu)化做了一下復(fù)盤。
為了了解我是怎么做這個優(yōu)化的,我們先從如何按照特定的條件刪除一個數(shù)組說起。
1、如何刪除數(shù)組中的元素
場景:有一個數(shù)組,需要刪除滿足條件的數(shù)組。
示例:
const arr = [1,2,3,4,5,6,7,8]
刪除小于5的元素,刪除后的元素為
const arr2 = [5, 6, 7, 8]
代碼實現(xiàn):
const arr = [1,2,3,4,5,6,7,8] for(let i = 0, len = arr.length; i < len; i++) { if(arr[i] < 5) { arr.splice(i, 1) } }
結(jié)果如下
arr = [2, 4, 5, 6, 7, 8
不是我們預(yù)期的結(jié)果
分析原因:刪除操作會使得對應(yīng)索引值位上的元素清空,整個數(shù)組中的元素向前移動一位,補位的元素會填充到執(zhí)行刪除操作的索引值位置上,移位之后如果不進行任何操作繼續(xù)下一個循環(huán),會導(dǎo)致補位元素跳過遍歷,為了防止這種補位元素跳過遍歷現(xiàn)象,應(yīng)該在刪除操作后將索引值減1,對執(zhí)行刪除操作的索引值位置再進行一次遍歷 。
改進:
const arr = [1,2,3,4,5,6,7,8] for(let i = 0, len = arr.length; i < len; i++) { if(arr[i] < 5) { arr.splice(i, 1) i--; } } // arr = [5, 6, 7, 8] 符合預(yù)期
這個是做了正序循環(huán)刪除,也可以使用倒序循環(huán)刪除:
const arr = [1,2,3,4,5,6,7,8] for(let i = arr.length - 1; i >= 0; i--) { if(arr[i] < 5) { arr.splice(i, 1) } } // arr = [5, 6, 7, 8] 符合預(yù)期
2、10000,000條消息如何優(yōu)化?
場景
彈幕消息發(fā)送場景模擬(偽直播形式,沒有進度條):假設(shè)我們有10000,000條消息,根據(jù)視頻播放的進度展示對應(yīng)的消息,不展示歷史消息。
常規(guī)思路:
循環(huán)遍歷整個消息列表,時刻監(jiān)聽視頻播放的進度,根據(jù)視頻播放的時間戳和消息發(fā)送的時間戳先相等,然后展示消息,依次循環(huán)。
產(chǎn)生的問題
每次視頻進度變化都會循環(huán)整個消息列表,當(dāng)循環(huán)還沒完成,下一個播放進度監(jiān)聽觸發(fā)了,又開始下一個循環(huán),這樣就會造成性能的損耗。
優(yōu)化策略
我們從上面的分析可以看出,當(dāng)消息發(fā)送了一條,就可以從原始數(shù)據(jù)刪除這條消息,然后跳出循環(huán),這樣循環(huán)的次數(shù)始終控制在幾次(或者幾十次)的范圍(有可能同一個時間段同時有幾條消息甚至幾十條消息)等下一個播放進度監(jiān)聽觸發(fā),開始循環(huán)原始數(shù)據(jù),這是之前以后發(fā)送過得數(shù)據(jù)刪除了,就不會再循環(huán)刪除過的數(shù)據(jù),始終循環(huán)需要發(fā)送的那幾條,找到了就直接跳出循環(huán)。
代碼實現(xiàn)
// 模擬原始消息列表, const newList = new Array(10000000).fill(1).map((item, index) => { return { time: (index + 1) * 1000, // 消息發(fā)送的時間,一秒一個 content: `這是第${index + 1}s發(fā)送的消息` // 消息發(fā)送的內(nèi)容 } }) // 發(fā)送的消息列表 const sendList = []; function getMessage(time) { let j = 0; // 循環(huán)次數(shù) for(let i = 0, len = newList.length; i < len; i++) { const item = newList[i]; j++; // 這里的time如果不是1000、2000,而是1234、1214這種,就需要取一個浮動范圍 // 我這里就是簡單用了定時器,所以比較簡單 if(item.time === time) { sendList.push(newList[i]) newList.splice(i, 1) i--; } else if(sendList.length > 0) { break; } } console.log('播放進度', time) console.log('循環(huán)的次數(shù)', j); console.log('接收的消息的長度', sendList.length, sendList); console.log('原始消息的長度', newList.length); } let time = 0; // 定時器,1s觸發(fā)一次 setInterval(() => { time += 1000; getMessage(time); }, 1000)
// 消息格式 newList = [ {time: 1000, content: '這是第1s發(fā)送的消息'}, {time: 2000, content: '這是第2s發(fā)送的消息'}, ... ]
效果展示
小結(jié)
上面優(yōu)化策略只有兩條
發(fā)送過的消息刪除,下次少循環(huán)。
當(dāng)找到滿足條件的數(shù)據(jù),直接跳出循環(huán),后面的數(shù)據(jù)不再循環(huán)。
缺點:使用slice也會消耗性能,不可取,并且操作繁瑣。
游標法代替splice
我們這里不再使用slice的方案,設(shè)置一個游標,記錄循環(huán)的初始位置,下次循環(huán)直接從游標記錄的位置開始循環(huán),然后滿足查找的條件就break,這樣既不破壞原來的數(shù)組,也能有效的減少循環(huán)的次數(shù)。
let index = 0, sendList =[]; function getMessage(time) { for(let i = 0, len = newList.length; i < len; i++) { const item = newList[i]; // 這里的time如果不是1000、2000,而是1234、1214這種,就需要取一個浮動范圍 // 我這里就是簡單用了定時器,所以比較簡單 if(item.time === time) { index = i; sendList.push(newList[i]) } else if(sendList.length > 0) { // 這里的查詢結(jié)束條件為,對應(yīng)的時間范圍之外沒有消息了,并且需要發(fā)送的消息列表有消息,才break // 這里的結(jié)束條件想不到什么更好的方案了 break; } } }
上面我們只對視頻播放的時候做了優(yōu)化,如果下次用戶進來進度直接接近尾聲了,這時候首次查找尾部消息的時候,就需要把前面所有的消息都循環(huán)一遍,所以還需要繼續(xù)優(yōu)化。
二分查找
當(dāng)首次加載的時候,采用二分法查找到消息開始的位置,當(dāng)視頻播放的時候再根據(jù)查找到的index去循環(huán)消息體。
function binarySearch(arr, time) { let upperBound = arr.length - 1; // 記錄長度 let lowerBound = 0; // 記錄上次二分的位置 let mid; // 切半分的位置 小于或等于 1就停止循環(huán)了 while (lowerBound <= upperBound) { // (當(dāng)前總長度 + 當(dāng)前中間點位置長度) / 2 = 實際的中間點位置 mid = Math.floor((upperBound + lowerBound) / 2); const item = arr[mid]; const maxTime = time + 500; const minTime = time + 500; // 當(dāng)輸入的值大于中間值時,向后移動一位 if (time > maxTime) { lowerBound = mid + 1; } else if (time < minTime) { // 當(dāng)輸入值小于中間值時,向前移動一位 upperBound = mid - 1; } else { return mid; // 找到指定數(shù)據(jù)位置 } } return -1; }
function findIndex(startPlayTime: number) { const searchIndex = binarySearch(this.messageList, time); // 賦值索引,用于快速發(fā)送消息 if (searchIndex !== -1) { index = searchIndex; } }
完結(jié)
寫到這里本篇文章就不再會更新了,從最開始的splice方法,然后到后面的游標法和二分法,做了逐漸的優(yōu)化。
這個也是在項目中每次迭代去做的優(yōu)化(前提是給你的排期你能有時間去做)。本文涉及的知識點可能并不是很重要,在這里我要跟大家說的是,我們平時在寫代碼的時候,要善于發(fā)現(xiàn)代碼的可優(yōu)化空間,如果你發(fā)現(xiàn)了并且實事求是的去做了,你的能力就會有更大的提高,而且這個發(fā)現(xiàn)的過程你可以找同事,找leader去給你review代碼,在業(yè)務(wù)中沉淀出來的代碼比你自己平時寫個小demo寫的代碼更能讓你成長。
更多關(guān)于JS前端數(shù)據(jù)循環(huán)優(yōu)化的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
基于JavaScript實現(xiàn)添加到購物車效果附源碼下載
這篇文章主要介紹了基于JavaScript實現(xiàn)添加到購物車效果附源碼下載的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-08-08JS對象序列化成json數(shù)據(jù)和json數(shù)據(jù)轉(zhuǎn)化為JS對象的代碼
這篇文章主要介紹了JS對象序列化成json數(shù)據(jù)和json數(shù)據(jù)轉(zhuǎn)化為JS對象的代碼,需要的朋友可以參考下2017-08-08axios使用攔截器統(tǒng)一處理所有的http請求的方法
這篇文章主要介紹了axios使用攔截器統(tǒng)一處理所有的http請求的方法,通過一段實例代碼給大家介紹了axios攔截器使用,代碼簡單易懂,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-11-11利用Vconsole和Fillder進行移動端抓包調(diào)試方法
這篇文章主要介紹了利用Vconsole和Fillder進行移動端抓包調(diào)試,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-03-03