JavaScript Продуктивність
Як прискорити JavaScript код?
Зниження активності в циклах
Цикли часто використовуються в програмуванні.
Кожна інструкція в циклі, включаючи інструкцію for, виконується для кожної ітерації циклу.
Інструкції або присвоювання, які можна розмістити за межами циклу, змусять цикл працювати швидше.
Погано:
for (let i = 0; i < arr.length; i++) {
Кращий код:
let l = arr.length;
for (let i = 0; i < l; i++) {
Поганий код звертається до властивості length масиву кожен раз, коли цикл повторюється.
Більш перфектний код отримує доступ до властивості length поза циклом та прискорює виконання циклу.
Обмежте доступ до DOM
Доступ до HTML DOM відбувається дуже повільно в порівнянні з іншими JavaScript інструкціями.
Якщо ви очікуєте отримати доступ до елементу DOM кілька разів, отримайте доступ до нього один раз та використовуйте його як локальну змінну:
Зменшіть розмір DOM
Зберігайте невелику кількість елементів в HTML DOM.
Це завжди покращує завантаження сторінки та прискорює рендерінг (відображення сторінки), особливо на невеликих пристроях.
Кожна спроба пошуку в DOM (наприклад, getElementsByTagName) виграє від меньшого розміру DOM.
Уникайте непотрібних змінних
Не створюйте нові змінні, якщо не плануєте зберігати значення.
Часто можна замінити такий код:
let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
Цим:
document.getElementById("demo").innerHTML = firstName + " " + lastName;
Відкласти завантаження JavaScript
Розміщення скриптів в нижній частині сторінки дозволяє браузеру завантажувати сторінку першою.
Під час завантаження скрипту браузер не буде запускати інші завантаження. Крім того, всі дії по синтаксичному аналізу і рендерінгу можуть бути заблоковані.
Специфікація HTTP визначає, що браузери не повинні завантажувати більше, ніж два компоненти одночасно.
Альтернативою є використання defer="true" в тезі скрипту. Атрибут defer вказує, що скрипт має виконуватись після завершення аналізу сторінки, але він працює лише для зовнішніх скриптів.
Якщо можливо, додайте ваш скрипт на сторінку за кодом, після сторінка має завантажуватись:
Пример
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
Уникайте використання with
Уникайте використання ключового слова with. Це негативно відбивається на швидкості. Це також загромаджує області JavaScript.
Ключове слово with заборонено в строгому режимі.
