Каким образом можно ускорить работу кода JavaScript.
Уменьшайте активность в циклах
В программировании циклы используются часто.
Каждое выражение в цикле, включая само выражение for, выполняется при каждом проходе (итерации) цикла.
Выражения или присваивания, вынесенные за пределы цикла, позволят циклу выполняться быстрее.
Плохо:
var i;
for (i = 0; i < arr.length; i++) {
Лучше:
var i;
var l = arr.length;
for (i = 0; i < l; i++) {
В первом варианте код обращается к свойству массива length во время каждой итерации цикла.
Во втором варианте код обращается к свойству массива length один раз за пределами цикла, что ускоряет работу цикла.
Уменьшайте количество обращений к DOM
По сравнению с другими выражениями JavaScript обращение к HTML DOM очень медленный процесс.
Если вам необходимо обратиться к элементу DOM несколько раз, то сохраните его в локальной переменной и затем обращайтесь к ней:
var obj;
obj = document.getElementById("demo");
obj.innerHTML = "Привет";
Уменьшайте размер DOM
Старайтесь, чтобы в HTML DOM было небольшое количество элементов.
Это улучшает загрузку страницы и ускоряет ее рендеринг (отображение), особенно на медленных устройствах.
Каждая попытка поиска по DOM (вроде getElementsByTagName) даст выгоду от небольшого дерева DOM.
Избегайте ненужных переменных
Не создавайте новые переменные для значений, которые вы не планируете использовать в дальнейшем.
Часто следующий код:
var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
Можно заменить на такой:
document.getElementById("demo").innerHTML = firstName + " " + lastName
Откладывайте загрузку кода JavaScript
Если разместить скрипты внизу тела веб-страницы, то браузер сначала загрузит код самой страницы.
Дело в том, что когда загружается скрипт, ничего другого браузер загружать не будет. Кроме этого, любой парсинг и рендеринг также могут быть заблокированы.
Согласно спецификации HTTP браузер не может одновременно загружать больше двух компонентов.
В качестве альтернативы можно указать атрибут defer="true" в теге script. Этот атрибут определяет, что скрипт должен выполниться только после того, как страница будет полностью сформирована в браузере. Но работает этот атрибут только с внешними скриптами, и в использовании имеет свои подводные камни.
Можно добавить скрипт при помощи кода, после того, как страница будет загружена:
<script>
window.onload = function() {
var element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
Не используйте ключевое слово with
Избегайте использование ключевого слова with. Оно отрицательно влияет на скорость работы скрипта. Кроме этого оно загромождает области видимости JavaScript.
В строгом режиме использование ключевого слова with запрещено.
