在本文中，我們將討論創(chuàng)建和訪問數(shù)據(jù)的方式可能對應(yīng)用程序性能的影響。

[[331885]]

介紹

JavaScript是一種非常高級的語言，在使用JavaScript開發(fā)的時候不必對存儲器中的數(shù)據(jù)存儲方式作過多的考慮。在本文中，我們將探討數(shù)據(jù)如何存儲在內(nèi)存中，以及JavaScript中分發(fā)和訪問數(shù)據(jù)的方式將如何影響CPU和內(nèi)存的性能。

浪漫三角

當(dāng)計算機(jī)需要進(jìn)行一些計算任務(wù)時，計算機(jī)處理單元(CPU)需要數(shù)據(jù)進(jìn)行處理，因此，根據(jù)手中的任務(wù)，它將發(fā)送請求到內(nèi)存以通過總線獲取待處理的數(shù)據(jù)，就像下面這樣：

這就是我們的浪漫三角

CPU->總線->內(nèi)存

浪漫三角需要第四個元素來保持穩(wěn)定

由于CPU比內(nèi)存快得多，因此從CPU->總線->內(nèi)存->總線->CPU這樣的處理方式就浪費(fèi)了很多計算時間，因?yàn)椴檎覂?nèi)存時，CPU處于空閑狀態(tài)而無法執(zhí)行其他操作。

緩存的出現(xiàn)有效的緩解了這個問題。在本文中我們不會詳細(xì)討論緩存的技術(shù)細(xì)節(jié)和類型，我們只需要知道緩存可以作為CPU的一個內(nèi)部存儲空間。

當(dāng)CPU接收到要運(yùn)行的命令時，它將首先在高速緩存中搜索目標(biāo)數(shù)據(jù)，如果沒有搜索到目標(biāo)數(shù)據(jù)，它再通過總線發(fā)起請求。

然后，總線將請求的數(shù)據(jù)加上一部分內(nèi)存，將其存儲在高速緩存中以供CPU快速調(diào)用。

這樣一來，CPU就能夠有效的處理數(shù)據(jù)，而不會浪費(fèi)時間等待內(nèi)存返回。

高速緩存的引用也可能導(dǎo)致新的問題

基于上面的架構(gòu)，我們在處理大量數(shù)據(jù)時可能會出現(xiàn)一種名為”高速緩存未命中”的錯誤。

高速緩存未命中意味著在計算期間，CPU發(fā)現(xiàn)高速緩存中沒有必要的數(shù)據(jù)，因此需要通過常規(guī)通道(即已知的慢速存儲器)來請求此數(shù)據(jù)。

上圖是一個很好的實(shí)例，在處理組中數(shù)據(jù)是，由于計算的數(shù)據(jù)超出了緩存限制的數(shù)據(jù)，就導(dǎo)致了緩存未命中。

可是這跟我作為JavaScript程序員有什么關(guān)系呢?

好問題，大多數(shù)情況下，我們JavaScript開發(fā)人員不必關(guān)心這個問題。但是隨著越來越多的數(shù)據(jù)涌入Node.js服務(wù)器甚至富客戶端，所以當(dāng)使用JavaScript遍歷大型數(shù)據(jù)集時就容易遇見緩存未命中的問題。

一個經(jīng)典的例子

接下來讓我們以一個例子作為說明。

這是一個叫做Boom的類：

class Boom { 
  constructor(id) { 
    this.id = id; 
  } 
  setPosition(x, y) { 
    this.x = x; 
    this.y = y; 
  } 
} 

此類(Boom)僅具有3個屬性：id，x和y。

現(xiàn)在，讓我們創(chuàng)建一個填充x和y的方法。

讓我們構(gòu)建設(shè)置：

const ROWS = 1000; 
const COLS = 1000; 
const repeats = 100; 
const arr = new Array(ROWS * COLS).fill(0).map((a, i) => new Boom(i)); 

現(xiàn)在，我們將在一種方法中使用此設(shè)置：

function localAccess() { 
  for (let i = 0; i < ROWS; i++) { 
    for (let j = 0; j < COLS; j++) { 
      arr[i * ROWS + j].x = 0; 
    } 
  } 
} 

本地訪問的作用是線性遍歷數(shù)組并將x設(shè)置為0。

如果我們重復(fù)執(zhí)行此功能100次(請查看設(shè)置中的重復(fù)常數(shù))，則可以測量運(yùn)行時間：

function repeat(cb, type) { 
  console.log(`%c Started data ${type}`, 'color: red'); 
  const start = performance.now(); 
  for (let i = 0; i < repeats; i++) { 
    cb(); 
  } 
  const end = performance.now(); 
  console.log('Finished data locality test run in ', ((end - start) / 1000).toFixed(4), ' seconds'); 
  return end - start; 
} 
repeat(localAccess, 'Local'); 

日志輸出是這樣的：

丟失緩存要付出的代價

現(xiàn)在，根據(jù)上面的了解，如果我們處理迭代過程中距離較遠(yuǎn)的數(shù)據(jù)，則會導(dǎo)致緩存丟失。遠(yuǎn)處的數(shù)據(jù)是不在相鄰索引中的數(shù)據(jù)，如下所示：

function farAccess() { 
  for (let i = 0; i < COLS; i++) { 
    for (let j = 0; j < ROWS; j++) { 
      arr[j * ROWS + i].x = 0; 
    } 
  } 
} 

在這里發(fā)生的是，在每次迭代中，我們都處理上次迭代距ROWS的索引。因此，如果ROWS為1000(在我們的例子中)，我們將得到以下迭代：[0，1000，2000，…，1，1001，2001，…]。

讓我們將其添加到速度測試中：

repeat(localAccess, 'Local'); 
setTimeout(() => { 
  repeat(farAccess, 'Non Local'); 
}, 2000); 

這是最終結(jié)果：

非本地迭代速度幾乎慢了4倍。隨著數(shù)據(jù)量的增加，這種差異將越來越大。發(fā)生這種情況的原因是由于高速緩存未命中，CPU處于空閑狀態(tài)。

那么您要付出的代價是什么?這完全取決于您的數(shù)據(jù)大小。

好吧，我發(fā)誓我永遠(yuǎn)不會那樣做!

您通?？赡懿贿@么認(rèn)為，但在某些情況下，您可能會希望使用非線性(例如1,2,3,4,5)或非偶然性。比如( for (let i = 0; i < n; i+=1000))

例如，您從服務(wù)或數(shù)據(jù)庫中獲取數(shù)據(jù)，并需要通過某種復(fù)雜的邏輯對數(shù)據(jù)進(jìn)行排序或過濾。這可能導(dǎo)致訪問數(shù)據(jù)的方式與farAccess函數(shù)中顯示的方式類似。

如下所示：

查看上圖，我們看到了存儲在內(nèi)存中的數(shù)據(jù)(頂部灰色條)。在下面，我們看到了當(dāng)數(shù)據(jù)從服務(wù)器到達(dá)時創(chuàng)建的數(shù)組。最后，我們看到排序后的數(shù)組，其中包含對存儲在內(nèi)存中各個位置的對象的引用。

這樣，對排序后的數(shù)組進(jìn)行迭代可能會導(dǎo)致在上面的示例中看到的多個緩存未命中。

請注意，此示例適用于小型陣列。高速緩存未命中與更大的數(shù)據(jù)有關(guān)。

在當(dāng)今世界中，您需要在前端使用精美的動畫，并且可以在后端(無服務(wù)器或其他服務(wù)器)中為CPU的每毫秒時間計費(fèi)(這很關(guān)鍵)。

不好了!都沒了!!!

并不是，有多種解決方案可以解決此問題，現(xiàn)在您已經(jīng)知道造成性能下降的原因，您可以自己考慮解決方案。比如只需要將處理在一起的數(shù)據(jù)更緊密地存儲在內(nèi)存中。

這種技術(shù)稱為數(shù)據(jù)局部性設(shè)計模式。

讓我們繼續(xù)我們的例子。假設(shè)在我們的應(yīng)用程序中，最常見的過程是使用farAccess函數(shù)中顯示的邏輯來遍歷數(shù)據(jù)。我們希望對數(shù)據(jù)進(jìn)行優(yōu)化，以使其在最常見的for循環(huán)中快速運(yùn)行。我們將像這樣排列相同的數(shù)據(jù)：

const diffArr = new Array(ROWS * COLS).fill(0); 
for (let col = 0; col < COLS; col++) { 
  for (let row = 0; row < ROWS; row++) { 
    diffArr[row * ROWS + col] = arr[col * COLS + row]; 
  } 
} 

所以現(xiàn)在在diffArr中，原始數(shù)組中索引為[0,1,2，…]的對象現(xiàn)在被設(shè)置為[0,1000,2000，…，1，1001，2001，…，2， 1002，2002，…]。數(shù)字表示對象的索引。這模擬了對數(shù)組進(jìn)行排序的方法，這是實(shí)現(xiàn)數(shù)據(jù)局部性設(shè)計模式的一種方法。

為了方便測試，我們將稍微更改farAccess函數(shù)以獲得一個自定義數(shù)組：

function farAccess(array) { 
  let data = arr; 
  if (array) { 
    data = array; 
  } 
  for (let i = 0; i < COLS; i++) { 
    for (let j = 0; j < ROWS; j++) { 
      data[j * ROWS + i].x = 0; 
    } 
  } 
} 

現(xiàn)在將場景添加到我們的測試中：

repeat(localAccess, 'Local'); 
setTimeout(() => { 
  repeat(farAccess, 'Non Local') 
  setTimeout(() => { 
    repeat(() => farAccess(diffArr), 'Non Local Sorted') 
  }, 2000); 
}, 2000); 

我們運(yùn)行它，我們得到：

我們已經(jīng)優(yōu)化了數(shù)據(jù)，以適應(yīng)需要查看的更常見的方式。

完整示例參見

https://yonatankra.com/performance/memory/liveExamples/objectPool2/index.html