快捷導(dǎo)航

js性能優(yōu)化之?dāng)?shù)組模式實(shí)例詳解

更新時(shí)間：2023年10月17日 14:18:36 作者：Winn

這篇文章主要為大家介紹了js性能優(yōu)化之?dāng)?shù)組模式實(shí)例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

實(shí)例

首先我們來看看下面這兩段代碼，兩段代碼都是在初始化一個(gè)長度為1億的數(shù)組，唯一區(qū)別是在片段二中，先為最后一項(xiàng)賦值1次，大家覺得會有區(qū)別嗎？

代碼一：

const arr1 = [];
for ( let i = 0; i < 100000000; ++i ) {
  arr1[i] = 1;
}

代碼二：

const arr2 = [];
arr2[100000000 - 1] = 1;
for ( let i = 0; i < 100000000; ++i ) {
  arr2[i] = 1;
}

我們來嘗試執(zhí)行一下：

可以看到片段二比片段一要耗時(shí)多出許多，片段一的耗時(shí)是318毫秒，片段二的耗時(shí)是1343毫秒，中間僅僅因?yàn)槠味葹樽詈笠豁?xiàng)賦值了1次。

片段二之所以會多出這部分的耗時(shí)，歸根結(jié)底是因?yàn)関8會以不同的形式去存儲js的數(shù)組。

第一種模式是快速模式，V8對應(yīng)用c語言的數(shù)組來對js的數(shù)組進(jìn)行存儲，具備速度快，緊湊的特點(diǎn)。

第二種模式是字典模式，v8 對應(yīng)用c語言的哈希表來對js的數(shù)組進(jìn)行存儲，特點(diǎn)是速度慢松散。

兩種模式的觸發(fā)機(jī)制

如果數(shù)組從首位到最后一位是緊湊的，中間無空洞；或者預(yù)分配給數(shù)組的大小，小于10萬，無論中間有沒有空洞，都會進(jìn)入快速模式。

但是如果預(yù)分配給數(shù)組的大小，大于等于10萬，且中間有空洞，這樣就會把數(shù)組進(jìn)入字典模式。

我們再回到最開始的例子：

例子的邏輯是，首先我們定義一個(gè)數(shù)組，再為數(shù)組的最后一位賦1，在這個(gè)時(shí)候，這個(gè)數(shù)組已經(jīng)具備了一定的長度，而且這個(gè)長度是大于10萬的，而且這個(gè)數(shù)組中間是有非常多的空洞，只有最后一位有數(shù)字。這就意味著在這段片段里面執(zhí)行完之后，數(shù)組就會在v8里面去進(jìn)入了字典模式，而字典模式的特點(diǎn)是松散，而且執(zhí)行相對比較慢，就會導(dǎo)致前面的一段時(shí)間耗時(shí)會多出許多，這就是底層的原因。

優(yōu)化策略：

從0開始連續(xù)的初始化數(shù)組，以避免數(shù)組進(jìn)入字典模式。

不要預(yù)分配一個(gè)超大數(shù)組 (比如長度大于等于 100000)

刪除數(shù)組元素時(shí)讓數(shù)組保持緊湊，盡可能避免使用 delete。

不要訪問未初始化或已刪除的數(shù)組元素。

以上就是js性能優(yōu)化之?dāng)?shù)組模式實(shí)例詳解的詳細(xì)內(nèi)容，更多關(guān)于js性能優(yōu)化數(shù)組模式的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: