Производительность JavaScript: несколько переменных или один объект?

Question

это простой вопрос производительности, помогающий мне понять движок javascript. для этого мне было интересно, что быстрее: объявление нескольких переменных для определенных значений или использование одного объекта, содержащего несколько значений.

пример:

var x = 15;
var y = 300;

против

var sizes = { x: 15, y: 300 };

это просто очень простой пример, который, конечно, может отличаться в реальном проекте. это вообще имеет значение?

Answer 1

Полный ответ на этот вопрос будет очень длинным. Поэтому я постараюсь объяснить только несколько вещей. Во-первых, возможно, самый важный факт, даже если вы объявляете переменную с var, это зависит от того, где вы это делаете. В глобальной области вы также неявно записали бы эту переменную в объект, большинство браузеров называют ее window. Так например

// global scope
var x = 15;

console.log( window.x ); // 15

Если мы делаем то же самое в контексте функции, все меняется. В контексте функции мы записали бы имя этой переменной в ее так называемый «объект активации». То есть внутренний объект, который обрабатывает движок js для вас. Все формальные параметры, объявления функций и переменные хранятся там.

Теперь, чтобы ответить на ваш актуальный вопрос: в контексте функции всегда самый быстрый доступ к переменным, объявленным с var. Это опять-таки не обязательно верно, если мы находимся в глобальном контексте. Глобальный объект очень большой, и он не очень быстрый, чтобы получить доступ к чему-либо внутри.

Если мы храним вещи внутри объекта, это все еще очень быстро, но не так быстро, как переменные, объявленные var. Особенно времена доступа увеличиваются. Но, тем не менее, мы говорим о микро и наносекундах здесь (в современных реализациях браузера). Старые браузеры, особенно IE6 + 7, имеют огромные потери производительности при доступе к свойствам объекта.

Если вы действительно заинтересованы в таких вещах, я рекомендую книгу Николаса С. Закаса «1014 * High Performance Javascript ». Он измерил множество различных методов для доступа и хранения данных в ECMAscript для вас.

Опять же, различия в производительности для поиска объектов и переменных, объявленных var, практически не поддаются измерению в современных браузерах. Старые браузеры, такие как FF3 или IE6, демонстрируют принципиально низкую производительность для поиска / доступа к объектам.

Answer 2

Вы определенно оптимизируете микро.Я не буду беспокоиться об этом, пока не появится явное узкое место в производительности, и вы сузили проблему до использования нескольких переменных против объекта со свойствами.

Для логического размышления об этом с использованием объектного подхода требуется три создания переменных,один для объекта и один для каждого свойства объекта, против 2 только для объявления переменных.Таким образом, наличие объекта будет иметь более высокий подход к памяти.Однако, вероятно, более эффективно передать объект методу, чем n> 1 переменным, поскольку вам нужно только скопировать 1 значение (javascript передается по значению).Это также имеет значение для отслеживания лексической области видимости объектов;то есть передача меньшего количества вещей в методы будет занимать меньше памяти.

однако, я сомневаюсь, что различия в производительности будут даже измеримы любым профилировщиком.

Answer 3

Теория или вопросы типа " Чем ты .. хм .. делаешь, чувак? ", конечно, могут появиться здесь как ответы.Но я не думаю, что это хороший подход.

Я только что создал два испытательных стенда:

---

1. Определенный, http://jsben.ch/SvNyw для глобальной области действия

Это показывает, например, что 07/2017 в браузерах на базе на базе ( Vivaldi , Opera , Google Chrome идругое) для достижения максимальной производительности предпочтительнее использовать var .Он работает примерно на 25% быстрее для чтения значений и на 10% быстрее для записи значений.

Под Node.js результаты примерно одинаковые - из-за того же движка JS.

В Opera Presto ( 12 .18) результаты теста в процентах аналогичны показателям в браузерах на основе хрома.

В (современных) Firefox есть другая и странная картина.Чтение глобальной области видимости var примерно такое же, как чтение свойства объекта, и запись глобальной области видимости var значительно медленнее, чем запись obj.prop (примерно в два раза медленнее).Это похоже на ошибку.

Для тестирования под IE / Edge или любыми другими, пожалуйста.

---

Нормальный регистр, http://jsben.ch/5UvSZ для локальных областей действия

В браузерах на основе Chromium и в Mozilla Firefox вы можете видеть огромное доминирование производительности простых переменных в соответствии с доступом объекта недвижимости.Локальные простые переменные в несколько раз (!) Быстрее, чем работа со свойствами объекта.

---

Итак,

, если вам нужно максимизировать критическую производительность кода JavaScript:

• в браузере - вы можете принудительно сделать разные оптимизации для нескольких браузеров. Я не рекомендую! Или вы можете выбрать какой-нибудь «любимый» браузер, оптимизировать свой код для него и не видеть, что зависает в других.Не очень хорошо, но есть способ.

• в браузере, опять же - вам действительно нужно оптимизировать этот путь?Может быть что-то не так в вашем алгоритме / кодовой логике?

• в highload Node.js-модуле (или других высоконагруженных вызовах) - ну, попробуйте минимизировать точки объекта", с минимальным ущербом для качества / читабельности, конечно - используйте var.

Безопасный прием оптимизации для любого случая - когда у вас слишком много операций с obj.subobj.*, вы можете сделатьvar subobj = obj.subobj; и работать с subobj.*.Это может улучшить читаемость.

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