Для начала выделим основные направления оптимизации
1. Использование памяти
Во первых нужно не забывать что память на клиентских машинах всё-таки ограничена и когда-нибудь может закончиться, Поэтому программируя js нужно не забывать о “правильном” использовании памяти, для этого можно применить следующие способы:
– Уменьшение количества локальных переменных, т.е.
нужно ,где это возможно, использовать одну и ту же переменную – несколько раз.
Например:
for(var i=0,x=1;i x += x;
}
console.log(x);
for(var i=0, y=1; i y -= y;
}
console.log(y);
Очевидно можно было обойтись переменными i, x – не создавая
переменной y.
– Сведение количества замыканий к минимуму:
Замыкания вызывают существенный расход памяти (3 Мб на тысячу объектов), поэтому используйте их только в тех местах где это действительно необходимо.
2. Оптимизация операций
| Операция | Исходный код | Комментарий |
| Приведение к boolean | !!v | Вот так вот |
| Приведение к целому числу | v-0 | Вычитаем ноль |
| Приведение к дробному числу | v-0.0 | Небольшой, но выигрыш |
| Приведение к строке | v+”” | Прибавляем пустую строку |
| Создание объекта | {} | Действительно быстрее, чем через оператор new. Выигрышем является и возможность указать свойства |
| Создание массива | [] | Массив тоже является объектом, поэтому именно такое создание быстрее |
| Сравнение | v===k | Сравнение именно без приведения (если логика скрипта это допускает) |
| Операция ин-/декремента, операции присваивания с арифметическим действием | v+=1;v/=5; | Может это и покажется странным, но именно такой способ более быстрый, причем во всех браузерах |
| Операции деления/умножения на числа, являющиеся степенью 2 | v<<2 | Операции заменяются побитовым сдвигом. |
3. DocumentFragment как промежуточный буфер
Если у вас стоит задание вставить в элемент несколько дочерних элементов один за одним, будет неправильно делать это напрямую. Поскольку при каждой вставке элемента будет генерироваться DOM-событие.
Для решения этой проблемы существует DocumentFragment — т.н. промежуточный буфер, который позволяет нам собирать коллекцию элементов и вставлять их в нужное место за одну операцию, что во много раз повышает скорость работы скрипта.
4. Ну и напоследок несколько слов об операции с DOM
Главное правило – никогда не обращайтесь к элементу документа несколько раз, поскольку поиск по дереву – это довольно трудоемкий процесс и на него идет немало времени Поэтому этот код далеко не правильный
document.getElementById(‘id’).attrOne = ‘1’;
document.getElementById(‘id’).attrTwo = ‘2’;
document.getElementById(‘id’).attrThree = ‘3’;
Правильнее его было бы написать следующим образом
var e = document.getElementById('id');
e.attrOne = '1';
e.attrTwo = '2';
e.attrThree = '3';