Оптимизация статики
Современные браузеры весьма успешно анализируют приоритет ресурсов прямо во время их парсинга. И именно здесь на сцене появляется критический запрос.
Запрос является критическим, если в нем содержится статика, необходимая для рендеринга контента в рамках пользовательского рабочего окна.
Благодаря можно напрямую предписать высокий приоритет в очереди загрузки статический файлов, что может значительно оптимизировать UX.
<link rel="preload" href="style.css" as="style">
К содержанию ↑
Сжатие ресурсов
Несмотря на то, что мы сделали всего один запрос на сервер, не стоит забывать, что объем данных тоже имеет значение. Минифицирование js, css и html кода позволяет уменьшить объем данных до 40-50%, что никогда не будет лишним. Особенно это актуально для мобильных устройств.
Также сжимайте и конвертируйте картинки из png в jpg, если Вам не нужна прозрачность.
Декоратор debounce
Результатом декоратора debounce(callback, ms) должна быть обёртка, которая передаёт вызов callback не более одного раза в ms миллисекунд. Другими словами, когда мы вызываем debounce, это гарантирует, что все остальные вызовы будут игнорироваться в течение ms.
function debounce(callback, ms) {
let isRun = false;
return function() {
if (isRun) return;
callback.apply(this, arguments);
isRun= true;
setTimeout(() => isRun = false, ms);
};
}
let fn = debounce(alert, 1000);
fn(1); // выполняется немедленно
fn(2); // проигнорирован
setTimeout(() => fn(3), 300); // проигнорирован (прошло только 300 мс)
setTimeout(() => fn(4), 1300); // выполняется
setTimeout(() => fn(5), 1500); // проигнорирован (прошло только 200 мс от последнего вызова)
К содержанию ↑
Операции с DOM
Операции js с DOM-деревом очень ресурсоемкие, особенно если этим пренебрегать.
Уменьшить число вызовов записи к DOM, а именно вставку узлов в цикле по отдельности можно сгруппировать и добавить одной операцией.
Не перестраивать постоянно DOM, можно рассмотреть другие способы, например через CSS, если это возможно.
Мемоизация
Это способ оптимизации сложных вычислений путем кеширования, а именно сохранение результатов выполнения функций для предотвращения повторных вычислений.
// Обычная функция, прибавляющая 10 к переданному ей числу
const add = (n) => (n + 10);
add(9); // 19
// аналогичная функция с мемоизацией
const memoizedAdd = () => {
let cache = {};
return (n) => {
if (n in cache) {
console.log('Fetching from cache');
return cache[n];
}
else {
console.log('Calculating result');
let result = n + 10;
cache[n] = result;
return result;
}
}
}
// эту функцию возвратит memoizedAdd
const newAdd = memoizedAdd();
console.log(newAdd(3)); // 13 вычислено
console.log(newAdd(3)); // 13 взято из кэша
К содержанию ↑
Обозначьте стратегию загрузки шрифтов
Сначала браузер строит DOM и CSSOM; шрифты не будут подгружаться до тех пор, пока не встретятся в CSS-селекторе уже существующего узла DOM. Такое поведение ощутимо замедляет рендеринг текста.
Font-display – новое свойство CSS, предоставляющее возможность решить проблему без использования JS.
@font-face {
font-family: Roboto;
src: url('font/Roboto.woff') format('woff');
font-display: swap;
}
А также:
- Уменьшение вложенности DOM дерева
- Минификация, использование табов для отступов
- Разделение стилей на куски и их дозагрузка после первого экрана
- Упрощение селекторов CSS (по методологии БЭМ)
- Ленивая загрузка данных (Infinite Scrolling) в том числе изображения
- Перенос, либо отложенная (async, defer) загрузка скриптов JavaScript
- Используйте CDN ресурсов по возможности
- Избавьтесь от лишних зависимостей