JSFiddle - React, Tailwind, and code Playground

HTML

<div>Sequential memory access took <span id='ordered'>...</span> msec.</div>
<div>Scattered memory access took <span id='scattered'>...</span> msec.</div>

CSS

body { background-color: #247; }
div { color: #fff; }

JavaScript

function log(id, message) {
  document.getElementById(id).innerText = message;
}

function measure(id, func) {
  const t0 = performance.now();
  func();
  const t1 = performance.now();
  log(id, Math.floor(t1 - t0));
}

const size = 5000;

function createMatrix() {
  const matrix = [];
  for (let i = 0; i < size; i++) {
    const row = [];
    matrix[i] = row;
    for (let j = 0; j < size; j++) {
      // row[j] = 1;
      row.push(1);
    }
  }
  return matrix;
}

const matrixOrdered = createMatrix();
measure("ordered", function() {
  for (let i = 0; i < size; i++) {
    for (let j = 0; j < size; j++) {
      matrixOrdered[i][j] = matrixOrdered[i][j] * 2;
    }
  }
});

const matrixScattered = createMatrix();
measure("scattered", function() {
  for (let i = 0; i < size; i++) {
    for (let j = 0; j < size; j++) {
      // note the inverse order of indexes: [j][i]
      matrixScattered[j][i] = matrixScattered[j][i] * 2;
    }
  }
});