Почему отличается время перебора объектов одного класса от множества классов?

Question

[Антон В.]

Добрый день!

Из-за моей ошибки возникла ситуация, которую очень хотелось бы понять.
Время на цикл (50 тыс итераций) перебора и обращение к свойствам экземпляров одного класса существенно отличается от времени перебора экземпляров разных классов. 2 мс против 40мс.

Возможно у кого нибудь будут мысли о причинах такого поведения.

Код:

let length = 50000;

let list_of_one = [];
let main_class = getClass();

for(let i = 0; i<length;i++){
  list_of_one.push(new main_class()) 
}

let list_of_many = [];
for(let i = 0; i<length;i++){
  let main_class = getClass()
  list_of_many.push(new main_class())
}


performanceTest(list_of_one)  // результат ~2ms
performanceTest(list_of_many)  // результат ~40ms



function performanceTest(list){
 console.time('time')
  let c = list.length
  for(let i = 0; i<c;i++){
    	list[i].buffer_data_calc.color[3] = i
  }
  console.timeEnd('time')
}


function getClass(){
 class Main {
   id=23;
   type= 1;
   buffer_data_calc={color:[1,2,3,4,5]};
   init(){

   }
 }
    return Main
}

p.s было замечено что уже на поиск свойства buffer_data_calc уходит большая времени...

JS Fiddle

От Сергей Соколов - кейс на jsPerf

Comments

[Rerurk]

Может из за объявление переменной в цикле? Нужно же найти свободную область памяти куда ее поместить. А таких Летов равно количеству итерации

[Антон В.]

Rerurk, но как объявление списка объектов может влиять на одинаковый тест в perfTest...

[Антон В.]

Rerurk, инетерсно, что даже просто чтение будет работать медленнее

function perfTest(list){
 console.time('time')
  let c = list.length
  for(let i = 0; i<c;i++){
    	list[i].buffer_data_calc.color 
  }
  console.timeEnd('time')
}

[Kovalsky]

А что конкретно вас удивляет? В первом случае вы создали один класс и 50000 его экземпляров, а во втором случае вы создали 50000 классов и 50000 экземпляров в итоге. Во втором случае работы в 50000 раз больше

[Антон В.]

Kovalsky, обратите пожалуйста внимание, что замер делается после генерации

[Антон В.]

Kovalsky, может быть тут лучше получилось пример оформить.. что скажете? js fiddle

[Антон В.]

Bavashi, тесты проводятся в браузере Chrome 84 OS Linux.

не используется Typesrcipt, фреймворки - Vue и Pixi 5 на проекте, но тест кажется от этого не зависит.

[Kovalsky]

Bavashi, нет, у всех на хромиуме

Антон В., ну значит в движке есть какие-то оптимизации связанные с прототипами. Может быть последний класс по которому рекурсивно был осуществлен поиск свойств сохраняется, а вы его 50000 раз перезаписываете. А может быть просто когда пул классов такой обширный требуется больше времени на то, чтобы выцепить какой-то конкретный по ссылке. Хотя последнее кажется глупостью

[Антон В.]

Bavashi, после загрузки, когда откроете консоль, попробуйте нажать Run. у меня с ходу тоже ошибку показывает... но после нажатия на кнопку Run, работает....

[Антон В.]

Kovalsky, https://jsfiddle.net/ivinnic/smt8hwab/65 добавил еще в пример перебор простых объектов

[Сергей Соколов]

кейс на jsPerf

Результат в FireFox

[Антон В.]

Сергей Соколов, спасибо большое за тест!

[Антон В.]

[Антон В.]

Сергей Соколов, что думаете, какие могут быть причины разницы производительности?

[Сергей Соколов]

Антон В., не знаю, могу только гадать: возможно, внутренняя оптимизация движка держит класс и его цепь прототипов в каком-то едином месте «под рукой». А при работе с тучей классов, для каждого приходится заново строить цепочку.

Надо больше экспериментов. Что, если чередовать два класса ABAB...
Что, если число разных сократить до половины, но эту половину повторить дважды ABC ABC.
Влияет ли порядок на время: AA BB CC vs. ABC ABC vs. ABC CBA

Answer 1

[Lynn «Кофеман»]

Почитайте статьи как работают движки JS.
Можно начать с этой https://mathiasbynens.be/notes/prototypes

Если очень кратко, то V8 (движок JS в Chrome, node.js и т.п.) анализирует и оптимизирует выполняемый код. В частности в первом случае он понимает что на входе всегда один и тот же класс и оптимизирует доступ к его полям. Во втором случае он каждый раз честно проверяет «а есть ли атрибут buffer_data_calc? есть ли у него атрибут color? а это точно массив? а в нём есть 3 элемент? и т.п»

Comments

[Антон В.]

Lynn «Кофеман» Спасибо большое за ваш ответ!

js fiddle - добавил пример с простыми массивами и оставил только чтение свойства "buffer_data_calc"

Когда этот просто объект без класса. То разве он не должен каждый раз проверять "а есть ли атрибут buffer_data_calc? " ведь это может быть объект с произвольными свойствами

например:

let list_of_objects = []
for(let i = 0; i<length;i++){
let item = {
   id:23,
   type: 1,
   }
  
  list_of_objects.push(item)
  
  if(i%3===0){
   		item.buffer_data_calc = {color:[1,2,3,4,5]}
  }
  
}

performanceTest(list_of_objects)

Движок понимает, что все объекты в list_of_object одинаковые? и может не проверять? но ведь я мог и удалить его или новое добавить

ps. в результате c таким заполнением, тест занимает 2ms

[Kovalsky]

Антон В., я думаю ответить на эти вопросы определенно можно только заглянув в каждую конкретную реализацию движка - в хроме, в лисе и тд

[Антон В.]

Bavashi, я запускал на реальном проекте, данные сходятся.
Конечно когда проц разогревается то данные могу сильно отличаться от холодного старта.

jsPerf вот тут можно хоть немного анализировать на большом количестве запусков с замерами.

[Lynn «Кофеман»]

Антон В.,

Движок понимает, что все объекты в list_of_object одинаковые

Да, они создаются одним кодом и имеют одинаковую «форму» (shape)

[Lynn «Кофеман»]

Bavashi, а если в третий Раз запустить?
Будет похоже на второй?

[Антон В.]

Lynn «Кофеман», а как на счет модификации
if(i%3===0){
item.buffer_data_calc = {color:[1,2,3,4,5]}
}