(Перевод) Контрольный список по оптимизации производительности внешнего интерфейса на 2019 год — часть 2

оптимизация производительности

содержание

Оптимизация ресурсов

17. ИспользованиеBrotliили Zopfli для сжатия обычного текста

В 2005 году,Google запускаетохватыватьBrotli, новый формат сжатия данных без потерь с открытым исходным кодом,Все современные браузеры поддерживают. На самом деле Brotli быстрее, чем Gzip и Deflate.Более эффективно. Сжатие может быть очень медленным в зависимости от настроек, но медленный процесс сжатия увеличит коэффициент сжатия. Он по-прежнему быстро распаковывается, и вы также можетеОцените стоимость сжатия Brotli для вашего сайта.

Браузеры примут его только в том случае, если пользователь заходит на сайт через HTTPS. Brotli еще не предустановлен на некоторых серверах, и его сложно развернуть без самостоятельной сборки NGINX и UBUNTU.Но это не сложно, и его поддержка идет, например,Начиная с Apache 2.4.26Просто используйте его. Brotli широко поддерживается, и многие CDN поддерживают его (Akamai,AWS,KeyCDN,Fastly,Cloudlare,CDN77), можно дажеОн еще не поддерживается на CDN. Включить Бротли(с обслуживающим персоналом).

На самом высоком уровне сжатия Brotli может стать настолько медленным, что время, необходимое серверу для начала отправки ответов в ожидании динамически сжатых ресурсов, может сделать нашу оптимизацию размера файла недействительной. Однако для статического сжатияПредпочтительны настройки с высокой степенью сжатия.- (Спасибо, Джереми!)

В качестве альтернативы вы можете рассмотреть возможность использованияАлгоритм сжатия Zopfli, который кодирует данные какDeflate,Gzipа такжеZlibФормат. Улучшенное кодирование Zopfli Deflate приносит пользу любому файлу, сжатому с помощью Gzip, поскольку эти файлы на 3-8% меньше, чем при самом сильном сжатии Zlib. Проблема в том, что для сжатия файла требуется примерно в 80 раз больше времени. Вот почему, хотя использование Zopfli является хорошей идеей, оно мало что меняет, файлы должны быть спроектированы таким образом, чтобы их можно было сжать один раз и загрузить несколько раз.

Более того, вы можете обойти затраты на динамическое сжатие статических ресурсов. И Brotli, и Zopfli можно использовать для передачи открытого текста — HTML, CSS, SVG, JavaScript и т. д.

Там в любом случае? Динамическое сжатие HTML на самом высоком уровне и уровнях Brotli 1-4Предварительное сжатие статических ресурсов с помощью Brotli+Gzip.同时，检查 Brotli 是否支持 CDN，（例如KeyCDN，CDN77，Fastly）。 Убедитесь, что сервер может обрабатывать содержимое с помощью Brotli или gzip. Если вы не можете установить или поддерживать Brotli на своем сервере, используйте Zopfli.

18. Использованиеадаптивные изображенияа такжеWebP

пройти как можно дальшеsrcset,sizesа также<picture>использование элементаАдаптивные изображения. также через<picture>использование элементаИзображения в формате WebP(скоро будут поддерживаться Chrome, Opera, Firefox) или обратный вызов JPG (см.code snippet) или с помощью согласования содержимого (используя заголовок Accept). В Ире Адеринокун также естьОчень подробное руководство по конвертации изображений в WebP.

Sketch изначально поддерживает WebP, а изображения WebP можно получить с помощьюВеб-плагинЭкспорт из фотошопа. у вас также естьДругие вариантыможно использовать. Вы можете использовать WordPress или Joomla, есть и другие расширения, которые могут легко поддерживать WebP, например.Optimusа такжеCache Enablerтак же какСобственные поддерживаемые расширения Joomla(пройти черезCody Arsenault).

Вы должны знать, что, хотя размер файла изображения WebP такой же, какГетцли и Цопфли примерно одного размера., но форматПрогрессивный рендеринг, такой как JPEG, не поддерживается., поэтому пользователи быстрее увидят фактическое изображение при использовании старого доброго JPEG, хотя изображения WebP могут загружаться в сети быстрее. С JPEG мы можем гарантировать хорошее взаимодействие с пользователем с половиной или даже четвертью данных, а затем загрузить остальные, не отображая полупустое изображение, как это делает WebP. Ваше решение зависит от ваших целей: если вы используете WebP, вы снизите нагрузку на сеть, если вы используете JPEG, вы улучшите пользовательский опыт.

В Smashing Magazine мы используем суффикс -opt для имен изображений, например, brotli-compression-opt.png; всякий раз, когда изображение содержит этот суффикс, члены команды знают, что изображение было оптимизировано. Также - бесстыдная пробка! - Джереми Вагнер вПотрясающая книга, опубликованная на WebP.

Генератор точек останова адаптивного изображенияАвтоматическая генерация изображений и генерация маркеров.

19. Правильно ли оптимизированы изображения?

Теперь у вас есть критическая целевая страница, скорость загрузки определенного изображения имеет решающее значение, убедитесь, что файлы JPEG являются прогрессивными, и используйте Adept,mozJPEG(улучшить время начала рендеринга, манипулируя уровнем сканирования) илиGuetzliСжатие, новый кодировщик Google с открытым исходным кодом, ориентирован на сенсорную производительность и опирается на Zopfli и WebP.Единственным недостатком является: медленное время обработки (одна минута на мегапиксель ЦП). Что касается png, мы можем использоватьPingoи svgo, для обработки SVG используемSVGOилиSVGOMG.

Каждая статья оптимизации изображения объяснит, но всегда есть напоминание о том, чтобы ваши векторные активы были чистыми и жесткими. Обязательно убирайте неиспользуемые ресурсы, удалите ненужные метаданные и уменьшите количество точек пути в вашем произведении искусства (и, таким образом, код SVG). (Спасибо, Джереми!)

Но вот несколько лучших способов:

  • использоватьSquooshСжимайте, изменяйте размер и управляйте изображениями с наилучшим уровнем сжатия (с потерями или без потерь).
  • использоватьГенератор точек останова адаптивного изображенияилиCloudinaryилиImgixи другие сервисы для автоматической оптимизации изображений. Кроме того, во многих случаях, используя толькоsrcsetа такжеsizeТоже будет очень хороший эффект.
  • можно использоватькуча изображенийПроверьте эффективность адаптивной разметки — инструмента командной строки, который также можно использовать для измерения эффективности размера области просмотра и соотношения пикселей устройства.
  • ленивая загрузка сlazysizesimages и iframes, библиотека, которая обнаруживает любые изменения на странице, вызванные взаимодействием с пользователем (или IntersectionObserver, который мы рассмотрим позже).
  • Обратите особое внимание на изображения, которые будут загружены по умолчанию, но могут никогда не отображаться, например карусели, аккордеоны и галереи изображений.
  • Рассмотрите возможность указания различных размеров отображаемых изображений на основе медиа-запросов.Swap имеет свойство размеров, например манипулирование размерами для замены источника в компоненте увеличительного стекла.
  • Проверьте изображениеСкачать несоответствия, чтобы предотвратить случайную загрузку изображений переднего плана и фона.
  • Чтобы оптимизировать внутреннюю память, вы можете использовать новую функцию Dropbox.лептонный форматВыполняется сжатие, сжимающее jpeg в среднем на 22%.
  • Уведомлениеaspect-ratio CSSа такжеintrinsicsize-attributeсвойства в , они позволяют нам установить соотношение сторон и размер изображения, чтобы браузер мог заранее зарезервировать предопределенный слот макета дляизбегатьпоявляется во время загрузки страницыПрыжок макета.
  • Если вы хотите использовать другой способ, вы можете попробоватьEdge worker(фильтр реального времени на основе CDN), чтобы обрезать и переупорядочивать потоки HTTP/2 для более быстрой отправки изображений по сети. Пограничные рабочие используют поток фрагментов JavaScript, которым вы можете управлять (по сути, это JavaScript, работающий на краю CDN, который может изменять ответ потоковой передачи), поэтому вы можете контролировать доставку изображений. Для серверных рабочих это слишком поздно, потому что вы не можете контролировать то, что передается по сети, но это работает для пограничных рабочих. Таким образом, вы можете использовать их поверх неподвижных файлов JPEG, которые постепенно сохраняются для конкретной целевой страницы.

стек изображенийПример вывода, инструмент командной строки для измерения размера представления и эффективности соотношения пикселей устройства.

вместе сКлиентские подсказки (client-hints)Принятие адаптивных изображений может кардинально измениться в будущем. Подсказка клиента — это поле заголовка HTTP-запроса, напримерDPR,Viewport-Width,Width,Save-Data,Accept(Укажите предпочтения формата изображения) и т. д. Они заполняют макет, информируя сервер о деталях пользовательского браузера, экрана, подключения и т. д. Через клиентскую подсказку мы можем отправить запрос на передачу ресурса из HTML-тега клиенту, а серверу — согласование ответа.

так какКак указал Илья Григорик, клиент намекает, что изображение готово — они не являются заменой адаптивным изображениям.<picture>Элементы обеспечивают необходимый контроль художественного направления в HTML-разметке. Клиентские подсказки предоставляют аннотации для сгенерированных запросов изображений, что позволяет автоматизировать выбор ресурсов. Service Workers предоставляют полные возможности управления запросами и ответами на стороне клиента. Например, сервис-воркер может добавлять в запросы новые значения заголовков client-hint, переписывать URL-адреса и запросы изображений в CDN, корректировать ответы в зависимости от подключения и предпочтений пользователя и т. д. Он работает не только с ресурсами изображений, но и почти со всеми остальными запросами.

Для клиентов, поддерживающих клиентские подсказки, на изображенииСохранить 42% байт, сэкономьте 1 МБ+ байт на 70%+ процентах. В Smashing Magazine мы также можем измерить19-32% улучшение. Жаль, что подсказки клиенту все еще нужныПолучить поддержку браузера,Firefox находится на рассмотрении. Однако, если и обычный тег изображения ответа, и<meta>Marks CUE CUE, браузер в ответ на изображения оценки и использует спученный заголовок HTTP-готовка клиента подсказки. Запрашивайте подходящий ресурс изображения.

Если этого недостаточно. Вы также можете использоватьмного задний план изображение ТехнологияУлучшить производительность изображения. пожалуйста, помните,использовать контрастА размытие ненужных деталей (или удаление цветов) также может уменьшить размер файла. Если вам нужно увеличить небольшую фотографию без ущерба для качества изображения, рассмотрите возможность использованияLetsenhance.io.

До сих пор эти оптимизации касались только основ. Эдди Османи выпустила очень подробныйРуководство по базовой оптимизации изображений, который подробно описывает сжатие изображений и управление цветом. Например, вы можете размыть ненужные части изображения (применив к ним фильтр размытия по Гауссу), чтобы уменьшить размер файла, или даже удалить цвета или сделать изображение черно-белым, чтобы еще больше уменьшить размер изображения. Если это фоновое изображение, также абсолютно допустимо экспортировать фотографию из Photoshop с качеством от 0 до 10%. советую всемНе используйте JPEG-XR в Интернете.

20. Правильно ли оптимизировано видео?

До сих пор мы говорили о некоторых изображениях, но не говорили об изображениях в формате GIF. Честно говоря, если вы не загружаете тяжелые анимированные GIF-файлы, которые влияют на производительность рендеринга и пропускную способность, рекомендуется переключиться на анимированный WebP (GIF — запасной вариант) или использоватьЗациклить видео HTML5заменить их. да, браузериметь дело сvideoочень медленный, и, в отличие от изображений, браузер не загружаетvideoсодержание, ноvideoЧасто легче и меньше, чем гифки. По крайней мере, мы можем использоватьLossy GIF,gifsicleилиgiflossyчтобы добавить сжатие с потерями в GIF-файлы.

Ранние испытания показали, чтоimgВстроенное видео в тегахВ 20 раз быстрее дисплей, скорость декодирования выше, чем у GIF-анимации того же размера.в 7 раз быстрее, а размер файла будет лучше, чем у GIF. Хотя правильноПредварительный просмотр технологии Safariслужба поддержки<img src=".mp4">ужевоплощать в жизнь, но далека от широкого распространения, потому чтоНе собираюсь Блинк в ближайшее время.

Addy Osmani предложениеЗамените анимированные GIF-файлы зацикленными встроенными видео. Разница в размере файла заметна (80% экономии).

Однако в этой стране хороших новостей формат видео значительно вырос за эти годы. Долгое время мы надеялись, что WebM станет форматом, который стандартизирует все эти форматы, и что WebP (по сути, статическое изображение в видеоконтейнере WebM) станет заменой устаревшему формату изображений. Однако, хотя WebP и WebM недавноесть служба поддержки, но существенного прорыва у них нет.

В 2018 году Альянс открытых медиа выпустил новый видеоформат под названием AV1. Сжатие AV1 аналогично кодеку H.265 (эволюция H.264), в отличие от последнего, AV1 является бесплатным. Система тарификации H.265 заставляет производителей браузеров переходить на более высокую производительностьОтносительно высокаяАВ1:AV1 (аналог H.265) сжимает в два раза лучше, чем WebP.

AV1很有可能成为网络视频的终极标准。 (Источник изображения:Wikimedia.org)

На самом деле в настоящее время Apple использует формат HEIF и HEVC (H.265), и все фото и видео на последней версии iOS сохраняются именно в этих форматах, а не в JPEG. несмотря на то чтоHEIFа такжеHEVC (H.265)Еще не полностью открыт для Интернета, но AV1 полностью открыт для Интернета иПолучение поддержки браузера. Следовательно, AV1 в вашем<video>Добавление источника в разметку имеет смысл, поскольку все производители браузеров готовятся к поддержке AV1.

В настоящее время наиболее широко используемой и поддерживаемой кодировкой является H.264, обслуживаемый файлами MP4, поэтому обязательно используйтеМногопроходное кодированиеПроцесс MP4, размытыйэффект свободного размытия(если применимо) иmoov atom metadataперейти к заголовку файла, а серверпринять байтовую услугу. Борис Шапира дляFFmpegОбеспечивает наиболее оптимизированное видеоСтандартное описание. Конечно, было бы также полезно предоставить формат WebM в качестве альтернативы.

Производительность воспроизведения видео - это отдельная история, если вы хотите погрузиться в нее, прочитайте Дуга Силлара.видеоа такжеПоследняя серия практических рекомендаций по доставке видео, который включает сведения о показателях доставки видео, предварительной загрузке видео, сжатии и потоковой передаче.

Зак ЛезерманПолное руководство по стратегиям загрузки шрифтовБолее дюжины вариантов для лучшей доставки веб-шрифтов.

21. Правильно ли оптимизированы веб-шрифты?

Сначала нужно задать вопрос, нельзя ли использоватьсистемный шрифт пользовательского интерфейса. Если вы не можете, то есть большая вероятность, что вы используете веб-шрифты, которые содержат глифы и дополнительные функции и полужирный шрифт, которые вам не нужны. Если вы используете шрифт с открытым исходным кодом, вы можете обратиться в компанию по разработке шрифтов.ПолучатьТакже можно использовать подмножество или подмножество веб-шрифтов.GlyphhangerилиFontsquirrelсделай этоподмножество. Вы даже можете использовать Питера МюллераsubfontАвтоматизируйте весь процесс, поскольку это инструмент командной строки, который статически анализирует вашу страницу, затем генерирует оптимальное подмножество веб-шрифтов и, наконец, внедряет их на вашу страницу.

Поддержка WOFF2Очень хорошо, для браузеров, которые не поддерживают WOFF2, вы можете использовать WOFF и OTF в качестве запасных вариантов для браузеров, которые его не поддерживают. Также из книги Зака ​​ЛезерманаПолное руководство по стратегиям загрузки шрифтов(Фрагмент кода такжеМожет использоваться как веб-шрифтЗагрузить фрагменты) выберите стратегию и используйте кэш сервера для постоянного кэширования шрифтов.

Вероятно, лучшим вариантом для рассмотрения сегодня являетсяКлюч FOPH Preload.а такжекомпромиссметод. Оба они используют двухэтапный рендеринг для постепенного обслуживания веб-шрифтов — сначала с использованием небольшого надмножества, необходимого для быстрого и точного рендеринга страницы, а затем асинхронной загрузки остальных. разница заключается в том,компромисстехнология только тогда, когда она не поддерживаетсясобытие загрузки шрифтаПолифилл загружается асинхронно, поэтому по умолчанию полифилл не нужно загружать. Нужно быстрое решение? У Зака ​​Лезермана есть такое23-минутное краткое руководствои тематические исследования, чтобы оптимизировать ваши шрифты.

Обычно используютpreloadПодсказки ресурсов для предварительной загрузки шрифтов — хорошая идея, но включайте подсказки после важных ссылок CSS и JavaScript в вашей разметке. В противном случае загрузка шрифта скажется на первом рендеринге. Однако естьселективныйМожет быть хорошей идеей выборочно выбрать наиболее важные файлы, например те, которые имеют решающее значение для рендеринга, или те, которые помогут вам избежать видимых и повреждающих текстовых переделок. В общем, Зак рекомендуетПредварительно загрузите один или два шрифта из каждого семейства- Если шрифты не очень важны, то рекомендуется ленивая загрузка.

Я считаю, что никто не любит ждать, пока контент будет отображен. использоватьCSS-дескриптор font-display, мы можем управлять поведением загрузки шрифта и сделать содержимое читаемым мгновенно (font-display: optional) или почти сразу читаемый (font-display: swap). Однако, если вы хотитеИзбегайте перекомпоновки текста, нам по-прежнему нужно использовать API загрузки шрифтов, особенно дляреорганизацияпровестигруппировка, или когда вы используете сторонний хост, если вы не можетеИспользование Google Fonts с Cloudflare Workers. Говоря о шрифтах Google: рассмотрите возможность использованияGoogle -webfonts-helper, простой способ самостоятельного размещения Google Fonts. Если возможно, используйтеВсегда размещайте шрифты для собственных проектовспособ получить максимальный контроль.

В общем, если вы используете font-display: необязательно, такженаверное не очень хорошая идея, Поскольку предварительная нагрузка запрашивает запросы веб-шрифта в начале (которые могут вызвать заторы сети, если у вас есть другие критические ресурсы пути, которые необходимо получить). Использование предварительного тока может достичь более быстрых перекрестных запросов шрифта, но следует отметить, что предварительно загружающие шрифты WLLL предварительно загружены из разных источников, вызовут использование сети. Все эти методы покрыты ЗачКак загружаются веб-шрифтысередина.

Кроме того, если пользователь включил настройки специальных возможностейReduce Motionили выбран режим экономии трафика (см.Save-Data header) или когда у пользователя медленное соединение (черезAPI сетевой информации), вам лучше отказаться от веб-шрифтов (или, по крайней мере, второго прохода рендеринга).

Чтобы измерить производительность загрузки веб-шрифта, пожалуйста, рассмотритеВиден весь текстМетрики (момент, когда все шрифты загружены и весь контент в веб-шрифтах), и после первого рендераСчетчик перекомпоновки веб-шрифтов. Очевидно, что чем ниже эти две метрики, тем выше производительность. Важно отметитьпеременный шрифтможет понадобитьсяЗначительная производительность. Они дают дизайнерам более широкое пространство для выбора шрифтов, но это происходит за счет одного последовательного запроса вместо запроса одного файла. Один запрос может заблокировать весь типографский вид на странице. Но хорошая новость заключается в том, что когда у нас есть вариативные шрифты, по умолчанию нам нужно только получитьreflow, вместо необходимостиJavaScriptГрупповые перекраски.

Какой может быть безупречная стратегия загрузки шрифтов? Начните с font-display, затем перейдите к Font Loading API, затем к Bram Stein's.Font Face Observer(Спасибо, Джереми!) Если вы заинтересованы в измерении производительности загрузки шрифтов с точки зрения пользователя, Андреас Маршке исследуетИспользование API шрифтов и API UserTimingпровестиотслеживание производительности.

Также не забудьте включитьfont-display：optionalдескриптор для обеспечения гибкости и быстрого резервного копирования шрифтов,unicode-rangeРазбивка больших шрифтов на более мелкие шрифты для конкретного языка, а также шрифт Моники Динкулеску.сопоставитель стиля шрифтаИспользуется для решения проблемы минимизации вибрации на макете из-за разницы в размерах двух шрифтов.

Оптимизация сборки

22. Расставьте приоритеты

Вы должны знать, чему отдать предпочтение. Запустите все свои статические ресурсы (JavaScript, изображения, шрифты, сторонние скрипты и «дорогие» модули на странице, такие как карусели, сложные диаграммы и мультимедийный контент) и разделите их на группы.

Создайте электронную таблицу. Определите базовый основной опыт (т. е. полностью доступный основной контент) для устаревших браузеров, расширенный опыт (т. е. богатый, полный опыт) и дополнительные возможности (т. е. не обязательные и могут быть отложены) для многофункциональных браузеров. Загруженные ресурсы, такие как веб-шрифты, ненужные стили. , карусели, видеоплееры, кнопки социальных сетей, большие изображения и т. д.). Не так давно мы опубликовали статью оУлучшение производительности Smashing Magazine, в котором есть подробное введение в этот метод.

Нашим приоритетом при оптимизации производительности является загрузка сначала основного опыта, затем улучшений и, наконец, надстроек.

23. Рассмотрите методы резки горчицы

Теперь мы все еще можем использоватьтехника разрезания горчицыПередайте основные возможности устаревшим браузерам и улучшите работу с современными браузерами. технологииследующая версиябуду использоватьES2015 + <script type="module">. Современные браузеры будут интерпретировать сценарий как модуль JavaScript и вести себя должным образом, в то время как устаревшие браузеры не распознают атрибут и проигнорируют его, потому что это неизвестный синтаксис HTML.

На данный момент нам нужно помнить, что одного обнаружения функций недостаточно для принятия решения об отправке полезной нагрузки в браузер. Само по себе вырезание горчицы может сделать вывод о возможностях устройства из версии браузера, чего мы сегодня сделать не можем.

Например: в развивающихся странах дешевые телефоны Android в основном работают под управлением Chrome, который, хотя и имеет ограниченный объем памяти и ЦП, все же достаточен. Наконец, используйтеDevice Memory Client Hints Header, мы можем более надежно идентифицировать недорогие устройства. Теперь заголовки поддерживаются только в Blink (обычно используются дляclient hints). Поскольку хранилище устройства также имеет вызов в ChromeJavaScript API, одним из вариантов является обнаружение функций на основе API и возврат к нему только в том случае, если он не поддерживается.Соответствие стандартамТехнология (спасибо, Йоав!).

24. Синтаксический анализ JavaScript стоит дорого, поэтому делайте его небольшим.

При работе с одностраничным приложением нам нужно некоторое время для инициализации приложения перед отображением страницы. Ваши настройки потребуют индивидуального решения, но вы можете обратить внимание на использование модулей и методов для ускорения первоначального времени презентации. Например, следующееКак отлаживать производительность Reactа такжеУстранение распространенных проблем с производительностью React,так же какКак повысить производительность в Angular. Как правило, большинство проблем с производительностью возникает из-за начального времени анализа при запуске приложения.

JavaScript имеет свою стоимость, но не обязательно размер файла влияет на производительность. Различия во времени синтаксического анализа и выполнения сильно зависят от аппаратного обеспечения устройства. На обычном телефоне (Moto G4) парсинг всего 1 МБ (несжатого) JavaScript занимает примерно 1,3-1,4 секунды, а на парсинг телефона уходит 15-20% времени. В процессе компиляции на подготовку JavaScript уходит в среднем 4 секунды, а на отображение основного содержимого страницы на мобильном телефоне (First Meaningful Paint) — 11 секунд. Объяснение: на недорогих мобильных устройствахВремя синтаксического анализа и выполнения можно легко улучшить в 2–5 раз..

Как разработчик, чтобы гарантировать высокую производительность, нам нужно найти способы писать и развертывать меньше JavaScript, и именно здесь появляется преимущество подробного изучения каждой зависимости JavaScript.

Следующие инструменты могут помочь вам принимать обоснованные решения о влиянии зависимостей и жизнеспособных альтернатив:

Использование Ember, представленное в 2017 годубинарные шаблоныНакладных расходов на синтаксический анализ можно избежать. Используйте их, предложение Эмбера: используйте двоичные шаблоны, чтобы заменить синтаксический анализ JavaScript на синтаксический анализ JSON, который может быть быстрее. (Спасибо, Леонардо, Йоав!)

Измеряйте время разбора и компиляции JavaScript. Мы можем отслеживать время синтаксического анализа с помощью инструментов синтетического тестирования и трассировок браузера, которые разработчики браузеров обсуждают в будущем.Показать время обработки на основе RUM. В качестве альтернативы вы также можете рассмотреть возможность использования Etsy.DeviceTiming, виджет, который позволяет указать JavaScript для измерения времени синтаксического анализа и выполнения на любом устройстве или в любом браузере.

Самое главное: хотя сценарий важен, это не все. Поскольку размер сценария увеличивается, разрешение и время компиляцииНе обязательно увеличивается пропорционально по мере увеличения размера сценария..

25. Используйте удаление мертвого кода (Tree-shaking) , подъем прицела (Scope hoisting) и разделение кода (Code-splitting) для уменьшения полезной нагрузки

Tree-shakingэто способ очистить процесс сборки, загружая только код, который фактически используется в производстве и очистке.в вебпакенеиспользованныйimport. Используя Webpack и Rollup, конечно, мы также можем использоватьсфера подъема, подъем прицела позволяет инструментам определять, какиеimportМожет быть поднят или может быть преобразован во встроенную функцию. С Webpack теперь вы можете использоватьJSON Tree Shaking.

Кроме того, необходимо учитывать, какНаписание эффективных селекторов CSSи какИзбегайте написания раздутых и дорогих стилей. Вы также можете использовать Webpack для сокращения имен классов и использования отдельных областей во время компиляции дляДинамически переименовывать классы CSS.

Code-splittingЕще одна характеристика WebPack, ваш код можно разбиться в загруженное по требованиюКусок. Не весь JavaScript нужно загружать, анализировать и компилировать. Как только вы определили точки разделения в своем коде, Webpack обработает эти зависимости и выходные файлы. Таким образом, когда приложение отправляет запрос, оно в основном гарантирует, что первоначальная загрузка достаточно мала и загружается по требованию. Александр КондровРазделение кода с помощью Webpack и ReactОтличное введение.

Также рассмотрите возможность использованияpreload-webpack-pluginПолучите путь разделения кода, затем используйте<link rel="preload">или<link rel="prefetch">Предложите браузеру предварительно загрузить их.Встроенные директивы Webpackтакже предоставляет некоторыеpreload / prefetchконтроль.

Где определяется точка разделения? Отслеживая, какие блоки CSS/JavaScript используются, а какие нет. Умар ХансаобъяснятьВот как вы можете сделать это, используя покрытие кода Devtools.

Если вы не используете Webpack, то по сравнению с выводом Browserify,RollupВыход лучше.我们在此过程中，可以查看rollup-plug -closure-compilerа такжеRollupify, они будутECMAScript 2015модуль в большойCommonJS module- потому что в зависимости от вашего выбора сборщика и модульной системы,Затраты на производительность могут быть удивительно высокими.

26. Можно ли разгрузить JavaScript в Web Worker

Чтобы уменьшить влияние на время и взаимодействие, рассмотрите возможность переноса тяжелого кода JavaScript наWeb WorkerИли кешировать через Service Worker.

Поскольку объем кода в кодовой базе продолжает расти, это приведет к узким местам в производительности пользовательского интерфейса, что напрямую приведет к ухудшению взаимодействия с пользователем. Это потому чтоМанипуляции с DOM выполняются вместе с JavaScript в основном потоке.. пройти черезweb workers, мы можем перенести эти утомительные операции на фоновый процесс в другом потоке. Типичный вариант использования веб-воркеров — черезПредварительная выборка данных и прогрессивные веб-приложения, чтобы заблаговременно загружать и сохранять некоторые данные для использования в случае необходимости. Вы также можете использоватьComlinkдля упрощения связи между домашней страницей и рабочей. Мы становимся бесконечно ближе, но нам еще предстоит кое-что сделать на этом пути.

WorkerizeПозволяет переместить модуль в Web Worker, автоматически отражая экспортированные функции как асинхронные прокси. Вы можете использовать в Webpackworkerize-loaderилиworker-plugin.

Обратите внимание, что веб-воркеры не могут получить доступ к DOM, потому что DOM не являетсябезопасная нить, а исполняемый код должен содержаться в отдельном файле.

27. Можно ли выгрузить JavaScript в WebAssembl

Мы также можем конвертировать JavaScript вWebAssembly(двоичный формат инструкций), а затем разработан как переносимая цель для компиляции, напримерC/ c++ /Rustэтот язык высокого уровня. этоПоддержка браузера также очень хорошаИ сВызовы функций между JavaScript и WASM становятся быстрее(по крайней мере, в Firefox) недавно это было возможно.

В реальном сценарии, если один находится на меньшем массиве,JavaScript превосходит WebAssembly, и наоборот, WebAssembly превосходит JavaScript). Для большинства веб-приложений лучше всего подходит JavaScript, тогда как WebAssembly больше подходит для ресурсоемких веб-приложений, таких как веб-игры. Итак, стоит выяснить, принесет ли переход на WebAssembly значительный прирост производительности.

Если вы хотите узнать больше о WebAssembly:

  • Лин Кларк написал для WebAssemblyПодробный цикл статей. Милица Михайлия также написаластатья, рассказывая о том, как запускать собственный код в браузере, почему вы должны это делать и что это означает для будущего JavaScript и веб-разработки.
  • Google Codelabs предоставляетВведение в веб-сборку, 60-минутный курс, на котором вы узнаете, как писать собственный код на C и компилировать его в WebAssembly, а затем вызывать его непосредственно из JavaScript.
  • Алекс Данило в своем выступлении на Google I/O 2017Объясняет WebAssembly и как это работает. Также Бенедек Гаджи поделилсяПрактический кейс по WebAssembly, в котором подробно рассказывается, как команда использует WebAssembly в качествеC++ codebaseвыходной формат, затем вios,Androidи использовать на сайте.

Милица Михайлия предоставляет намОбзор того, как работает WebAssembly и чем он полезен.

28. Используете ли вы прекомпилятор

использоватьпрекомпиляторМогуПеренесите часть рендеринга на стороне клиента на сервер, который быстро выводит полезные результаты. Наконец, рассмотрите возможность использования [optimization.js(GitHub.com/Нолан Лоусон…) для инкапсуляции вызываемой функции (однакоэто может быть уже не нужно) для ускорения начальной загрузки.

Эдди ОсманиПередовой опыт от Fast Default до Modern Load.

29. Подавайте устаревший код только в устаревшие браузеры

вместе сПоддержка современных браузеров для ES2015становится все лучше и лучше, подумайтеИспользуйте babel-preset-envТолько конвертирует, которые не поддерживаются современными браузерамиES2015+характеристики. потомНастроить две сборки, один для ES6 и один для ES5. Как было сказано выше, теперь всеОсновные браузерыОба поддерживают модули JavaScript, мы можемиспользоватьscript type="module"Разрешить браузерам с модулем ES поддерживать загрузку файлов, в то время как старые браузеры могут загружать устаревшиеscript nomodule. мы можем использоватьWebpack ESNext BoilerplateАвтоматизируйте весь процесс.

Обратите внимание, что теперь мы можем писать JavaScript на основе модулей, который изначально запускается в браузере без компилятора или компоновщика.<link rel="modulepreload"> headerПредоставляет способ инициировать раннюю (высокоприоритетную) загрузку скриптов модулей. По сути, это эффективный способ максимизировать использование пропускной способности, сообщая браузеру, что ему нужно получить, чтобы он не застрял на этих длинных обходах. Джейк Арчибальд также опубликовал подробную статью, в которойПредставляет проблемы и вещи, которые следует помнить в модулях ES, стоит посмотреть.

для лодаша,Используйте babel-плагин-lodashБудут загружаться только те модули, которые вы используете только в исходном коде. Ваши зависимости могут также зависеть от других версий Lodash, поэтому вам нужноКонвертируйте общий lodash в lodash, подходящий для вашего проекта, чтобы избежать дублирования кода. Это может значительно сэкономить нагрузку на JavaScript.

Шубхам Канодиа написалДля получения дополнительной информации о Smart Low Counding Guide: Доставляйте устаревший код в устаревшие браузеры в рабочей среде вместе с фрагментами, которые вы можете использовать сразу после установки.

Джейк Арчибальд опубликовал подробную статью оВопросы и вещи, которые нужно помнить в модулях ES, например, встроенные сценарии откладываются до тех пор, пока выполнение внешних и встроенных сценариев не будет заблокировано.

30. Используете ли вы дифференцированные услуги в JavaScript?

Мы хотели отправить необходимый код JavaScript по сети, но это означало больше внимания и деталей к доставке этих ресурсов. Не так давно Филип Уолтон предложилДифференцированные услугиКонцепция чего-либо. Идея состоит в том, чтобы скомпилировать и обслуживать два отдельных пакета JavaScript: одинобщепринятыйСборочный пакет (с Babel-преобразованиями и полифиллами), а другой без Babel-преобразований и полифиллов, оба из которых предоставляются только устаревшим браузерам, которым они действительно нужны.

Поэтому мы уменьшаем количество процессов, блокирующих основной поток, за счет уменьшения количества скриптов, которые должен обработать браузер. Джереми Вагнер опубликовал статью,Комплексное введение в дифференцированные услугиИ как настроить его в конвейере сборки 2019 года, от настройки Babel до настроек, которые вам нужно внести в Webpack, и преимущества этого.

31. Определите и перепишите устаревший код с помощью постепенного разделения

Проекты-долгожители имеют тенденцию собирать пыль и устаревший код. Пересмотрите свои зависимости и оцените, сколько времени потребуется на рефакторинг или переписывание устаревшего кода, который в последнее время вызывал проблемы. Если вы понимаете влияние устаревшего кода, вы можетеИнкрементная развязкаПриступайте к решению этой непростой задачи.

Во-первых, создайте метрику, которая отслеживает процент вызовов устаревшего кода, чтобы увидеть, остается ли он прежним или снижается, если вызовы не увеличиваются, публично заблокируйте команду от использования библиотеки и убедитесь, что CI доступен, когда он используется. в запросах на вытягиваниеуведомлятьразработчику.polyfillsКодовую базу можно переписать, чтобы помочь устаревшему коду использовать стандартные функции браузера.

import()Найдите эти модули и ленивую загрузку(смотри всю ветку). Затем повторите профиль покрытия и убедитесь, что теперь он предоставляет меньше кода при начальной загрузке.

ты можешь использовать этоPuppeteer Программный сбор покрытия кода, Канарейка разрешила тебеЭкспорт результатов покрытия кода. Как заметил Энди Дэвис, вы можете захотетьСоберите покрытие кода для современных и устаревших браузеров. дляPuppeteerи многое другоедругие варианты использования, например, чтобы автоматически создавать неиспользуемый CSS при каждой сборкевизуальное отличиеилимонитор.

также,purgecss,UnCSSа такжеHeliumМожет помочь вам удалить неиспользуемые стили из CSS. Если вы не уверены, используется ли код, вы можете следоватьСовет от Гарри Робертса: создайте прозрачное GIF-изображение размером 1 × 1 пиксель для определенного класса и поместите его вdead/каталог, например:/assets/img/dead/comments.gif. Затем установите определенное изображение в качестве фона для соответствующего селектора в CSS и подождите несколько месяцев, если файл появится в журнале. Если файл не отображается в журнале, это означает, что никто не выполняет рендеринг устаревшего компонента на экране, и вы можете удалить его целиком.

Для маленького партнера с идеей можно рассмотреть возможность прохожденияИспользование и мониторинг DevTools, который автоматически собирает неиспользуемый CSS на наборе страниц.

33. Сократите размер зависимостей JavaScript

так какКак указывает Адди Османи, когда вам нужно только небольшое подмножество библиотек JavaScript, вы, скорее всего, предоставите полные библиотеки JavaScript вместе с устаревшими полифиллами для браузеров, которым они не нужны, или просто дублируете код. Чтобы избежать этих накладных расходов, рассмотрите возможность использованияwebpack-libs-optimizationудалить методы, которые не используются в процессе сборки иpolyfill.

Будет проведен обзор больших библиотек, которые вы добавили много лет назад, могут быть некоторые облегченные альтернативы, такие как Moment.js, которые можно использовать сdate-fnsилиLuxonзаменять.Исследование Бенедикта РёцчПоказывает, что,Moment.jsприбытьdate-fnsКоммутатор может сэкономить около 300 мс при первом использовании на 3G и недорогих телефонах.

Это какBundlephobiaТакие инструменты могут помочь нам контролировать стоимость добавления пакетов npm в пакеты. ты даже можешьОбъедините эти затраты с индивидуальным аудитом Lighthouse. Это касается и фреймов. путем удаления или обрезкиАдаптер Vue MDC(Материальные компоненты для Vue), размер стиля был уменьшен со 194 КБ до 10 КБ.

Нравится приключение? Вы можете посмотретьPrepack. Он компилирует JavaScript в эквивалентный код JavaScript, но, в отличие от Babel или Uglify, позволяет писать обычный код JavaScript и выводит эквивалентный код JavaScript, который работает быстрее.

В качестве альтернативы всему фреймворку вы даже можете обрезать фреймворк и скомпилировать его в необработанный пакет JavaScript, который не требует дополнительного кода.Свелте сделал это,а такжеПлагин Rawact Babel тоже так делает. при строительствеReact.jsКомпоненты преобразуются в собственные манипуляции с DOM. Почему? Как пояснил сопровождающий,react-domСодержит все компоненты, которые могут быть отрендерены/HTMLElement, включая код для добавочного рендеринга, планирования, обработки событий и т. д. Но некоторым приложениям (при начальной загрузке страницы) не нужны все эти функции. Для таких приложений может быть лучше использовать собственные манипуляции с DOM для создания интерактивных пользовательских интерфейсов.

существуетСтатья Бенедикта Ротша, показываяMoment.jsприбытьdate-fns, что экономит около 300 мс времени перехода при первом использовании на 3G и недорогих телефонах.

34. Используете ли вы прогнозную предварительную выборку блоков JavaScript?

Мы можем использовать эвристику, чтобы решить, когда предварительно загружать блоки JavaScript.Guess.js— это набор инструментов и библиотек, которые используют данные Google Analytics для определения того, какие страницы пользователи с наибольшей вероятностью посетят с определенной страницы. На основе шаблонов навигации пользователей, собранных из Google Analytics или других источников,Guess.jsМодель машинного обучения была построена для прогнозирования и предварительной выборки JavaScript, необходимого для каждой последующей страницы.

Таким образом, каждый интерактивный элемент получает оценку вероятности взаимодействия, и на основе этой оценки клиентский сценарий принимает решение о предварительной выборке ресурсов заранее. Вы можете применить эту технику кNext.js application,Угловой и Реагировать, есть еще одинПлагин веб-пакета, он также может автоматизировать процесс установки.

Очевидно, что вы, вероятно, заставите браузер считывать ненужные данные и загружать ненужные страницы раньше времени, поэтому рекомендуется быть относительно консервативным в количестве этих запросов на предварительную выборку. Хорошим вариантом использования является предварительная выборка необходимых сценариев проверки во время проверки или при появлении критических вызовов действий.

Нужно что-то менее сложное?Quicklink— это небольшая библиотека, которая автоматически выполняет предварительную выборку отображаемых ссылок во время простоя, чтобы ускорить загрузку навигации по следующей странице. Однако он также учитывает данные, поэтому он не будет работать на 2G илиData-Saverпредварительная выборка времени.

####35. Воспользуйтесь преимуществами оптимизации для целевого движка JavaScript

Изучите процент движков JavaScript в вашей пользовательской базе, а затем изучите способы их оптимизации. Например, когда в браузере Blink используется оптимизированный движок V8,Node.jsПри запуске и Electron используйте поток сценариев для каждого сценария. После начала загрузки это позволяетasyncилиdefer scriptsПарсинг в отдельном фоновом потоке, что в некоторых случаях ускоряет загрузку страницы на 10%. Фактически, в<head>используется в<script defer>,так чтоБраузеры могут обнаруживать ресурсы раньше, а затем проанализируйте его в фоновом потоке.

Внимание: Опера Минине поддерживаетсяdefementсценарий, если вы занимаетесь разработкой в ​​Индии и Африке,deferбудет игнорироваться, что приведет к блокировке рендеринга до загрузки скрипта (спасибо, Джереми)!.

прогрессивная загрузка: использует рендеринг на стороне сервера, чтобы получить первую действительную отрисовку, но также включает минимальный JavaScript, необходимый для поддержания интерактивности в реальном времени, близкой к первой действительной отрисовке.

36. Рендеринг на стороне клиента или рендеринг на стороне сервера

В обоих сценариях нашей целью должно быть созданиепрогрессивная загрузка: используйте рендеринг на стороне сервера, чтобы получить первую действительную отрисовку, но также включите минимальный JavaScript, необходимый для поддержания интерактивности в реальном времени, близкой к первой действующей отрисовке. Если JavaScript не получит его при первом действительном розыгрыше, браузер можетзаблокировать основной поток, компилирует и выполняет только что обнаруженный JavaScript, таким образомсайт или приложениеизинтерактивностьвызывают ограничения.

Чтобы избежать этого, всегда разделяйте функцию выполнения на отдельные асинхронные задачи и те, которые могут использоватьrequestIdleCallbackМесто. Рассмотрите возможность динамического использования WebPack для ленивой загрузки части пользовательского интерфейса.поддержка импорта(), избегая накладных расходов на загрузку, синтаксический анализ и компиляцию до тех пор, пока они действительно не понадобятся пользователю (спасибо, Эдди!).

По сути, время до взаимодействия (TTI) говорит нам о времени между навигацией и взаимодействием. Метрики определяются первыми пятью секундами после рендеринга начального содержимого окна, в течение которых никакие задачи JavaScript не занимают более 50 мс. Если возникает задача дольше 50 мс, поиск перезапускается на пятисекундное окно. Таким образом, браузер сначала предполагает, что он достиг интерактивного режима, просто переключается на Frozen и, наконец, снова переключается на интерактивный режим.

Как только мы достигнем Interactive, мы сможем запускать второстепенные части приложения по требованию или когда позволяет время. К сожалению, сУпоминается Полом Льюисом, фреймворки обычно не имеют концепции приоритетов, поэтому прогрессивную загрузку трудно реализовать с большинством библиотек и фреймворков. Использование этой стратегии может значительно повысить производительность внешнего интерфейса, если у вас есть время и ресурсы.

Это рендеринг на стороне клиента или рендеринг на стороне сервера? Если пользовательский опыт значительно не улучшился, тоВероятно, мы не будем рендерить на стороне клиента, потому что на практике HTML-код, отображаемый на стороне сервера, может быть быстрее. Возможно, вы можетеПредварительно загрузите некоторый контент с помощью генератора статических сайтов.Отправляйте прямо в CDN с помощью JavaScript сверху.

Ограничьте использование клиентских фреймворков страницами, которые в них абсолютно нуждаются. Чтобы рендеринг сервера не был медленнее, чем рендеринг клиента, рассмотритеПререндеринг во время сборкии динамичныйВстраивание CSS, для создания готовых к производству статических файлов. Эдди Османи сделалаСтоимость JavaScriptиззамечательная речь, стоит посмотреть.

37. Ограничьте влияние сторонних скриптов

Со всеми оптимизациями производительности у нас часто нет контроля над сторонними сценариями, исходящими из потребностей бизнеса. Метрики для сторонних сценариев не зависят от взаимодействия с пользователем, поэтому один сценарий часто вызывает надоедливые длинные сторонние сценарии, тем самым подрывая усилия, направленные на повышение производительности. Чтобы контролировать и смягчить снижение производительности этих скриптов, загружайте их только асинхронно (возможно черезdefer) и через подсказки ресурсов, такие как:dns-prefetchилиpreconnectУскорить их недостаточно.

В роли Йоава Вайса в егоСвязь со сторонними скриптами должна быть соблюденаКак поясняется в разделе , во многих случаях эти сценарии, загружающие ресурсы, являются динамическими. Ресурсы меняются между загрузками страниц, поэтому мы не знаем, откуда хост загрузил ресурсы и что это были за ресурсы.

На данный момент, какой выбор у нас есть? рассмотреть возможностьИспользуйте сервис-воркеры для загрузки ресурсов с тайм-аутом, если ресурс не отвечает в течение определенного интервала времени, вернуть пустой ответ, чтобы указать браузеру выполнить синтаксический анализ страницы. Вы можете регистрировать или ограничивать те сторонние запросы, которые не выполняются, и запросы, которые не соответствуют определенным критериям. Вы также можете выбрать изваш собственный сервера не с сервера провайдераЗагружать сторонние скрипты.

Casper.comопубликованоПодробное тематическое исследование, рассказывает, как они сократили свой веб-сайт на 1,7 секунды с помощью оптимизации на собственном хостинге. Возможно, оно того стоит.

Другой вариант – построитьПолитика безопасности контента (CSP)Чтобы ограничить влияние сторонних скриптов, таких как запрет на загрузку аудио и видео. Лучший вариант - пройти<iframe>Встраивание скрипта заставляет скрипт работать вiframeОкружающая среда, поэтому, если нет разрешения доступа к странице DOM не может запускать какой-либо код в вашем домене.Iframeможно использоватьsandboxатрибуты дополнительно ограничены, поэтому вы можете отключитьiframeЛюбые функции, такие как предотвращение запуска скриптов, предотвращение предупреждений, отправка форм, плагины, доступ к верхней навигации и т. д.

Например, может потребоваться разрешить запуск скриптов.<iframe sandbox="allow-scripts">. Каждый предел может быть пройден через множество[allowсуществуетsandboxхарактеристики (Поддержка почти везде), поэтому ограничьте их до минимально допустимого.

Рассмотрите возможность использования Intersection Observer; это позволит размещать рекламуiframeпри этом все еще отправляя события или получая информацию из DOM (например, видимость рекламы). Обратите внимание, что новые стратегии, такие какфункциональная стратегия, ограничения на размер ресурсов, ограничения по приоритету ЦП и полосы пропускания, ухудшающие работу сети, и сценарии, замедляющие работу браузера, такие как: синхронные сценарии, синхронные запросы XHR,document.writeи реализация тайм-аута.

хочуИспытания под давлением третьих лиц, выполните восходящий обзор производительности страницы в DevTools, проверьте, что происходит после блокировки запроса или истечения времени ожидания, для последнего вы можете использовать сервер Blackhole WebPageTest.Blackhole .webpagetest.org, вы можете указать определенные доменные имена в файле hosts. предпочтительноАвтономный хост и использование одного имени хоста, но в то же времяСоздать карту запросов, доступ к сторонним вызовам и обнаружению при изменении сценария. Вы можете использовать метод Гарри Робертса, чтобыАудит третьих лици сгенерироватьТакойТаблицы. Гарри все еще с нимПрезентация по эффективности и аудиту третьих сторонРабочий процесс аудита объясняется в .

Источник изображения:Harry Roberts

38. Правильно установите заголовки кэша HTTP

Проверьте еще разexpires,cache-control,max-ageи другие заголовки кэша HTTP установлены правильно. В общем, ресурсы должны кэшироваться,Либо на короткое время (если они могут меняться), либо на неопределенный срок (если они статичны)- Вы можете изменить версию в своем URL-адресе, когда вам нужно обновить. Запретить заголовки на любом ресурсеLast-Modifiedприведет кIf-Modified-SinceУсловные запросы, даже если ресурс находится в кеше. То же, что и Etag, хотя он и используется.

использоватьCache-control: immutable, на самом деле предназначен для решения проблемы кэширования статических ресурсов с отпечатками пальцев и решения проблемы повторной проверки на стороне клиента (по состоянию на декабрь 2017 г.Поддерживается в FireFox, Edge и Safari.; только в фаерфоксеhttps://средняя поддержка). Фактически почти все страницы HTTP-архива, 2% запросов и 30% сайтов содержатХотя бы 1 неизменяемый ответ. Кроме того, большинство веб-сайтов, использующих его, имеют директиву о более длительном жизненном цикле ресурса.

все еще помнюstale-while-revalidate? Как вы знаете, мы используемCache-ControlЗаголовок ответа указывает время кэширования, например:Cache-Control: max-age=604800. Через 604 800 с кеш повторно извлечет запрошенный контент, что напрямую приведет к замедлению загрузки страницы. мы можем использоватьstale-while-revalidateЧтобы этого не произошло: он в основном определяет дополнительное временное окно, в течение которого кеш может напрямую использовать ресурсы с истекшим сроком действия, пока фон повторно проверяет свою асинхронность. Таким образом, на стороне клиента он можетСпрятатьЗадержка (включая задержку сети и сервера).

В октябре 2018 года Chrome выпустилнамерение, намеренHTTP Cache-Controlуказано в шапкеstale-while-revalidate, поэтому это сократит время загрузки последующих страниц, поскольку ресурс с истекшим сроком действия больше не находится в критическом состоянии. результат:Повторные просмотры имеют нулевое значение RTT..

вы также можете использоватьЗаголовки HTTP-кэша Heroku, Джейк АрчибальдЛучшие практики кэширования, и Ильи ГригорикаУчебник по HTTP-кэшированиюв качестве гида. Также обратите внимание, чторазные головы,Особенно вКогда дело доходит до CDN, и обратите внимание наключевой заголовочный файл, что помогает избежать дополнительной проверки, когда новые запросы немного отличаются от предыдущих стандартов запросов, но не обязательно (спасибо, Гай!).

Кроме того, чтобы дважды проверить, что вы отправилиненужный титул(Например,x-power -by,pragma,x-ua-compatible,expiresд.), и содержит ли онПолезные заголовки о безопасности и производительности(НапримерContent-Security-Policy,X-XSS-Protection,X-Content-Type-OptionsЖдать). Наконец, помните, что в одностраничном приложенииСтоимость выполнения запросов CORS.

Оптимизация доставки

39. Загружайте JavaScript асинхронно

Когда пользователь запрашивает страницу, браузер получает HTML и создает DOM, затем получает CSS и создает CSSOM, а затем создает дерево рендеринга, сопоставляя DOM и CSSOM. Если есть какой-либо JavaScript, который необходимо разрешить, браузер не начнет рендеринг страницы до тех пор, пока JavaScript не будет разрешен, что задержит рендеринг. Как разработчики, мы должны прямо сказать браузеру, чтобы он не ждал и немедленно начал отображать страницу. Способ сделать это для скриптов — использовать HTML вdeferа такжеasyncАтрибуты.

Оказывается, мыдолжен поставитьasyncизменить наdefer(потому чтоie9 и нижене поддерживаетсяasync). согласно сSteve Soudersаргумент, однажды загруженный вasyncскрипты, они выполняются сразу. Если это произойдет очень быстро иasyncОн фактически блокирует анализатор HTML, когда скрипт уже находится в кеше. Таким образом, мы можем использовать задержку, чтобы гарантировать, что браузер не выполнит скрипт до тех пор, пока не будет проанализирован HTML. Поэтому, если вам не нужно выполнять JavaScript перед началом рендеринга, лучше всего использоватьdefer.

Также, из описания выше, нам нужно ограничить влияние сторонних библиотек и скриптов, особенно использование кнопок социальных сетей и встроенных<iframe>(как карта).предельный размерпомогаетНе позволяйте библиотекам JavaScript становиться слишком большими: Если вы случайно добавите много зависимостей, инструмент уведомит вас и выдаст ошибку. Вы можете использовать статические кнопки социальных сетей (например, черезSSBG)а такжеСтатические ссылки вместо интерактивных карт. Вы также можетеИзменить неблокирующий загрузчик скриптов для соответствия CSP.

40. ИспользованиеIntersectionObserverЛенивая загрузка дорогих компонентов

Если вам нужно лениво загружать изображения, видео, рекламные сценарии, сценарии A/B-тестирования или любые другие активы, наиболее эффективным способом является использованиеIntersection Observer API, который обеспечивает способ асинхронного наблюдения за изменениями на пересечении целевого элемента с элементом-предком или окном просмотра документа верхнего уровня. По сути, вам нужно создать новыйIntersectionObserverОбъект, который получает функцию обратного вызова и набор параметров. Затем мы добавляем цель для наблюдения.

Функция обратного вызова выполняется, когда цель становится видимой или невидимой, поэтому, когда она перехватывает область просмотра, вы можете начать что-то делать до того, как элемент станет видимым. На самом деле, мы можем точно контролировать, когда вызывается обратный вызов наблюдателя, используяrootMarginа такжеthreshold(Число или массив чисел для представления процента видимости цели).

Алехандро Гарсия Англада опубликовал документ о том, как реализовать его в практических сценариях применения.Простой учебник, Рахул Нанвани написал подробное введениеО ленивой загрузке изображений переднего плана и фонаизстатья, Google Fundamentals также предоставляетО ленивой загрузке изображений и видео с помощью Intersection ObserverизПодробное руководство. Вы также можетеИспользование Обозревателя пересеченийвыполнитьЭффективное тестирование прокрутки (производительный прокрутка).

Также, пожалуйста, узнайтеlazyload, который представляет собой изображение, которое позволяет нам указать, какие изображения иiframesдолжен быть лениво загружаться локальноattribute. LazyLoad предоставит механизм, который позволит нам принудительно выбирать, использовать ли функцию LazyLoad для каждого домена (аналогичноПолитика безопасности контентаспособ работы). Бонус: после публикацииподсказка приоритетаПозволит нам указать важность сценария и предварительной загрузки в заголовке (в настоящее время в Chrome Canary).

41. Загружайте изображения постепенно

Вы даже можете добавитьпрогрессивная загрузка изображенийпринимать ленивую нагрузку на следующий уровень. Подобно Facebook, Pinterest и Medium, вы можете сначала загрузить невысокие изображения или размытыми изображениями, а затем, когда страница продолжает загружать, используйте метод, предложенный парень, подъявляемыйТехника LQIP (заполнители изображений низкого качества)Замените их четкими версиями.

Если технология улучшает пользовательский опыт, точка зрения другая, но она, безусловно, сокращает время до первого осмысленного рисования. Мы можем даже использоватьSQIPСоздавайте некачественные версии изображений в качестве заполнителей SVG или используйте линейные градиенты с помощью CSS.Заполнитель градиентного изображенияавтоматизировать. Эти заполнители могут быть встроены в HTML, потому что они естественным образом могут быть сжаты с помощью методов сжатия текста. Дин Хьюм вего статьиКак реализовать эту технику с помощью Intersection Observer, описано в .

Браузер поддерживает?можно сказать неплохо, Chrome, Firefox, Edge и Samsung Internet уже поддерживаются. WebKit в настоящее времяв разработке. Что делать, если браузер не поддерживает его? Если Intersection Observer не поддерживается, мы все равно можемленивая загрузкаОдинpolyfillили сразу загрузите изображение. есть дажебиблиотека.

Хотите сделать ленивую загрузку максимально эффективной? можешь попробоватьизображение трассировки, и создайте облегченный заполнитель SVG с примитивными формами и краями, сначала загрузите его, а затем перейдите от векторного изображения заполнителя к (загруженному) растровому изображению.

Хосе М. ПересТехника ленивой загрузки SVG.

42. Быстро продвигайте критический CSS

Чтобы браузер начал отображать страницу как можно скорее,как правилоВесь CSS, необходимый для начала рендеринга первой видимой части страницы (называемойКритический CSSилиНад сгибом CSS) и добавьте его на странице<head>, тем самым сокращая круговые поездки. Из-за ограниченного размера пакета подкачки на этапе медленного запуска бюджет критически важного CSS составляет около 14 КБ.

За пределами этого диапазона браузеру потребуются дополнительные обходы, чтобы получить больше стилей.CriticalCSSа такжеCriticalЭто можно сделать. Возможно, вам придется сделать это для каждого используемого вами шаблона. Если возможно, рассмотрите возможность использования Filament GroupУсловный встроенный метод,илиДинамическое преобразование встроенного кода в статические активы.

Используя HTTP/2, критически важные CSS можно хранить в отдельном файле CSS ипуш серверапройти без увеличения размера HTML. Проблема в том, что проталкивание сервера оченьбеда, из-за многих проблем и условий гонки в браузерах. Он не поддерживается и имеет некоторые проблемы с кэшированием (см. [презентацию Хумана Бехешти] на стр. 114). На самом деле этот эффект может бытьотрицательный, что приведет к раздуванию сетевого буфера, препятствуя доставке фактических кадров в документе. Кроме того, кажется, что сервер толкает из-за медленного запуска TCPБолее эффективен при горячих соединениях.

Даже с HTTP/1 размещение критического CSS в отдельном файле в корнехорошо, а иногда даже более эффективным, чем кэширование и встраивание. Когда Chrome запрашивает эту страницу, он отправляет еще одно HTTP-соединение с корневым каталогом, что устраняет необходимость в TCP-соединении для получения CSS. (Спасибо Филипп!)

Некоторые вопросы, о которых следует знать: иpreloadРазница в том, что предварительная загрузка может запускать предварительную загрузку из любого домена, в то время как вы можете отправлять ресурсы только из своего собственного домена или доменов, авторизованных вами. Как только сервер получит первый запрос от клиента, его можно запускать. Сервер помещает ресурс в кеш и удаляется при разрыве соединения. Однако, поскольку соединения HTTP/2 можно повторно использовать на нескольких вкладках, отправленные ресурсы также могут запрашиваться запросами с других вкладок. (Спасибо Иниан!)

В настоящее время у сервера нет простого способа узнать, существует ли уже отправленный ресурс вкеш пользователя, поэтому каждый визит пользователя продолжает продвигать ресурс. Поэтому вам может понадобиться создать кешМониторинг HTTP/2-серверного push-механизма. Если они извлечены, вы можете попытаться получить их из кеша, что позволит избежать повторного нажатия.

Но помни,Новая спецификация кэш-дайджестаНе нужно вручную создавать что-то подобноекеш осведомленserver, по сути, новый тип фрейма, объявленный в HTTP/2 для выражения содержимого этого хоста. Поэтому он также особенно полезен для CDN.

С динамическим содержимым, когда серверу требуется некоторое время для генерации ответа, браузер не может делать какие-либо запросы, поскольку он не знает ни о каких подресурсах, на которые может ссылаться страница. В этом случае мы можем разогреть соединение и увеличить размер окна перегрузки TCP, чтобы будущие запросы могли выполняться быстрее. Кроме того, вся встроенная конфигурация лучше подходит для отправки на сервер. На самом деле, Иниан ПарамешваранГлубокое погружение в HTTP/2 Push и HTTP Preload, что довольно хорошо, со всеми деталями, которые могут вам понадобиться. Сервер нажимает или не нажимает? Вы можете прочитать книгу Колина Бенделла.Должен ли я нажать?. Может указать вам в правильном направлении.

Итог: в роли Сэма Сакконесказал,preloadНачинать загрузку ресурсов выгодно ближе к начальному запросу, тогда как серверный пуш — это полный RTT (илиБолее, это зависит от времени отклика вашего сервера) - если у вас есть сервер, вы можете предотвратить ненужные нажатия.

43. Попробуйте рекомбинировать правила CSS

Мы часто используем критический CSS, но есть некоторые оптимизации, которые можно сделать лучше. Гарри Робертс сделалубедительное исследование, давая довольно неожиданные результаты. Например, разделите основной файл CSS на отдельные медиа-запросы, чтобы браузер извлек критический CSS с высоким приоритетом, а затем разделил все остальное с низким приоритетом на некритический CSS.

Кроме того, избегайте<link rel="stylesheet" />существуетasyncпомещается перед фрагментом кода. Если сценарий не зависит ни от каких таблиц стилей, рассмотрите возможность размещения автономного сценария поверх автономного стиля. Если это так, мы могли бы разделить этот скрипт на отдельный модуль и загрузить его по обе стороны от CSS.

Скотт ДжелКэшируйте встроенные CSS-файлы с сервис-воркерамиРешил еще одну интересную задачу. В принципе, мыstyleдобавить элементIDсвойства для использованияJavaScriptКраткая справка, затем небольшой абзацJavaScriptНайдите целевой CSS и используйте Cache API, чтобы сохранить его в локальном кеше браузера (тип содержимого —text/css) для использования на последующих страницах. Поэтому мы устанавливаем файл cookie при первом посещении сайта, чтобы избежать ссылок на встроенный CSS на последующих страницах и внешних ссылок на кэшированные ресурсы.

молокоПоток ответа? При потоковой передаче HTML-код, отображаемый в начальном запросе навигации, может использовать преимущества потокового синтаксического анализатора HTML браузера.

44. Потоковые ответы

streamsЧасто забываемый и упускаемый из виду, он предоставляет интерфейс для асинхронного чтения или записи блоков данных, только часть которых может быть доступна в памяти в любой момент времени. По сути, как только первый блок данных становится доступным, они позволяют первоначально запрошенной странице начать обработку ответа и постепенно отображать контент с помощью синтаксического анализатора, оптимизированного для потоковой передачи.

Мы можем создать поток из нескольких источников. Например, вместо того, чтобы предоставлять пустую оболочку пользовательского интерфейса и позволять JavaScript заполнять ее, вы могли бы заставить работника службы создать поток, в котором фрейм (оболочка) поступает из кеша, а содержимое поступает из сетевого потока. Как Джефф Посникуказал, если ваше веб-приложение работает на CMS, то HTML-код, отображаемый на сервере, обрабатывается путем объединения частичных шаблонов, модель будет преобразована напрямую для использования потоковых ответов, а логика шаблона будет скопирована с сервера, а не с вашего сервера. Джейк АрчибальдThe Year of Web StreamsВ статье рассказывается о том, как его построить. Улучшение производительностиочень очевидно.

Важным преимуществом потоковой передачи всего HTML-ответа является то, что HTML-код, отображаемый во время начального запроса навигации, может в полной мере использовать возможности потокового синтаксического анализатора HTML браузера. Блоки HTML, которые вставляются в документ после загрузки страницы (обычно содержимое заполняется с помощью JavaScript), не могут использовать преимущества этой оптимизации.

Важным преимуществом потоковой передачи всего HTML-ответа является то, что HTML-код, отображаемый во время начального запроса навигации, может в полной мере использовать возможности потокового синтаксического анализатора HTML браузера. Но HTML-блоки, вставленные в документ после нагрузки страницы (как обычно с содержимым, заполненным через JavaScript), не могут воспользоваться этой оптимизацией.

Каков уровень поддержки браузера?использоватьChrome 52+, Firefox 57+, Safari и Edge,Поддерживает все современные браузерыПоддерживаемые API и сервис-воркеры.

45. Рассмотрите возможность подключения компонентов/памяти устройства

Особенно при работе на развивающихся рынках вы можете подумать об оптимизации опыта, который пользователи предпочитают экономить на данных.Сохранить заголовок приглашения клиента данныхПозволяет нам настраивать приложения и полезные нагрузки для пользователей с ограниченными затратами и производительностью. На самом деле, вы можетеПерепишите запросы для изображений с высоким DPI на изображения с низким DPI., удалить веб-шрифты и модные спецэффекты, просмотреть эскизы и бесконечную прокрутку, отключить автозапуск видео, отправку на сервер, уменьшить количество отображаемых элементов, снизить качество изображения и даже изменитьКак сделать разметку. Тим Верике написал оСтратегия сохранения данных, который содержит множество параметров экономии трафика.

В настоящее время этот заголовок поддерживает только Chromium, Chrome для Android или расширение Data Saver на настольных устройствах. Конечно, вы также можете использоватьNetwork Information APIДоставка в зависимости от типа сетиизображения с низким/высоким разрешениеми видео. API веб-информации иnavigator.connection.effectiveType(Chrome 62+), оба используютRTTзначение по убыванию (downlink) значение, допустимый тип (effectiveType) значение (и некоторые другие) для представления соединения и данных, которые пользователь может обрабатывать.

В этом случае Макс Штойбер говорит окомпонент, поддерживающий подключение. Например, в React мы пишем компонент, который может загружаться как разные элементы при разных методах рендеринга. Макс предложил,<Media />Вывод компонента в разделе новостей может появиться:

  • Offline:поясaltзаполнитель для текста
  • 2G / save-dataрежим: изображение с низким разрешением
  • 3GНа экранах без Retina: изображения среднего разрешения.
  • 3GНа экранах Retina: изображения Retina высокого разрешения
  • 4GHD-видео

Дин Хьюм использует сервисного работника, чтобы обеспечитьПрактическая реализация подобной логики.对于视频，我们可以默认显示一个视频海报，然后在更好的连接上显示игратьИконки, а также оболочки видеоплеера, метаданные видео и т. д. Для неподдерживаемых браузеров мы можемслушатьcanplaythroughмероприятие,еслиcanplaythroughЕсли событие не срабатывает в течение 2 с, используйтеPromise.race()для загрузки ресурсов с течением времени.

46. ​​Подумайте о том, чтобы ваши компонентные устройства работали с памятью.

Сетевое подключение просто предоставляет пользователю окно просмотра. Если вы хотите пойти дальше, вы также можете использоватьDevice Memory API(Хром 63+)Динамическая настройка ресурсов в зависимости от доступной памяти устройства. Возвращает объем оперативной памяти (гигабайт) устройства, округленный до ближайшей степени числа 2.navigator.deviceMemoryВозвращает объем оперативной памяти устройства в гигабайтах, округленный до ближайшей степени числа 2. API также имеет заголовок Client Hint,Device-Memory, и дать то же значение.

в DevToolsPriorityСписок. Кредит изображения: Бен Шварц, важная просьба

47. Разогрейте соединение для более быстрой передачи

использоватьСоветы по ресурсамдля экономии времени, напримерdns-prefetch(выполнение поиска DNS в фоновом режиме),preconnect(сообщает браузеру выполнить подтверждение соединения в фоновом режиме (DNS, TCP, TLS)),prefetch(скажите браузеру запросить ресурс) иpreload(предварительная выборка ресурсов без их выполнения).

В большинстве случаев мы, по крайней мере, используемpreconnectа такжеdns-prefetch, мы будем соблюдать осторожностьprefetchа такжеpreload; первый следует использовать только в том случае, если вы абсолютно уверены в том, какие ресурсы потребуются пользователю впоследствии (аналогично покупке каналов). Уведомление,prerenderУстарело и больше не поддерживается.

Обратите внимание, что даже при использованииpreconnectа такжеdns-prefetch, у браузера также есть ограничение на количество хостов, которые он будет искать или к которым будет подключаться параллельно, поэтому лучше отсортировать их по приоритету (спасибо, Филипп!).

На самом деле, использование подсказок ресурсов, вероятно, самый простой способ повысить производительность.это реально работает. Когда его следует использовать? Эдди Османи уже сделалаобъяснять, мы должны заранее определить ресурсы, которые будут использоваться на текущей странице. Упреждающая выборка ресурсов, которые могут использоваться для будущих страниц, таких как пакеты Webpack, необходимые для страниц, которые пользователь еще не посещал.

ЭддиО приоритете загрузки в ChromeВ статье показано, как Chrome точно анализирует подсказки ресурсов, поэтому, как только вы решите, какие ресурсы важны для рендеринга страницы, вы можете присвоить им более высокий приоритет. Вы можете запустить его в форме веб-запроса Chrome DevTools (или Safari Technology Preview).priorityстолбец, чтобы увидеть приоритет вашего запроса.

Например, поскольку шрифты часто являются важным ресурсом на странице, лучше всегоиспользоватьpreloadЗапрос браузера на загрузку шрифта. вы также можетеДинамически загружать JavaScript, который эффективно выполняет ленивую загрузку. Точно так же, потому что<link rel="preload">получитьmediaсвойства, вы можете использовать правила медиа-запросов дляВыборочная установка приоритета загрузки ресурсов.

Некоторые проблемы, о которых следует знатьДа:preloadмогувремя загрузки ресурсаПерейти к началу запроса, но эти предварительно загруженные ресурсы, кэшированные в памяти, привязаны к странице, отправившей запрос, а это означает, что предварительно загруженные запросы не могут быть разделены страницами. а также,preloadТакже хорошо работает с HTTP-кешированием: сетевой запрос не отправляется, если кеш попадает.

Следовательно, это также очень полезно для более поздних обнаруженных ресурсов, таких как:background-imageЗагруженное главное изображение с критически важным встроенным CSS (или JavaScript) и другим предварительно загруженным CSS (или JavaScript).

Также, только если браузер получает HTML с сервера и найден предыдущий парсерpreloadПосле маркировки,preloadтеги могут инициировать предварительную загрузку.

Предварительная загрузка через заголовки HTTP выполняется быстрее, поскольку мы не ждем, пока браузер проанализирует HTML, чтобы инициировать запрос.Early Hintsпоможет в дальнейшем, включив предварительную загрузку еще до отправки заголовков ответа HTML, в то время какPriority Hints(вскоре) поможет нам указать приоритет загрузки скрипта.

Обратите внимание: если вы используетеpreload,as долженопределить, иначеничего не загрузится; также, если шрифт предварительно загружен безcrossoriginСвойство будет получено дважды.

48. Кэш и откат сети с помощью сервис-воркеров

Никакая оптимизация производительности в сети не будет быстрее, чем кэш локального хранилища на компьютере пользователя. Если ваш сайт работает через HTTPS, используйтеПрактическое руководство для сервисных работниковКэшируйте статические ресурсы в кэше сервис-воркера и сохраняйте автономные запасные варианты (даже автономные страницы), а затем извлекайте их с компьютера пользователя, а не из сети. Также обратите внимание на Джейка.Offline Cookbookи бесплатные курсы UdacityАвтономное веб-приложение.

Браузер поддерживает? Как указано выше,это широко поддерживается(Chrome, Firefox, Safari TP, Samsung Internet, Edge 17+), в любом случае, Интернет — это запасной вариант. Помогает ли это производительности?да, и это становится лучше, например, использование фоновой выборки, чтобы разрешить фоновую загрузку/выгрузку от сервис-воркеров,Доставка в Chrome 71.

Есть много вариантов использования сервисных работников. Например, вы можетевыполнитьсохранить в автономном режимехарактеристика,Обработка поврежденных изображений,Внедрить обмен сообщениями между вкладками,илиОбеспечьте различные стратегии кэширования в зависимости от типа запроса.. В общем, общепринятой надежной стратегией является хранение оболочки приложения в кэше сервис-воркера вместе с некоторыми важными страницами, такими как автономные страницы, домашняя страница и другие страницы, которые могут быть важны для вашего приложения.

Но есть некоторые проблемы, о которых следует помнить. После того, как у нас есть сервис-воркер, нам нужноОстерегайтесь запросов диапазона в Safari(Если вы используете Workbox для сервисных работников, у него есть модуль запроса области действия). Если вы наткнулись на появившуюся консольDOMException:Quota exceeded.такое сообщение об ошибке, тогда ознакомьтесь со статьей ХерардоКогда 7 КБ равно 7 МБ.

Как писал Джерардо, если вы создаете прогрессивное веб-приложение, и ваш сервисный работник кэширует статические ресурсы из CDN, ваше хранилище кэша может быть довольно большим. Поэтому убедитесь, что для кросс-происхождения ресурсовПрисутствуют правильные заголовки ответа CORS., чтобы вы случайно не использовали Service WorkersКэшировать непрозрачные ответы, вы также можете добавить< img >тег добавленcrossoriginприписыватьВозможность кэширования ресурсов изображений из разных источников в режиме CORS..

Хорошей отправной точкой для использования сервис-воркеров являетсяWorkbox, набор библиотек сервис-воркеров специально для создания прогрессивных веб-приложений.

49. Используете ли вы сервис-воркеров на CDN/Edge (например, для A/B-тестирования)

На данный момент мы привыкли запускать сервис-воркеры на клиенте, но сCDN реализуют их на сервере, мы также можем использовать его для настройки периферийной производительности.

Например, в A/B-тестировании, когдаHTMLКогда нам нужно изменить его содержимое для разных пользователей, мы можемИспользование сервис-воркеров на серверах CDNчтобы справиться с логикой. мы также можемHTML переписатьпровестиПотоковоедля ускорения работы сайтов, использующих шрифты Google.

50. Оптимизировали ли вы производительность рендеринга

использоватьCSS containmentИзолируйте дорогостоящие компоненты — например, ограничьте стили браузера, макет и рисование для навигации вне холста, объем сторонних компонентов. Убедитесь, что при прокрутке страницы или при анимации элемента нет задержек, постоянно достигающих 60 кадров в секунду. Если это невозможно, то, по крайней мере, постоянно держите FPS в диапазоне от 60 до 15. использоватьCSS изменитсяУведомляет браузер, какой атрибут какого элемента собирается измениться.

Кроме того, оцениваяПроизводительность рендеринга во время выполнения(например, с помощьюDevTools). учась у Пола ЛьюисаОб оптимизации рендеринга в браузереКурс Udacity (бесплатно) и Георгий МарчукО рисовании в браузере и мерах предосторожности при работе в Интернетестатья.

Если вы хотите углубиться в тему, Нолан Лоусон поделился статьей под названиемСоветы по точному измерению производительности макета, и Джейсон Миллер также предлагаетальтернативная технология. Также у нас есть статья Сергея Чикуёнка оКак правильно использовать анимацию GPUстатья. Примечание. Изменения слоя, созданного с помощью графического процессора,минимальная стоимостьДа, если вы можете пройтиopacityа такжеtransformзапустить синтез, то вы на правильном пути. Анна Мигас в ней проОтладка производительности рендеринга пользовательского интерфейсаТакже в презентации много практических советов.

51. Оптимизировали ли вы процесс рендеринга?

Порядок, в котором компоненты отображаются на странице, и то, как мы предоставляем ресурсы браузеру, важны, но мы не должны недооценивать это.Воспринимаемая производительностьэффект. Эта концепция включает в себя психологию ожидания, в основном для того, чтобы пользователи были заняты, пока происходят другие дела. Это включает в себяУправление восприятием,начать первым,Завершено досрочноа такжеУправление толерантностью.

Что все это значит? Мы можем стараться всегда быть на шаг впереди клиента при загрузке ресурсов, поэтому поместите много обработки в фоновый режим, и ответ будет очень быстрым. Чтобы привлечь клиентов, мы можем использоватьСкелетный экран (демонстрационный пример), вместо того, чтобы использовать инструкции по загрузке или добавлять анимацию/переходы, когда больше нечего оптимизироватьобмануть пользовательский опыт. Но будьте осторожны: экран должен быть протестирован до развертывания фреймворка, потому что некоторыетестовый дисплей, по всем показателям скелетный экранисполнение самое худшее.

Категории