Привет, спасибо за видео, насчёт первого пункта не согласен. Ты скорее всего взял изображение пнг для сравнение без сжатия, пнг намного лучше как мне кажется сжимается, и при сжатии пнг размер у него все же меньше чем у вебп. Для сжатия пнг юзаю tinyjpg, как и говорил ранее размер все же меньше чем при сжатии webp
Так я изначально и webp взял без сжатия. По поводу того, что из них лучше сжимается, проверю чуть позже. Но обычно вебп всегда сжималось лучше. В общем, потестирую чуть позже :)
Смотрю ваш канал уже несколько дней, по плейлистам с нуля научился верстать макет практически любой сложности, сейчас почти изучил основы js. Дай бог вам здоровья за ваш труд. Нет слов описать благодарность, я очень вами восхищен)
спасибо большое, подписался. конечно я на некстжс работаю в данный момент и там много уже оптимизаций из коробки но всё равно полезный обзор, ещё я подключал библиотеку react-intersection-observer которая при попадании элемента в окно браузера подгружает DOM элемент. так же благодаря ей удобно динамически подгружать на клиенстких компонентах данные с сервера при попадании в область видимости.
Спасибо за интересное видео! 👍 Насчёт 11-го пункта не согласен. Цикл for...in является крайне медленным и трудно оптимизируемым. Руководство по написанию JS-кода Google JavaScript Style Guide (пункт 5.8.1) рекомендует по возможности отдавать предпочтение другим альтернативным способам обхода по собственным перечисляемым свойствам объекта. Блок "через for" некорректен для оценки перформанса, поскольку ничего не делает (является по сути "мёртвым кодом"). При корректном сравнении преимущество будет отнюдь не на стороне for...in.
23:43 - насколько это разумно, учитывая, что хттп запросы обычно и так сжимаются через гзип и пр алгоритмы? Повторяющиеся ключи в объектах будут подменятся на фразы из словаря компрессора, в из-за чего выигрыш в сокращении этих слов будет сомнителен
Ну, сами данные, насколько я знаю, он не сжимает. Потому что их потом нужно разжать. Написал простенький сервер для тестов на ноде. Тут я получаю json и сжимаю через gzip. Если в jsonData подставить json: const jsonData = JSON.stringify(json); То на выходе я скачал 4кб данных. Если подставить newJson: const jsonData = JSON.stringify(newJson); То будет 3.9кб. Разница всего в 1кб, но это потому что json маленький. _____ P.S. Я надеюсь, что вы именно это имели ввиду. Код для тестов: import express from 'express'; import zlib from 'zlib'; const app = express(); const url = 'jsonplaceholder.typicode.com/todos'; app.get('/', (req, res) => { fetch(url) .then(response => response.json()) .then(json => { const newJson = json.map((data) => ({ uI: data.userId, i: data.id, t: data.title, c: data.completed })); const jsonData = JSON.stringify(newJson); const gzip = zlib.createGzip(); res.setHeader('Content-Type', 'application/json'); res.setHeader('Content-Encoding', 'gzip'); res.writeHead(200); gzip.pipe(res); gzip.write(jsonData); gzip.end(); }) }); app.listen(3000);
Не упомянул чанкинг node modules. Популярные сборщики имеют функцию подключения npm пакетов только на тех страницах, где они используются в js. Использовал эту фичу в работе, на больших проектах сильно ускоряет загрузку страниц
Очень круто, конечно, но, если я правильно понял, мы сжимаем все, но при этом используем библиотеки, которые имеют вес. Оптимизации не видно, в конечном счете
Библиотеки хоть и имеют вес, но совсем небольшой. А вот пользы приносят намного больше. Давай посчитаем Библиотека knip не попадает в финальный билд. Ее вес не учитываем. ReactVirtualized - 30 килобайт cdn.jsdelivr.net/npm/react-virtualized@9.22.5/dist/umd/react-virtualized.min.js Весит хоть и много, но тут уже сам смотри, что важнее. Скачать 30 килобайт, либо отрисовывать кучу элементов в дом дереве. Плюс эта куча элементов может отрисовываться в разных местах, а библиотеку можно скачать один раз и даже попросить браузер ее закэшировать MessagePack - 9 килобайт cdn.jsdelivr.net/npm/@msgpack/msgpack@3.0.0-beta2/dist.es5+umd/msgpack.min.js Если мы данных по сети гоняем больше, чем на 9 килобайт, то имеет смысл ее подключить. React Lottie - 2 килобайта cdn.jsdelivr.net/npm/react-lottie@1.2.4/dist/index.min.js Библиотека для debounce / throttle по идее вообще не нужна. Это две простые функции на 10 строк кода, которые можно вручную реализовать Ну и вроде все по библиотекам :)
@@kakieToYroki все зависит от задачи и времени на ее исполнение. Я не думаю, что для стартапа/продукта ты будешь писать свою виртуализацию или для оптимизации писать messagePack. Умение правильно выставлять приоритеты - ключ к успеху!
9 сортировка, не совсем правильная оценка как мне кажется, и результат, в первом "неоптимальном случае" мы сортируем массив значений, что бы в нем небыло, и его же на выходе получаем отсортированный, а в "оптимизированном" варианте, сортируются числа, и на выходе массив чисел а не строковых дат, к примеру.в таком случае актуальнее сортировать структуры с оригинаьным значением и промапленным, однако такие варианты тяжелее для восприятия в рамках одной минуты )
Понятия не имею, откуда вы взяли эти цифры. Вот либа из видео, она весит 53кб cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.3/lottie.min.js Вот версия для реакта, которую я показывал в видео. Весит 2кб cdn.jsdelivr.net/npm/react-lottie@1.2.4/dist/index.min.js Плюс нужно помнить, что на сайте может быть не одна, а N гифок. Поэтому нужно иметь свою голову на плечах и посчитать все данные, перед тем как грузить либу. У вас может быть одна маленькая гифка на весь сайт. Вы можете ее сжать и получить размер даже меньше lottie библиотеки. Разумеется, в таком кейсе нет смысла целую либу грузить
На новой работе встретился с тем, что линтер ругается на for in, hasOwnProperty , приходится какие-то окольные методы использовать) А это оказывается быстрее
Линтер, возможно, ругается из-за нарушения правила `eslint: no-prototype-builtins`, согласно которому метод hasOwnProperty не рекомендуется вызывать на самом объекте. Во-первых, это небезопасно, так как свойство может быть переопределено у объекта. Во-вторых, прототипом объекта может быть не Object, а null. Например, при создании объекта через Object.create(null) или Object.groupBy(arr, func) этот метод в нём попросту будет отсутствовать. Поэтому, в Airbnb JavaScript Style Guide (пункт 3.7) рекомендуется вызывать данный метод у прототипа: Object.prototype.hasOwnProperty.call(obj, key). К тому же в Google JavaScript Style Guide (пункт 5.3.3) не рекомендуется использовать hasOwnProperty при "structs"-форме объектного литерала. А вместо цикла for...in с методом hasOwnProperty предлагается по возможности отдавать предпочтение более эффективным способам обхода объекта: for...of (для итерируемых объектов) или Object.keys/Object.values/Object.entries (пункт 5.8.1).
@@kakieToYroki В блоке "через for" на видео (12:09) у нас идёт обход по перечисляемым (enumerable) свойствам пустого массива и его цепочки прототипов. Учитывая, что ни пустой массив items, ни Array, ни Object не содержат перечисляемых свойств, то цикл for...in не совершит ни единой итерации. Чтобы сделать блок "через for" эквивалентным блоку "через map", нужно переписать первый блок примерно так: const items = []; for (const key in myObject) { const has = Object.prototype.hasOwnProperty; if (!has.call(myObject, key)) continue; const value = myObject[key]; items.push(value.item); } Примечательно, что два обхода (Object.values и метод map) вдруг окажутся заметно шустрее одного обхода с медлительным for...in. 🧐
Я попробовал библиотечку knip но она почему-то выдала мне целую кучу Unused exports (62) которые на самом деле используются в других файлах через import. Не могу понять почему так происходит. Вот например: AUTO_POSTING_PERIODS_ARRAY unknown src/common/constants.js:114:14 Идем на 114 строку файлика src/common/constants.js и видим там следующее: export const AUTO_POSTING_PERIODS_ARRAY = [ { value: 'PREVIOUS', name: 'Past' }, { value: 'NEXT', name: 'Next' }, ];
Возможно у вас несколько точек входа в приложение. В моем случае у меня был только файл main.jsx. Но на реальных проектах бывают всякие утилиты, которые запускаются отдельно. У них своя точка входа, независящая от основного приложения. Плюс, возможно, он ругается из-за того, что вы написали export, но нигде не написали import. Если вы эту константу используете только в этом файле, то уберите export
Уже писал этот комментарий, но повторюсь: Вот либа из видео, она весит 53кб cdnjs.cloudflare.com/ajax/libs/lottie-web/5.7.3/lottie.min.js Вот версия для реакта, которую я показывал в видео. Весит 2кб cdn.jsdelivr.net/npm/react-lottie@1.2.4/dist/index.min.js Плюс нужно помнить, что на сайте может быть не одна, а N гифок Также и наоборот, у вас может быть одна маленькая гифка на весь сайт. Вы можете ее сжать и получить размер даже меньше lottie библиотеки. Разумеется, в таком кейсе нет смысла целую либу грузить
![Оптимизация Frontend приложений (23 совета) | Оптимизация Web, полный курс 2024 [для новичков]](/img/logo.svg){kind=logo}
