As For JS
3.29K subscribers
211 photos
22 videos
4 files
544 links
As For JavaScript...
Обсуждения — @AsForJsTalks
Download Telegram
Вопрос о алокации JS массивов: #array #perf #v8 #opti
Насколько я помню в си мы аллоцирум палять для массива и каждый раз когда мы хотим увеличить число элементов в массиве, мы должны сделать вновь аллоцировать память. Имеет ли смысл делать тоже самое на js? var arr = [1, 2, 3];, я хочу добавить ещё два элемента в массив, arr.length= 5; arr[3] = 4; arr[4] = 5; и будет ли это влиять на производительность? И что делать если всётаки нудно увеличить длину массива.

Я расширю ответ на все множество ситуаций для подобной темы.

Ответ [Часть 1/4]:
В JavaScript, в случае вопросов о том, что работает быстрее всегда нужно помнить две вещи:
1. Как это закреплено в спецификации
2. Как это оптимизирует конкретный #RunTime

* Если явно не указано другого, то рекомендации идут для RunTime: #V8.

Справка:
V8 - это
RunTime от Google. Который встраивается сейчас в Google Chrome и NodeJs. Так же является одним из самых популярных RunTime для встраивания в разного рода штуки для Умного Дома - типа чайников, холодильников и т.д.
Я не знаю на момент написания ответа, иного RunTime, который бы по совокупности факторов, мог бы конкурировать с V8.
Под совокупностью факторов подразумевается: Базовая производительность, производительность в случае оптимизации горячего кода. Простота интеграции
RunTime в другие HOST системы.



Как это закреплено в спецификации
Именно для Exotic Object Array, то есть того обьекта который мы создаем при помощи конструктора #Array или литеральной формы [] никакого особого поведения, для оптимизации работы, с точки зрения спецификации - не предусмотрено.
Потому каждый RunTime крутится как хочется.


В случае V8, для exotic object Array используется следующая стратегия:
Внутри RunTime существует 20 вариантов представления подобного обьекта.
Производительность которых сильно отличается друг от друга.

V8 устроен таким образом, что при создании Exotic Object Array, он получает наиболее производительную форму, которая в последствии деградирует до менее производительной, опираясь на те данные которые используются в Array.

Самое быстрое представление:
var theArr = [1, 3, 2];
или
var theArr = new Array (1, 3, 2);

Такое представление называется PACKED_SMI_ELEMENTS.
[1] PACKED: в обьекте (нет и не было) дырок

[2] SMI: элементы состоят из целых чисел со знаком в пределе 2^(32-1). То есть в пределе между -1073741824 до 1073741823. 2^31 степени: 0-2147483647 однако V8 по умолчанию оперирует SMI со знаком, в следсndии чего еще один бит уходит на знак.

[3] ELEMENTS: Значения связаны с числовыми ключами. (0, 1, 2, .... )



Любое превышение заявленого предела для SMI, приводит к преобразованию Exotic Object Array к другой форме, которая называется PACKED_DOUBLE_ELEMENTS.
Например использование значений: 1073741824, NaN, -0, 1.1 etc...
То есть форме, которая хранит в себе 64-bit IEEE floating point number
4👍1
⬆️⬆️⬆️

⎡razbor:13⎦ Разбор видео: Выводим Мурыча на чистую воду от Дмитрия Карловского.
https://www.youtube.com/watch?v=RrGMG4S0hLQ

#razbor #chap_13
#В_интернетах_кто_то_неправ
#ДмитрийКарловский #Smol #Люди
#video #timecodes #відео #таймкоди
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

02:19:20, Пауза.
https://www.youtube.com/watch?v=RrGMG4S0hLQ&t=8360s

#_ПАУЗА_
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

02:27:00, Топ перлов
https://www.youtube.com/watch?v=RrGMG4S0hLQ&t=8820s
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

02:32:40, Смотрим код спецификации (StatementList)
https://www.youtube.com/watch?v=RrGMG4S0hLQ&t=9160s

#StatementList #ECMAScript #Specification #Cпецифікація #Cпецификация #Spec #Cпека
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

02:35:00, Анекдот. Перед ним история.
https://www.youtube.com/watch?v=RrGMG4S0hLQ&t=9300s

#_Анекдот_
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

02:38:45, Интерпретатор обязан создавать структуры.
https://www.youtube.com/watch?v=RrGMG4S0hLQ&t=9525s

#Interpreter #Інтерпретатор #Интерпретатор
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

02:43:00, Про работу виртуальной машины. Зависимость работы от самого ран-тайма, а не браузера
https://www.youtube.com/watch?v=RrGMG4S0hLQ&t=9780s

#RunTime #VM
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

02:47:10, Var не забыт. Python, привет
https://www.youtube.com/watch?v=RrGMG4S0hLQ&t=10030s

#var #Python
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

02:47:54, Так все-таки есть замыкания в JS?
https://www.youtube.com/watch?v=RrGMG4S0hLQ&t=10074s

#JS #JavaScript #Closure #Замикання #Замыкание
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

02:48:18, Var - часть фундамента спецификации
https://www.youtube.com/watch?v=RrGMG4S0hLQ&t=10098s

#var #ECMAScript #Specification #Cпецифікація #Cпецификация #Spec #Cпека
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

02:49:42, Есть ли что-то, чего нет в спецификации
https://www.youtube.com/watch?v=RrGMG4S0hLQ&t=10182s

#ECMAScript #Specification #Cпецифікація #Cпецификация #Spec #Cпека
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

02:53:00, Доказательство многопоточности JS
https://www.youtube.com/watch?v=RrGMG4S0hLQ&t=10380s

#JS #JavaScript #Multithreading #Багатопоточність #Многопоточность
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

02:57:51, Код доказательства многопоточности
https://www.youtube.com/watch?v=RrGMG4S0hLQ&t=10671s

#JS #JavaScript #Multithreading #Багатопоточність #Многопоточность
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

03:02:25, Демонстрация многопоточности
https://www.youtube.com/watch?v=RrGMG4S0hLQ&t=10945s

#JS #JavaScript #Multithreading #Багатопоточність #Многопоточность
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

03:05:50, HTML спецификация
https://www.youtube.com/watch?v=RrGMG4S0hLQ&t=11150s

#HTML
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

03:08:14, Выделение всех чисел в куче (и попытки оптимизации этого ран-таймами)
https://www.youtube.com/watch?v=RrGMG4S0hLQ&t=11294s

#RunTime #Heap #Купа #Куча
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

03:09:28, Про let и const
https://www.youtube.com/watch?v=RrGMG4S0hLQ&t=11368s

#let #const
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

03:10:55, Конец просмотра видео
https://www.youtube.com/watch?v=RrGMG4S0hLQ&t=11455s
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

03:13:00, Мелодия пистолетика
https://www.youtube.com/watch?v=RrGMG4S0hLQ&t=11580s
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

03:13:50, Про мономорфность объектов, воспоминания разговора
https://www.youtube.com/watch?v=RrGMG4S0hLQ&t=11630s
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

03:15:05, ИГОГО
https://www.youtube.com/watch?v=RrGMG4S0hLQ&t=11705s
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
👍3
⎡JSbook: 02.0⎦ JavaScript: От мифов к спецификации. Три JS кита.
https://www.youtube.com/watch?v=1F-8pn30bOI

#JSbook #chap_02_0
#JavaScript_От_мифов_к_спецификации
#video #timecodes #відео #таймкоди
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

00:00:00, Музыка
https://www.youtube.com/watch?v=1F-8pn30bOI

#_js_radio_
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

00:09:30, О чем это все
https://www.youtube.com/watch?v=1F-8pn30bOI&t=570s
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

00:10:04, Новые спецэффекты
https://www.youtube.com/watch?v=1F-8pn30bOI&t=604s
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

00:11:35, Привет от Тучи
https://www.youtube.com/watch?v=1F-8pn30bOI&t=695s

#_котТуча_
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

00:17:15, Начало
https://www.youtube.com/watch?v=1F-8pn30bOI&t=1035s

#_Благодарности_
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

00:21:00, Кит первый: Скриптовый язык
https://www.youtube.com/watch?v=1F-8pn30bOI&t=1260s

#JSbook #HelloWorld #alert #Browser #Браузер #process_stdout_write #NodeJS #print #D8 #console #console_log #Host #Хост #ScriptingLanguage #СкриптоваМова #СкриптовыйЯзык #EmbeddedLanguage #ВбудованаМова #ВстраиваемыйЯзык #RunTime #РанТайм #DOM #EventLoop #Canvas
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

00:37:38, ДМБ про JavaScript
https://www.youtube.com/watch?v=1F-8pn30bOI&t=2258s

#ДМБ #ВидишьСуслика #Host #Хост #EventLoop
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

00:43:28, Опасно - очень громкий звук!!!
https://www.youtube.com/watch?v=1F-8pn30bOI&t=2608s
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

00:44:00, Отмена опасности
https://www.youtube.com/watch?v=1F-8pn30bOI&t=2640s
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

00:48:36, Кратко итоги
https://www.youtube.com/watch?v=1F-8pn30bOI&t=2916s
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
3
⎡JSbook: 02.2⎦ JavaScript: От мифов к спецификации. Структурирование информации.
https://www.youtube.com/watch?v=-FmCm-Wjdok

#JSbook #chap_02_2
#JavaScript_От_мифов_к_спецификации
#video #timecodes #відео #таймкоди
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

00:00:00, Музыка
https://www.youtube.com/watch?v=-FmCm-Wjdok

#_js_radio_
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

00:11:00, Приветствие
https://www.youtube.com/watch?v=-FmCm-Wjdok&t=660s
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

00:18:00, Благодарности
https://www.youtube.com/watch?v=-FmCm-Wjdok&t=1080s

#_Благодарности_
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

00:19:05, Начало по сути
https://www.youtube.com/watch?v=-FmCm-Wjdok&t=1145s

#JSbook #InformationStructuring #СтруктуруванняІнформації #СтруктурированиеИнформации #Object #Об_єкт #Объект #Key #Ключ #Property #Властивість #Свойство #Проперті #Проперти #prototype #Prototypes #Прототипи #Прототипы #Inheritance #Наслідування #Наследование
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

01:15:00, Ответы на вопросы
https://www.youtube.com/watch?v=-FmCm-Wjdok&t=4500s

#_CHAT_ #_ЧАТ_
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

01:15:45, Ловим Кота!!!
https://www.youtube.com/watch?v=-FmCm-Wjdok&t=4545s

#_котТуча_
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

01:17:20, Откуда вероятность в 25% срабатывания requestAnimationFrame раньше setTimeout
https://www.youtube.com/watch?v=-FmCm-Wjdok&t=4640s

#_CHAT_ #_ЧАТ_ #requestAnimationFrame #setTimeout
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

01:38:40, О логике поведения EventLoop
https://www.youtube.com/watch?v=-FmCm-Wjdok&t=5920s

#_CHAT_ #_ЧАТ_ #EventLoop #HTML #RunTime #РанТайм #Agent #Агент
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

02:00:00, Выяснение деталей относительного того есть 4мс задержка по умолчанию у setTimeout или нет
https://www.youtube.com/watch?v=-FmCm-Wjdok&t=7200s

#_CHAT_ #_ЧАТ_ #setTimeout #HTML
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

02:28:30, Еще одна попытка с другой стороны рассказать о TaskQueue и MicroTaskQueue
https://www.youtube.com/watch?v=-FmCm-Wjdok&t=8910s

#_CHAT_ #_ЧАТ_ #TaskQueue #MicroTaskQueue #Queue
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

02:45:25, Про Event Loop лучше забыть и не вспоминать
https://www.youtube.com/watch?v=-FmCm-Wjdok&t=9925s

#_CHAT_ #_ЧАТ_ #EventLoop #HTML
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

02:53:00, setTimeout в Node
https://www.youtube.com/watch?v=-FmCm-Wjdok&t=10380s

#_CHAT_ #_ЧАТ_ #setTimeout #NodeJS
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _
👍51
⎡JSbook: 02.03⎦ JavaScript: От мифов к спецификации. Выражения.
https://www.youtube.com/watch?v=lq5vi6DmEpA

#JSbook #chap_02_03
#JavaScript_От_мифов_к_спецификации
#video #timecodes #відео #таймкоди
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

00:00:00, ожидание начала
https://www.youtube.com/watch?v=lq5vi6DmEpA

#_js_radio_
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

00:07:39, тема трансляции
https://www.youtube.com/watch?v=lq5vi6DmEpA&t=459s
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

00:08:05, благодарности
https://www.youtube.com/watch?v=lq5vi6DmEpA&t=485s

#_Благодарности_
#Susuwatari #Сусуватарі #Сусуватари #煤渡
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

00:21:29, антидисклеймер
https://www.youtube.com/watch?v=lq5vi6DmEpA&t=1289s

#AntiDisclamer #АнтиДисклеймер
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

00:23:54, О чем был первый раздел: js - скриптовый язык. js и хост среда
https://www.youtube.com/watch?v=lq5vi6DmEpA&t=1434s

#JSbook #ScriptingLanguage #СкриптоваМова #СкриптовыйЯзык #EmbeddedLanguage #ВбудованаМова #ВстраиваемыйЯзык #Host #Хост #RunTime #РанТайм #Agent #Агент #V8 #SpyderMonkey #JSC #JavaScriptCore #API #Browser #Браузер #DOM #CSSOM #EventLoop #NodeJS #setTimeout #HTML5 #CallBack #КолБек #КолБэк
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

00:33:36, js - скриптовый язык: что есть и чего нет
https://www.youtube.com/watch?v=lq5vi6DmEpA&t=2016s

#JSbook #ScriptingLanguage #СкриптоваМова #СкриптовыйЯзык #EmbeddedLanguage #ВбудованаМова #ВстраиваемыйЯзык
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

00:35:26, О чем был второй раздел: js: структурирование информации
https://www.youtube.com/watch?v=lq5vi6DmEpA&t=2126s

#JSbook #InformationStructuring #СтруктуруванняІнформації #СтруктурированиеИнформации #Key #Ключ #Property #Властивість #Свойство #Проперті #Проперти

#ECMA
#InternalMethod [[Get]]
#InternalSlot [[PrivateElements]]
#sec_object_internal_methods_and_internal_slots
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

00:57:50, музыкальная пауза
https://www.youtube.com/watch?v=lq5vi6DmEpA&t=3470s

#_ПАУЗА_ #_js_radio_
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

01:02:24, вопрос про структурирование информации и прототипное наследование
https://www.youtube.com/watch?v=lq5vi6DmEpA&t=3744s

#alert #Browser #Браузер #process_stdout_write #NodeJS #print #D8 #console #console_log #prototype #Prototypes #Прототипи #Прототипы #Inheritance #Наслідування #Наследование
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

01:12:17, Второй раздел: выражения
https://www.youtube.com/watch?v=lq5vi6DmEpA&t=4337s

#JSbook #InformationStructuring #СтруктуруванняІнформації #СтруктурированиеИнформации #alert #Browser #Браузер #process_stdout_write #NodeJS #print #D8 #console #console_log #Host #Хост #Expression #Вираз #Выражение
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

01:17:55, пауза
https://www.youtube.com/watch?v=lq5vi6DmEpA&t=4675s

#_ПАУЗА_
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

01:19:47, выражения
https://www.youtube.com/watch?v=lq5vi6DmEpA&t=4787s

#JSbook #Expression #Вираз #Выражение #arguments #Аргументи #Аргументы
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

01:58:00, Созвон, объяснение функционирования console.log("Hello world");
https://www.youtube.com/watch?v=lq5vi6DmEpA&t=7080s

#Expression #Вираз #Выражение #arguments #Аргументи #Аргументы #console #console_log #prototype #String #Рядок #Строка #StringExoticObject #ExoticObject

#ECMA
#clauses #subclause
#BinaryLogicalOperators
#sec_binary_logical_operators
#production
#LogicalANDExpression
#prod_LogicalANDExpression
#LogicalORExpression
#prod_LogicalORExpression
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

03:06:09, итоги по сказанному
https://www.youtube.com/watch?v=lq5vi6DmEpA&t=11169s
_ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _ _

⬇️⬇️⬇️
2