Как удалить повторяющиеся элементы в массиве js
Если мы говорим о стандартных возможностях языка, можно удалить повторяющиеся элементы следующим образом:
const numbers = [-1, 3, 9, -9, 100, -100, 100, 100]; const newSet = new Set(numbers); // => Set(6) //new Set создаёт новую коллекцию, а нам нужен массив //воспользуемся методом Array.from(). Получаем: const uniqueNumbers = Array.from(newSet); // => [ -1, 3, 9, -9, 100, -100 ] Массив с уникальными значениями готов!
16 ноября 2021
Чтобы удалить повторяющиеся элементы из массива, проще всего воспользоваться функцией uniq() из библиотеки ‘lodash’. Эта функция возвращает новый массив, из которого удалены все повторяющиеся элементы.
const uniqNumbers = _.uniq([2, 1, 2, 1]); console.log(uniqNumbers); // => [2, 1] Как удалить повторяющиеся значения из массива JavaScript
Вы можете использовать метод indexOf() вместе с push() , чтобы удалить повторяющиеся значения из массива или получить все уникальные значения из массива в JavaScript.
Давайте посмотрим на следующий пример, чтобы понять, как это работает:
В качестве альтернативы вы можете использовать недавно представленный цикл for-of в ES6 вместо цикла for , чтобы очень легко выполнить эту фильтрацию, как показано в следующем примере:
Ознакомьтесь с руководством по циклам JavaScript, чтобы узнать больше о цикле for-of в ES6.
Читайте также
Похожие примеры:
- Как отобразить все элементы или значения массива с помощью цикла в jQuery
- Как создать строку, объединив элементы массива в JavaScript
- Как перебрать массив в JavaScript
Как убрать дублирующиеся значения из массива в Javascript
В этой статье затронем один из самых популярных поисковых запросов среди junior-разработчиков: «Как убрать дублирующиеся значения из массива в Javascript». Я расскажу про самые популярные способы и распишу их плюсы и минусы. Конечно же, в каждом из предложенных решений, код можно будет сократить и упростить, но я оставлю его как есть в образовательных целях.
Представим, что у нас есть массив вида:
[1, 2, 3, 1, 1, '1', '2', '1', true, false, true, null, undefined, null, null, undefined] Теперь попробуем удалить из него дубликаты.
Используем Set
Set — это новый тип данных, представленный в ES6. Значения Set могут присутствовать только в одном экземпляре, тем самым этот тип данных подразумевает наличие только уникальных элементов. Соответственно, если мы передадим Array в Set, то мы получим объект только с уникальными значениями.
Перейдем к коду:
const array = [1, 2, 3, 1, 1, '1', '2', '1', true, false, true, null, undefined, null, null, undefined]; const makeUniq = (arr) => < const uniqSet = new Set(arr); return [. uniqSet]; >makeUniq(array); - Первое, что необходимо сделать — это передать массив в сет.
- Второе — используя spread оператор, преобразовать сет обратно в массив. Так же spread можно заменить на Array.from(uniqSet) .
Теперь давайте максимально укоротим код для того, чтобы оценить количество строк.
const array = [1, 2, 3, 1, 1, '1', '2', '1', true, false, true, null, undefined, null, null, undefined]; const makeUniq = (arr) => [. new Set(arr)]; makeUniq(array); Плюсы:
- Производительность. Этот вариант самый производительный. Согласно нотации Big O, сложность алгоритма будет равна O(2n), что в действительности является O(n), а значит производительность максимальная.
- Краткость. Самая короткая запись из всех возможных вариантов.
Минусы:
- Обработка только примитивных типов данных. Данный способ не работает, если в массиве будут присутствовать объекты.
Используем filter
Второй вариант удаления — это использование методов массивов .filter() и .indexOf() . Рассмотрим, что делает каждый из них.
Что такое indexOf
Метод .indexOf() возвращает индекс первого, найденного элемента из массива.
const array = [1, 2, 3, 1, 2, 3, 4]; array.indexOf(1) // 0 array.indexOf(2) // 1 array.indexOf(3) // 2 array.indexOf(4) // 6 Что такое filter
Метод .filter() создаёт новый массив со всеми элементами, прошедшими проверку, задаваемую в передаваемой функции. Другими словами, если элемент проходит условие и возвращает true, тогда он будет включен в новый массив, непрошедшие элементы будут пропущены.
Решение, используя filter
После того, как вы узнали о .filter() и .indexOf() , перейдем к коду:
const array = [1, 2, 3, 1, 1, '1', '2', '1', true, false, true, null, undefined, null, null, undefined]; const makeUniq = (arr) => < return arr.filter((el, id) =>arr.indexOf(el) === id); > makeUniq(array); Все что необходимо сделать, это перебрать каждое значение массива и сравнить, равен ли индекс первого значения, текущему, если да, то добавляем значение в новый массив.
Если мы заглянем внутрь arr.filter((el, id) => arr.indexOf(el) === id); , то там происходит примерно это:
| Элемент | Индекс элемента | indexOf | Соответствие условию indexOf(el) === id |
|---|---|---|---|
| 1 | 0 | 0 | true |
| 2 | 1 | 1 | true |
| 3 | 2 | 2 | true |
| 1 | 3 | 0 | false |
| 1 | 4 | 0 | false |
| ‘1’ | 5 | 5 | true |
И так далее с каждым элементом.
Плюсы:
- Популярность. Метод фильтр знаком огромному количеству разработчиков, соответственно, написать решение используя .filter() очень просто.
- Возможность расширить логику для того, чтобы проверять уникальность объектов и массивов. В данном случае мы можем включить в условие более сложную логику, которая будет проверять на уникальность вложенные массивы и объекты.
Минусы:
- Производительность. В данном случае у нас используется цикл в цикле, т.е. первый цикл это .filter() , а второй .indexOf() , соответственно сложность алгоритма O(n^2), это значительно медленнее, чем первый вариант. Если вам необходимо очистить массив с большим количеством элементов, то я не рекомендую использовать данный подход.
Используем reduce
На самом деле, использование .reduce() не принесет вам никакой выгоды, по сравнению с .filter() , просто немного другая логика.
const array = [1, 2, 3, 1, 1, '1', '2', '1', true, false, true, null, undefined, null, null, undefined]; const makeUniq = (arr) => < return arr.reduce((acc, currentValue) => < acc.indexOf(currentValue) === -1 && acc.push(currentValue); return acc; >, []); > makeUniq(array); В итоге, мы имеем такие же проблемы с производительностью, т.к. используется цикл в цикле — .reduce() и .indexOf() соответственно. В дополнение к этому, не все разработчики могут быть знакомы с .reduce() . Не самый лучший способ для решения задачи.
Используем цикл for
В случае, если вам необходима производительность, то лучшим решением, по сравнению с .filter() и .reduce() будет обычный цикл for .
- Во-первых, сам for быстрее, чем все ES6 методы массивов.
- Во-вторых, вы можете написать O(n) решение, вместо O(n^2).
- В-третьих, расширить логику на проверку уникальности вложенных массивов и объектов будет так же просто, как в .filter() и .reduce() .
const array = [1, 2, 3, 1, 1, '1', '2', '1', true, false, true, null, undefined, null, null, undefined]; const makeUniq = (arr) => < const seen = <>; const result = []; let j = 0; for(let i = 0; i < arr.length; i++) < const item = arr[i]; const itemType = typeof item; const key = `$_$`; if (!seen[key]) < seen[key] = 1; result[j++] = item; >> return result; > makeUniq(array); Давайте теперь разберемся, что здесь вообще происходит.
- Обозначаем hashtable const seen = <> , в который будем записывать все значения массива, что мы встретили.
- Обозначаем массив, в который будем записывать только уникальные значения. const result = [] .
- Обозначем переменную let j = 0 , которая будет использована для быстрой записи значений в массив result .
- Запускаем цикл for для полученного массива.
- Для уменьшения количества обращений к массиву, создаем константу const item = arr[i] .
- При записи элемента в hashtable в качестве ключа, он будет преобразован в строку, поэтому узнаем его тип и создаем ключ вида type_value
- Проверяем наличие значения в hashtable, если значения нет, то проваливаемся внутрь условия.
- Так как в hashtable не нашлось искомое значение, то записываем его.
- Опять же, так как в hastable не нашлось искомое значение, значит его можно считать уникальным и нужно поместить в массив результатов. Для этого можно воспользоваться методом array.push() , но его сложность будет O(n), а присвоить значение напрямую через индекс — O(1), поэтому испольуем индекс.
Плюсы
- Производительность. Согласно Big O нотации, сложность алгоритма будет O(n), производительность максимальная.
- Возможность расширить логику для того, чтобы проверять уникальность объектов и массивов.
Минусы
- Количество кода. По сравнению с любым из предложенных способов, данный имеет самую длинную запись.
- Императивный способ. Еще один минус в читаемости данного подхода, декларативный читается лучше.
Заключение
В этой статье я рассмотрел несколько способов для удаления дублирующихся значений из массивов. Есть еще варианты, например, написать через .forEach() или через прототип массива, но в целом, они мало отличаются от предложенных. Главным критерием в выборе подхода, для вас должен стать набор входных данных, если вы имеете дело с огромным количеством значений, то лучше позаботиться о производительности, в остальных случаях я бы предпочел более короткую и читаемую запись.
Как удалить повторяющиеся элементы массива в JavaScript?
5 простых способов удаления дубликатов элементов в массиве JavaScript.
Введение
Массивы являются одной из наиболее часто используемых структур данных в JavaScript. Часто массив может содержать дубликаты элементов, которые необходимо удалить для эффективной обработки данных. В этом блоге мы рассмотрим пять способов удаления дубликатов элементов в массиве с помощью JavaScript, ранжированных от наиболее эффективных до наименее эффективных.
1. Использование объекта Set
Объект Set является наиболее эффективным способом удаления дубликатов из массива в JavaScript. Это коллекция уникальных значений, что означает, что она автоматически удаляет дубликаты. Используя spread оператор, мы можем преобразовать объект Set обратно в массив, в результате чего получается массив, содержащий только уникальные значения. Вот пример:
const arr = [1, 1, 2, 2, 3, 4, 4, 5]; const uniqueArr = [. new Set(arr)]; console.log(uniqueArr); // [1, 2, 3, 4, 5]В этом примере мы сначала определяем массив с повторяющимися значениями. Затем мы создаем новый объект Set с помощью оператора spread ( . ). Наконец, мы снова преобразуем объект Set обратно в массив с помощью оператора spread. Результирующий массив содержит только уникальные значения.
2. Использование метода .filter
Метод .filter является вторым наиболее эффективным способом удаления дубликатов из массива в JavaScript. Он создает новый массив, который включает только элементы, отвечающие определенному условию, в данном случае элемент появляется в массиве только один раз. Вот пример:
const arr = [1, 1, 2, 2, 3, 4, 4, 5]; const uniqueArr = arr.filter((item, index) => arr.indexOf(item) === index); console.log(uniqueArr); // [1, 2, 3, 4, 5]В этом примере мы используем метод .filter для создания нового массива uniqueArr , который включает только элементы, удовлетворяющие условию внутри функции. Условие проверяет, равен ли индекс текущего элемента индексу его первого появления в массиве. Если это так, это означает, что элемент не является дубликатом и может быть включен в новый массив.
3. Использование метода .reduce
Метод .reduce немного менее эффективен, чем метод .filter . Он позволяет свести массив к одному значению, применив функцию к каждому элементу массива. В этом случае мы можем использовать .reduce для создания нового массива, включающего только уникальные значения. Вот пример:
const arr = [1, 1, 2, 2, 3, 4, 4, 5]; const uniqueArr = arr.reduce((acc, curr) => < if (!acc.includes(curr)) < acc.push(curr); >return acc; >, []); console.log(uniqueArr); // [1, 2, 3, 4, 5]В этом примере мы используем метод .reduce для итерации по каждому элементу массива и применяем функцию, которая проверяет, находится ли текущий элемент уже в массиве аккумулятора ( acc ). Если это не так, мы добавляем его в массив аккумулятора. Метод .reduce возвращает конечное значение массива аккумулятора, который является массивом, содержащим только уникальные значения.
4. Использование метода .forEach
Метод .forEach менее эффективен, чем предыдущие методы, но он по-прежнему является жизнеспособным вариантом. Он позволяет перебирать каждый элемент массива и применять к нему функцию. В этом случае мы можем использовать .forEach для создания нового массива, содержащего только уникальные значения. Вот пример:
const arr = [1, 1, 2, 2, 3, 4, 4, 5]; const uniqueArr = []; arr.forEach((item) => < if (!uniqueArr.includes(item)) < uniqueArr.push(item); >>); console.log(uniqueArr); // [1, 2, 3, 4, 5]В этом примере мы используем метод .forEach для итерации по каждому элементу массива и применения функции, которая проверяет, находится ли уже текущий элемент в массиве uniqueArr . Если это не так, мы добавляем его в массив uniqueArr . Результирующий массив содержит только уникальные значения.
5. Использование цикла for
Использование цикла for является наименее эффективным способом удаления дубликатов из массива. Он требует больше кода и вычислительной мощности, и он не такой лаконичный, как другие методы. Вот пример:
const arr = [1, 1, 2, 2, 3, 4, 4, 5]; const uniqueArr = []; for (let i = 0; i < arr.length; i++) < if (!uniqueArr.includes(arr[i])) < uniqueArr.push(arr[i]); >> console.log(uniqueArr); // [1, 2, 3, 4, 5]В этом примере мы используем цикл for для итерации по каждому элементу массива. Проверяем, есть ли текущий элемент в массиве uniqueArr . Если это не так, мы добавляем его в массив uniqueArr . Результирующий массив содержит только уникальные значения.
Итоги
Удаление дубликатов из массива является распространенной задачей в JavaScript. В этой статье мы рассмотрели пять различных способов выполнения этой задачи с помощью JavaScript. Каждый метод имеет свои преимущества и недостатки, поэтому вам решать, какой метод наилучшим образом соответствует вашим потребностям. Независимо от того, используется ли объект Set , метод .filter , метод .reduce , метод .forEach или цикл for , можно легко удалить дубликаты из массива и более эффективно обрабатывать данные.
Методы оптимизации JavaScript для более быстрой загрузки веб-сайта. Подробное руководство
8 месяцев назад · 11 мин. на чтение
Освойте оптимизацию JavaScript для повышения производительности веб-сайта: минимизируйте размеры файлов, уменьшите количество запросов, используйте кэширование и асинхронную загрузку, а также используйте лучшие практики для более быстрой загрузки и улучшения UX.
В современном быстро меняющемся цифровом мире производительность веб-сайта играет решающую роль в определении успеха любого онлайн-бизнеса. Быстрый, отзывчивый и удобный веб-сайт не только привлекает и удерживает посетителей, но и способствует повышению рейтинга в поисковых системах, повышению коэффициента конверсии и улучшению пользовательского опыта (UX). Как инженер-программист или веб-разработчик, важно расставить приоритеты в методах оптимизации производительности в своих проектах. В этой статье рассмотрим различные методы оптимизации кода JavaScript, включая минимизацию размеров файлов, сокращение сетевых запросов, использование кэширования и асинхронной загрузки, а также использование лучших практик для обеспечения более быстрой загрузки и улучшения UX.
Минимизация размеров файлов
Одним из важнейших факторов, влияющих на время загрузки веб-сайта, является размер файлов, предоставляемых пользователю. Загрузка больших файлов занимает больше времени и может привести к медленной загрузке вашего веб-сайта, что приведет к неоптимальному взаимодействию с пользователем. Файлы JavaScript не являются исключением, и оптимизация их размеров является фундаментальным шагом в повышении производительности вашего сайта. Минификация — это процесс удаления ненужных символов (таких как пробелы, комментарии и разрывы строк) и сокращения имен переменных в коде JavaScript без ущерба для его функциональности. Это приводит к значительно меньшему размеру файла, что, в свою очередь, приводит к более быстрой загрузке и повышению производительности.
Пример кода JavaScript: до и после минификации
Давайте посмотрим на простой пример, чтобы понять влияние минификации на размер файла: Перед минификацией:
// Функция вычисления суммы двух чисел function addNumbers(num1, num2) < return num1 + num2; >// Вызов функции для вычисления суммы 3 и 5 const sum = addNumbers(3, 5); // Вывод результата в консоль console.log("The sum is:", sum);function addNumbers(n,e)const sum=addNumbers(3,5);console.log("The sum is:",sum);Как вы можете видеть, уменьшенная версия кода значительно меньше, с удаленными ненужными символами и сокращенными именами переменных. Это приводит к меньшему размеру файла и более быстрой загрузке, не влияя на функциональность кода.
Сжатие файлов
Сжатие — это еще один метод, используемый для уменьшения размера файлов, что приводит к сокращению времени загрузки веб-сайта. Он работает, применяя алгоритмы для сжатия данных в файлах, делая их меньше без потери их функциональности. Когда браузер запрашивает сжатый файл, он распаковывается на лету, что позволяет правильно отображать и выполнять содержимое. Существует два широко используемых алгоритма сжатия файлов JavaScript: Gzip и Brotli. Gzip долгое время был стандартом де-факто, но Brotli, новый алгоритм сжатия, разработанный Google, становится все более популярным благодаря превосходной степени сжатия и скорости.
Методы сжатия Gzip и Brotli
Gzip: Gzip — это широко распространенный алгоритм сжатия, который может значительно уменьшить размер файлов JavaScript. Gzip использует алгоритм Deflate, который сочетает в себе кодирование LZ77 и Huffman для эффективного сжатия данных. Brotli: Brotli — это более новый алгоритм сжатия, разработанный Google, обеспечивающий лучшую степень сжатия, чем Gzip. Brotli использует комбинацию LZ77, кодирования Хаффмана и новой техники моделирования контекста для достижения более высоких степеней сжатия. В большинстве случаев Brotli превосходит Gzip как по степени сжатия, так и по скорости, что делает его привлекательным вариантом для современных веб-приложений.
Конфигурация на стороне сервера для сжатия
- Apache: Включите модуль mod_deflate для сжатия Gzip или mod_brotli для сжатия Brotli и настройте соответствующие параметры в файле .htaccess или конфигурации виртуального хоста.
- Nginx: Используйте директивы gzip или brotli в конфигурационном файле Nginx, чтобы включить сжатие и указать настройки.
- Node.js: Для серверов на базе Node.js вы можете использовать промежуточное программное обеспечение (middleware), такое как compression для Gzip или shrink-ray-current для Brotli в сочетании с Express или аналогичным веб-фреймворком.
Бандлинг для сокращения сетевых запросов
Сокращение количества сетевых запросов имеет решающее значение для повышения производительности веб-сайта, поскольку каждый запрос увеличивает задержку и потребляет пропускную способность.
Что такое бандлинг?
Бандлинг — это процесс объединения нескольких файлов JavaScript в один файл. Это уменьшает количество HTTP-запросов, которые необходимо сделать браузеру, тем самым ускоряя процесс загрузки. Объединение может значительно повысить производительность веб-сайта, особенно для веб-сайтов с большим количеством файлов JavaScript меньшего размера.
Инструменты для бандлинга
- Webpack: Webpack — это мощный и гибкий сборщик модулей, который не только объединяет файлы JavaScript, но и обрабатывает другие ресурсы, такие как css и изображения. Он имеет надежную экосистему плагинов, позволяющую расширять его функциональность по мере необходимости.
- Rollup: Rollup — еще один популярный сборщик модулей JavaScript, ориентированный на простоту и производительность. Он особенно хорошо подходит для объединения библиотек и может выводить несколько форматов, включая модули CommonJS, AMD и ES.
Пример кода JavaScript: объединение нескольких файлов
Чтобы продемонстрировать процесс объединения, предположим, что у вас есть три отдельных файла JavaScript:
// main.js import < greet >from './greeting.js'; import < calculate >from './math.js'; console.log(greet('John')); console.log(calculate(5, 3));// greeting.js export function greet(name) < return `Hello, $!`; >// math.js export function calculate(x, y)Используя инструмент бандлинга, такой как Webpack или Rollup, вы можете объединить эти файлы в один связанный файл. Выходные данные могут выглядеть примерно так:
(function () < 'use strict'; function greet(name) < return `Hello, $!`; > function calculate(x, y) < return x * y; >console.log(greet('John')); console.log(calculate(5, 3)); >)();Как видите, результирующий файл содержит весь необходимый код из исходных файлов в одном автономном блоке, что сокращает количество сетевых запросов, необходимых для загрузки скриптов. Минимизируя количество запросов, вы можете сократить время, необходимое браузеру для загрузки и обработки необходимых ресурсов, что приведет к более быстрой загрузке и более отзывчивому взаимодействию с пользователем.
Использование спрайтов для изображений и иконок
Использование спрайтов изображений — еще один метод сокращения сетевых запросов и повышения производительности веб-сайта. Спрайты — это, по сути, один файл изображения, содержащий несколько изображений меньшего размера, таких как значки или элементы пользовательского интерфейса.
Что такое спрайт изображения
Спрайт изображения — это большое изображение, содержащее несколько изображений меньшего размера, расположенных в виде сетки. В коде CSS или JavaScript вы можете ссылаться на отдельные изображения в спрайте, указывая их положение и размеры. Этот метод позволяет загружать множество изображений с помощью всего одного HTTP-запроса, уменьшая задержку и сокращая время загрузки.
Создание спрайтов изображений
- Инструменты генератора спрайтов: Онлайн-инструменты, такие как SpritePad или Stitches, позволяют загружать несколько изображений и автоматически генерировать спрайт вместе с соответствующим кодом CSS.
- Программное обеспечение для редактирования изображений: такие программы, как Adobe Photoshop или GIMP, можно использовать для ручного создания спрайтов, упорядочивая меньшие изображения в новом файле и экспортируя результат в виде одного изображения.
Пример кода CSS: использование спрайтов изображений
Предположим, что есть изображение спрайта с именем icons.png , содержащее несколько значков. Вы можете использовать следующий CSS код для отображения отдельных значков в качестве фоновых изображений для разных элементов:
.icon < width: 32px; height: 32px; background-image: url('icons.png'); >.icon-search < background-position: 0 0; >.icon-settings < background-position: -32px 0; >.icon-userКаждый класс значков определяет положение соответствующей иконки внутри спрайта, что позволяет отобразить нужное изображение без дополнительных HTTP-запросов. Объединяя эти меньшие изображения в один файл, браузеру нужно запросить только одно изображение, уменьшая количество HTTP-запросов.
Ленивая загрузка ресурсов
Ленивая загрузка — это метод, который откладывает загрузку некритических ресурсов до тех пор, пока они действительно не понадобятся. Это означает, что вместо того, чтобы загружать все ресурсы заранее, вы загружаете только те, которые необходимы для немедленного просмотра, в то время как остальные извлекаются по мере их актуальности. Отложенная загрузка может значительно улучшить начальное время загрузки и воспринимаемую производительность веб-сайта, особенно при работе с большими ресурсами, такими как изображения или длинные скрипты.
Пример кода JavaScript: реализация отложенной загрузки
Чтобы проиллюстрировать отложенную загрузку, давайте воспользуемся примером загрузки изображений только тогда, когда они становятся видимыми в окне просмотра. Это можно сделать с помощью API IntersectionObserver . Вот простая реализация: Во-первых, добавьте data-src к элементам изображения, содержащий фактический источник изображения:
Затем создайте скрипт, который настраивает IntersectionObserver для загрузки изображений по мере их поступления в окно просмотра (viewport):
document.addEventListener('DOMContentLoaded', function () < const lazyImages = [].slice.call(document.querySelectorAll('.lazy-load')); if ('IntersectionObserver' in window) < const lazyImageObserver = new IntersectionObserver(function (entries, observer) < entries.forEach(function (entry) < if (entry.isIntersecting) < const lazyImage = entry.target; lazyImage.src = lazyImage.dataset.src; lazyImage.classList.remove('lazy-load'); lazyImageObserver.unobserve(lazyImage); >>); >); lazyImages.forEach(function (lazyImage) < lazyImageObserver.observe(lazyImage); >); > >);В этом примере IntersectionObserver следит за тем, чтобы изображения .lazy-load попадали в окно просмотра. При обнаружении изображения атрибуту src присваивается атрибут data-src , что приводит к фактической загрузке изображения. После загрузки образа класс .lazy-load удаляется, и наблюдение за изображением останавливается ( .unobserve() ). Используя эту простую технику отложенной загрузки, вы можете гарантировать, что загружаются только те изображения, которые в данный момент находятся в поле зрения, уменьшая количество сетевых запросов и улучшая начальное время загрузки вашего веб-сайта.
Использование кэширования
Производительность веб-сайта является решающим фактором в обеспечении отличного пользовательского опыта. Одним из важных методов повышения производительности является кэширование, которое позволяет браузерам хранить копии ресурсов вашего веб-сайта, таких как изображения, таблицы стилей и скрипты. Это снижает потребность в повторных загрузках и ускоряет время загрузки. В этом разделе мы рассмотрим концепцию кэширования и то, как вы можете использовать его для повышения производительности вашего сайта.
Кэширование браузера
Кэширование браузера — это механизм, который позволяет веб-браузерам локально хранить копии файлов веб-сайта. Когда пользователь повторно посещает ваш сайт, браузер может загружать эти ресурсы из кэша вместо того, чтобы загружать их снова, что приводит к более быстрой загрузке и снижению нагрузки на сервер. Настроив сервер на доставку соответствующих заголовков кэширования, можно контролировать, какие ресурсы кэшируются и на какой срок.
Заголовки Cache-Control и ETag
Двумя важными заголовками для управления кэшированием браузера являются Cache-Control и ETag . Заголовок Cache-Control позволяет задать директивы кэша, такие как максимальный срок службы ресурса в кэше или необходимость его повторной проверки. Например, можно использовать Cache-Control: public, max-age=3600 , чтобы указать, что ресурс может кэшироваться в течение одного часа. Заголовок ETag предоставляет уникальный идентификатор (обычно хэш) для определенной версии ресурса. Когда браузер запрашивает ресурс, он отправляет значение ETag , которое находится в его кэше. Если значение ETag сервера совпадает со значением, отправленным браузером, сервер отвечает статусом 304 Not Modified , и браузер использует кэшированную версию. Этот механизм помогает гарантировать, что браузер всегда имеет самую последнюю версию ресурса.
Настройка кэширования на стороне сервера
Чтобы включить кэширование браузера, необходимо настроить сервер на доставку соответствующих заголовков для ресурсов. Этот процесс зависит от программного обеспечения сервера. Например, на сервере Apache вы можете использовать файл .htaccess для установки заголовков кэширования:
Header set Cache-Control "public, max-age=86400" Эта конфигурация задает заголовок Cache-Control для файлов CSS, JS, JPG и PNG, что позволяет кэшировать их в течение 24 часов. Используя кэширование браузера, вы можете значительно сократить объем данных, которые необходимо извлекать при повторном посещении пользователем вашего сайта, ускоряя время загрузки и улучшая общий пользовательский опыт.
Использование асинхронной загрузки
По мере усложнения веб-сайтов управление загрузкой файлов JavaScript становится все более важным для производительности. По умолчанию браузеры загружают скрипты синхронно, блокируя процесс отрисовки до тех пор, пока скрипт не будет полностью загружен и выполнен. Асинхронная загрузка позволяет загружать скрипты параллельно с другими ресурсами, предотвращая их блокировку рендеринга и сокращая общее время загрузки. В этом разделе мы обсудим, как использовать асинхронную загрузку файлов JavaScript для повышения производительности вашего веб-сайта.
Асинхронная загрузка файлов JavaScript
Асинхронная загрузка позволяет браузерам загружать и выполнять файлы JavaScript, не блокируя рендеринг остальной части страницы. Такой подход не только ускоряет первоначальный рендеринг вашего веб-сайта, но и снижает риск того, что медленный или не отвечающий скрипт вызовет задержки. С помощью атрибутов async и defer можно управлять загрузкой и выполнением файлов JavaScript.
Использование атрибутов Async и Defer
- async : атрибут async указывает браузеру загрузить сценарий, не блокируя рендеринг. Как только скрипт будет загружен, браузер приостановит рендеринг для его выполнения. Это полезно для скриптов, которые не полагаются на другие скрипты или полную загрузку модели DOM.
- defer : атрибут defer предписывает браузеру загрузить скрипт, не блокируя рендеринг, но откладывает выполнение до тех пор, пока модель DOM не будет полностью проанализирована. Это полезно для скриптов, зависящих от модели DOM или других скриптов.
Пример кода JavaScript: использование async и defer
Рассмотрим пример использования атрибутов async и defer в HTML-файле:
В этом примере main.js загружается с атрибутом defer , гарантируя, что он не будет блокировать рендеринг и будет выполнен после полного анализа DOM. Между тем, analytics.js загружается с атрибутом async , что позволяет ему загружаться и выполняться независимо от остальной части страницы. Используя асинхронную загрузку файлов JavaScript, вы можете свести к минимуму ресурсы, блокирующие рендеринг, и повысить производительность и удобство работы вашего веб-сайта.
Использование лучших практик для более быстрой загрузки и улучшения UX
Оптимизация веб-сайта — это непрерывный процесс, и для максимальной производительности важно идти в ногу с последними передовыми методами.
Разделение кода
- Webpack: Этот популярный сборщик предлагает встроенную поддержку разделения кода. Используя функцию динамического импорта import() , вы можете загружать модули JavaScript по запросу, сокращая время первоначальной загрузки.
- React.lazy: Если вы используете React, функция React.lazy позволяет загружать компоненты лениво по мере необходимости, что еще больше оптимизирует ваше приложение.
Пример кода JavaScript: реализация разделения кода
Ниже приведен пример разделения кода с помощью Webpack и React:
import React, < lazy, Suspense >from 'react'; // Ленивая загрузка компонента с React.lazy const MyComponent = lazy(() => import('./MyComponent')); function App() < return (>>Loading.