jsliang Job Search Series - 23 - Оптимизация производительности

каталог

Чем отличается передок без закидывания от соленой рыбы?

содержание
каталог
2 Предисловие
2.1 DNS-разрешение
2.2 TCP-соединение
2.3 Отправить HTTP-запрос
2.4 Ответ сервера
2.5 Браузерный парсинг и рендеринг страниц
2.6 Другое
2.7 Резюме
Кэш трех браузеров
3.1 Расположение кэша
3.2 Механизм кэширования
Четыре файла cookie, веб-хранилище и IndexDB
4.1 Cookie
4.2 Local Storage
4.3 Session Storage
4.4 IndexDB
Пять CDN
Балансировка шести нагрузок
Семь оптимизаций Webpack
7.1 Оптимизация сборки для самого Webpack
7.1.1 Оптимизация конфигурации resolve.modules
7.1.2 Оптимизация конфигурации resolve.extensions
7.2 Оптимизация через загрузчик и плагин
7.2.1 babel-loader
7.2.2 tree shaking
7.2.3 Визуальный анализ
7.2.4 Кэш
7.2.5 Многопроцессорность
7.2.6 Извлечение
7.2.7 Многопроцессное сжатие кода
7.2.8 Распаковка
7.2.9 Сжатие упакованных ресурсов
7.2.10 Загрузка по запросу
7.3 Оптимизация опыта
Оптимизация восьми изображений
8.1 JPEG и JPG
8.2 PNG-8 и PNG-24
8.3 GIF
8.4 SVG
8.5 Base64
8.6 Спрайт
8.7 WebP
Сжатие девятью Gzip
Десять серверных рендерингов
10.1 Рендеринг на стороне клиента и рендеринг на стороне сервера
10.2 Решенные проблемы с производительностью
10.3 Как использовать рендеринг на стороне сервера
10.4 Краткий обзор рендеринга на стороне сервера
Механизм рендеринга одиннадцати браузеров
11.1 Шаги рендеринга в браузере
11.2 Оптимизация — проблемы с селектором CSS
11.3 Оптимизация — проблемы с загрузкой CSS
11.4 Оптимизация — проблемы с загрузкой JS
11.5 Оптимизация — проблемы с рендерингом DOM
12 Предварительная загрузка ресурсов страницы
тринадцать длинный список
13.1 ленивая загрузка
13.2 Рендеринг видимой области
14. Мониторинг производительности
15 ссылок
15.1 Оптимизация веб-пакета
15.2 Другие оптимизации

2 Предисловие

Интервьюер: Расскажите об оптимизации производительности внешнего интерфейса?

Говоря об оптимизации производительности внешнего интерфейса, мы можем начать с точки зрения «ввода URL-адреса для рендеринга страницы».

в пользовательском вводеURL, после нажатия Enter, предпринятые шаги:

разрешение DNS
TCP-соединение
отправить HTTP-запрос
ответ сервера
Браузер анализирует отображаемую страницу

Какие оптимизации можно сделать в этом?

jsliangПоместите эти знания в один котел здесь и посмотрите, сколько вы едите.

2.1 DNS-разрешение

Процесс разрешения DNS — это точка знаний.Подробнее см.:Компьютерная сеть — DNS

Первое, что нужно знать, этоDNSНачальные шаги разбора:DNS-кэш браузера -> Системный кэш (хост) -> кеш маршрутизатора

браузерDNSКэш: вы не уверены и не можете помочь пользователям кэшировать;

системный кеш (host): изменить самостоятельноhostФайлам нужны разрешения, и еще более ненадежно изменять пользователей;

Кэш маршрутизатора: маршрутизатор в доме пользователя...

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

Поэтому мы сначала игнорируем этот шаг.

2.2 TCP-соединение

Компьютерные сети — TCP 3-стороннее рукопожатие и 4-сторонняя волна...

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

2.3 Отправить HTTP-запрос

ОтправитьHTTPЧтобы запросить это, мы можем передать4Нажмите, чтобы объяснить:

кеш браузера

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

Файлы cookie и веб-хранилище

использоватьCookieа такжеWebStorageКэшируйте некоторые ненужные данные для удобства использования.

Использование CDN

Запросы на статические ресурсы могут использоватьCDN, снизить нагрузку на сервер и предотвратить ненужный переносCookieсцены и т.д.

Балансировка нагрузки

Используя характеристики балансировки нагрузки, включите обратный прокси PM2 или Nginx на Node.js, опрашивайте сервер и усредняйте нагрузку каждого сервера.

2.4 Ответ сервера

Когда сервер отвечает, мы также можем сделать 4 части:

Оптимизация веб-пакета

Перед публикацией проекта на сервер мы можем использовать некоторые плагины визуализации для анализа, используяHappypackЧтобы повысить эффективность упаковки, содержимое проекта можно загружать по запросу,tree shakingЖдать.

Оптимизация изображения

Мы должны быть знакомы сJPG/JPEG,PNG-8/PNG-24,GIF,Base64,SVGЭти функции изображения затем передаются через Webpack.url-loaderПревратите несколько маленьких значков вBase64, некоторые Icon используютSVG, для некоторых карусельных изображений, изображений баннеровJPG/JPGE, использование спрайт-карт и т. д.

Gzip-сжатие

Принцип сжатия Gzip заключается в том, чтобы найти некоторые повторяющиеся строки в текстовом файле и временно заменить их, тем самым уменьшив размер всего файла (для изображений и т. д. он не может быть обработан). Мы можем использовать WebpackComparessionPluginСжатие Gzip, а затем настроить его на Nginx, вы можете воспользоваться преимуществами Gzip.

Рендеринг на стороне сервера (SSR)

Рендеринг на стороне сервера означает, что когда браузер запрашивает, сервер напрямую возвращает отображаемую HTML-страницу в браузер, и браузер может напрямую загружать свой HTML-рендеринг, что сокращает взаимодействие с интерфейсом и сервером и более удобно для SEO. .

2.5 Браузерный парсинг и рендеринг страниц

Процесс, с помощью которого браузер анализирует отображаемую страницу:

Разбирать HTML, генерироватьDOMДерево
Разобрать CSS, сгенерироватьCSS 规则树（CSS Rule Tree）
БудуDOM Treeа такжеCSS Rule Treeкомбинировать, генерироватьвизуализировать дерево(Render Tree)
Начиная с корневого узла, рассчитайте размер и положение каждого элемента и задайте точные координаты экрана, где должен появиться каждый узел, чтобы получить дерево рендеринга.дерево рендеринга компоновки(Layout of the render tree).
Пройдите по дереву рендеринга, нарисуйте каждый узел с помощью механизма рендеринга пользовательского интерфейса и нарисуйте все дерево на странице.Этот шаг называетсянарисовать дерево визуализации(Painting the render tree)

Наша схема оптимизации для этого шага:

Проблемы с разбором селектора CSS. Используйте как можно меньше селекторов для представления элемента во время кодирования, потому что CSS загружается справа налево.
Проблемы с загрузкой CSS. как можно большеheadЗагружайте CSS из позиции, чтобы уменьшить проблему ожидания загрузки CSS после загрузки HTML.
проблема с загрузкой JS. Загрузка JS блокирует загрузку HTML и CSS, поэтомуscriptЭтикетки обычно ставятbodyпозже вы также можете использоватьscriptпомеченasyncа такжеdeferсвойств, загружать JS синхронно или ждать загрузки и рендеринга HTML и CSS перед загрузкой JS.
Проблемы с рендерингом DOM. Когда рендеринг DOM может срабатывать и перерисовываться, старайтесь избегать срабатывания.

Как избежать срабатывания рефлоу:

【CSS】Использоватьvisibilityзаменятьdisplay
【CSS】Избегайтеtableмакет. дляRender TreeВычисление , как правило, нужно пройти только один раз, ноtableМакет должен быть рассчитан несколько раз, обычно в 3 раза длиннее эквивалентного элемента, поэтому избегайте этого.
【JS】Избегайте делать это частоwidth,heightи т. д. вызовет операцию перекомпоновки.
[JS] При работе с DOM, если вы добавляете узлы DOM, вы можете управлять всеми узлами в JS перед рендерингом (однократно)

2.6 Другое

Кроме того, мы также можем передать:

Плагин Chrome для визуального определения того, какие части страницы можно оптимизировать
Ленивая загрузка для длинных списков
preloadпредзагрузить страницу

и т. д. для выполнения операций, связанных с оптимизацией производительности.

2.7 Резюме

Выше мы объяснили знания по оптимизации производительности внешнего интерфейса в 6 частях.

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

Давайте подробно рассмотрим пункты знаний по оптимизации, упомянутые выше, один за другим.

Кэш трех браузеров

Кэширование браузера может быть просто понято какHTTPкеш.

3.1 Расположение кэша

Расположение кеша браузера разделено на 4 части:

Service Worker Cache- Запускается в отдельном потоке позади браузера. Как правило, его можно использовать для реализации функции кэширования.
Menory Cache- Кэш в памяти. В основном это ресурсы, которые были захвачены, такие как стили, скрипты, изображения и т. д., которые были загружены на страницу.
Disk Cache- Кэш на жестком диске. Скорость чтения относительно низкая.
Push Cache- Нажмите кеш. Это контент в HTTP 2. Он будет использоваться только в том случае, если ни один из трех вышеперечисленных кешей не сработал.

3.2 Механизм кэширования

Сильный кеш

Сильный кеш имеет приоритет над кешем согласования. Если принудительный кеш действителен, кеш используется напрямую. В противном случае выполняется кеш согласования. Сильное кэширование не отправляет запросы на сервер, а считывает ресурсы напрямую из кеша.

Сильное кэширование использует заголовки HTTP-запросов.Expiresа такжеCache-ControlДва поля для управления.

Согласовать кеш

Сервер решает, использовать ли кеш для кеша согласования.Если кеш согласования недействителен, то кеш запроса недействителен, возвращает 200, снова возвращает ресурс и идентификатор кеша и сохраняет его в браузере, если он действителен , он возвращает 304 и продолжает использовать кеш.

Согласование использования кешаLast-Modified + If-Modified-Sinceа такжеEtag + If-None-Matchреализовать.

Для конкретного процесса кэширования друзья могут прочитать главу о кэшировании браузера, поэтому я не буду колебаться здесь:

Браузер - Кэш браузера

Четыре файла cookie, веб-хранилище и IndexDB

4.1 Cookie

CookieОн изначально был разработан не для локального хранения, а для его восполненияHTTPНеадекватное государственное управление.

CookieПо сути, это небольшой текстовый файл, хранящийся в браузере, который хранится внутри в виде пар ключ-значение.

Отправка запросов на одно и то же доменное имя будет нести одинаковыеCookie, сервер получаетCookieПосле разбора можно получить статус клиента.

дефект:

дефект емкости. объем онлайн4kb, только небольшое количество информации может быть сохранено.
недостатки производительности.CookieЗапрос будет содержать полныйCookie, по мере увеличения количества запросов, что приводит к потере производительности.
недостаток безопасности. Он передается в браузере и на сервере в виде обычного текста, который легко незаконно перехватить и подделать.

4.2 Local Storage

Local StorgeТакже для того же доменного имени.

Под тем же доменным именем будет храниться один и тот же сегментLocal Storage.

в сравнении сCookieПреимущество:

емкость. объем онлайн5M, больше, чемCookieиз4kb.
Есть только клиент. Не участвуйте в общении с сервером, избегайтеCookieнедостатки производительности и недостатки безопасности.
инкапсуляция интерфейса. имеютsetItemа такжеgetItemДва интерфейса API.

Сценарии применения:

кBase64способ хранения изображений, таких как официальный логотип.

4.3 Session Storage

в основном иLocal StoargeПоследовательный.

Сравнение различий:

Хранилище на уровне сеанса. отличный отLocal Storageпостоянное хранение,Session StorageОн перестает существовать, когда страница закрывается.

Сценарии применения:

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

4.4 IndexDB

IndexedDBработает в браузеренереляционная база данных.

Потому что это по сути база данных, вообще говоря, емкость не в сети.

Пять CDN

CDN (сеть доставки контента) относится к группе серверов, распределенных в различных регионах.

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

CDN обеспечивают быстрое обслуживание и меньше подвержены влиянию большого трафика.

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

В этом сценарии сервер Shenzhen играет роль CDN.

Ядро CDN:тайника такжевернуться к источнику.

тайник: поставить ресурсcopyОдна копия на сервер CDN.
вернуться к источнику: CDN обнаруживает, что у него нет этого ресурса, и обращается к корневому серверу (верхнему серверу) для запроса этого ресурса.

Сценарии применения:

Статические ресурсы компании развернуты на ближайшем сервере, а функция CDN используется для облегчения доступа
Фреймворки, такие как jQuery, могут ссылаться на CDN, чтобы ускорить загрузку веб-сайта и избежать ограничения загрузки с одного и того же сервера.
Уменьшите влияние файлов cookie. Под тем же доменным именем запросы к статическим ресурсам будут нести информацию о куках, но нам это не нужно, поэтому использование CDN позволяет избежать ненужных сценариев куки.

Балансировка шести нагрузок

Если это большой веб-сайт, без балансировки нагрузки не обойтись.

PM2: диспетчер процессов Node.js, который позволяет каждому ядру компьютера запускать службу Node.js и автоматически управлять балансировкой нагрузки.
Nginx: Через механизм опроса запрос пользователя распределяется на сервер с меньшей нагрузкой (обратный прокси).

Отличие: обратный прокси-сервер предназначен для балансировки нагрузки на сервер, в то время какPM2Это необходимо для балансировки нагрузки на процессы.

Семь оптимизаций Webpack

Узлотешение оптимизации WebPack, в основном 2 аспекта:

Процесс сборки WebPack занимает слишком много времени
Результат упаковки Webpack слишком велик

7.1 Оптимизация сборки для самого Webpack

7.1.1 Оптимизация конфигурации resolve.modules

resolve.modulesдля конфигурацииWebpackПод какой каталог для поиска сторонних модулей, по умолчанию['node_modules'], однако сначала он перейдет в текущий каталог./node_modulesНайдите его, если нет, идите снова../node_modules, и, наконец, в корневой каталог.

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

resolve: {
  modules: [path.resolve(__dirname, 'node_modules')],
}

7.1.2 Оптимизация конфигурации resolve.extensions

При импорте пути без суффикса файлаWebpackАвтоматически добавит суффикс, чтобы попытаться спросить, существует ли файл, иresolve.extensionsИспользуется для настройки списка используемых суффиксов; по умолчаниюextensions:['js', 'json'].

при встречеrequire('./data')ВремяWebpackпостараюсь сначала найтиdata.js, больше не искалdata.json; чем длиннее список или чем дальше правильный суффикс, тем больше попыток будет сделано.

Поэтому при настройке для улучшения оптимизации сборки необходимо соблюдать:

Суффиксы файлов с высокой частотой располагаются первыми.
Старайтесь, чтобы список был как можно меньше, например, всего 3:js,jsx,json.
При написании операторов импорта старайтесь писать имя суффикса.

7.2 Оптимизация через загрузчик и плагин

7.2.1 babel-loader

кbabel-loaderНапример, поincludeа такжеexcludeпомогите нам избежатьnode_modulesТакие огромные папки.

7.2.2 tree shaking

через ES6import/exportдля проверки кода без ссылок иsideEffectsчтобы пометить код, свободный от побочных эффектов, и, наконец, использоватьUglifyJSPluginсделатьtree shaking, тем самым удаляя лишний код.

7.2.3 Визуальный анализ

speed-measure-webpack-plugin: измеряйте время выполнения каждого загрузчика и плагина в процессе сборки.
webpack-bundle-analyzer: Представляет размер и зависимости каждого модуля в пакете с помощью древовидной матрицы.
webpack-chart
webpack-analyse

7.2.4 Кэш

cache-loader

Ссылка на ссылку:cache-loader

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

uglifyjs-webpack-plugin

Также решает проблемы с кэшированием.

7.2.5 Многопроцессорность

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

7.2.6 Извлечение

пройти черезDllPluginилиExternalsОтдельные статические зависимости.

из-заCommonsChunkPluginПерестраивает каждую сборкуvendor, поэтому по соображениям эффективности используйтеDllPluginУпакуйте стороннюю библиотеку в один файл и переупаковывайте ее только при изменении версии самой зависимости.

7.2.7 Многопроцессное сжатие кода

из-за своегоUglifyJsPluginПлагин сжатия работает в однопоточном режиме, аParallelUglifyPluginможно выполнять параллельно.

так черезParallelUglifyPluginвместо самостоятельногоUglifyJsPluginплагин.

7.2.8 Распаковка

существуетWebpackЧто такое разделение кода? Разделение кода позволяет разделить код на несколько файлов. При правильном использовании производительность вашего приложения значительно улучшится. Потому что браузеры могут кэшировать ваш код.

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

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

из-за наличияSplitChunksPlugin, вы можете перемещать определенные части приложения в разные файлы. Если модуль находится более чем в одномchunkиспользуется в, то с разделением кода модуль может быть хорошо разделен между ними.

7.2.9 Сжатие упакованных ресурсов

JS-сжатие:UglifyJSPlugin
Сжатие HTML:HtmlWebpackPlugin
Извлечь общедоступные ресурсы:splitChunks.cacheGroups
Сжатие CSS:MiniCssExtractPlugin
Сжатие Gzip: не включает изображения

7.2.10 Загрузка по запросу

Реагируйте на загрузку по требованию с помощью Code-Splitting.

Code_Splittingядроrequire-ensure.

7.3 Оптимизация опыта

progress-bar-webpack-plugin: В нижней части терминала будет индикатор выполнения сборки, позволяющий четко видеть ход выполнения сборки.
webpack-build-notifier: Когда строительство завершено, приложение, такое как WeChat и Lark, может вывести всплывающее сообщение, указывающее, что строительство завершено.
webpack-dashboard: Если вас не устраивает первоначальный вывод сборки Webpack, вы также можете использовать такой плагин для оптимизации интерфейса вывода.

Оптимизация восьми изображений

8.1 JPEG и JPG

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

8.2 PNG-8 и PNG-24

ключевые слова: Сжатие без потерь, высокое качество, большой объем, прозрачная поддержка
преимущество: PNG-8 поддерживает 256 цветов, PNG-24 поддерживает 1600 цветов. Более сильная цветопередача, более тонкая обработка линий и хорошая поддержка прозрачности.
недостаток: большой размер
сцены, которые будут использоваться: Логотип, простые и контрастные изображения и фоны.

8.3 GIF

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

8.4 SVG

ключевые слова: Текстовый файл, небольшой размер, без искажений, хорошая совместимость
преимущество: текст меньше и более сжимаем. Изображение можно бесконечно увеличивать без искажений. Текстовые файлы могут быть записаны непосредственно в HTML с высокой гибкостью.
недостаток: Высокая стоимость рендеринга, стоимость обучения (программируется)
сцены, которые будут использоваться: становится кодом, встроенным в HTML, или может быть заменен на.svgфайлы с суффиксами для справки.

8.5 Base64

ключевые слова: текстовые файлы, зависимое кодирование, решения с маленькими значками
преимущество: существует как дополнение к изображению спрайта, уменьшающее количество запросов к серверу при загрузке изображений страниц. (img srcИнициирует запрос ресурсов, но Base64 получает строку, встроенную в HTML)
недостаток: Использование Base64 для больших изображений увеличит размер и повлияет на производительность.
сцены, которые будут использоваться: Небольшой логотип (не более 2 КБ), картинки с низкой частотой обновления.
инструмент кодирования: Веб-пакетurl-loaderВы можете определить, следует ли кодировать в Base64, в зависимости от размера файла.

8.6 Спрайт

Спрайты, CSS-спрайты, CSS-спрайты, спрайты изображений — все это одно и то же.

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

Это оптимизация, потому что для одного изображения требуется меньше HTTP-запросов, а также больше памяти и пропускной способности.

8.7 WebP

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

Сжатие девятью Gzip

Webpack включает Gzip

пройти черезcompression-webpack-pluginСжатие Gzip можно включить.

Стоит ли включать Gzip

Если сжатый файл слишком мал, не используйте его, но если у вас есть файл проекта определенного размера, вы можете включить Gzip.

Принцип Gzip

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

Gzip на стороне сервера и Webpack рядом

Сжатие сервера также требует дополнительных затрат времени и ЦП, поэтому иногда его можно использовать.Webpackвыполнить сжатие Gzip, чтобы разделить нагрузку на сервер.

Десять серверных рендерингов

Что такое рендеринг на стороне сервера (рабочий механизм рендеринга на стороне сервера)
Зачем использовать рендеринг на стороне сервера (какие проблемы с производительностью решает рендеринг на стороне сервера)
Как сделать рендеринг на стороне сервера (примеры применения и сценарии использования рендеринга на стороне сервера)

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

При рендеринге на стороне клиента содержимое, отображаемое на странице, часто не находится в исходном HTML-файле.

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

То есть клиент напрямую получает HTML-контент, не запуская JS для создания DOM-контента.

«То, что вы видите, это то, что вы получаете», в контексте рендеринга на стороне сервера содержимое, представленное на странице, также можно найти в исходном HTML-файле.

10.2 Решенные проблемы с производительностью

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

Для лучшего SEO-эффекта необходимо показывать поисковым системам «готовый контент», а затем запускать отрисовку на стороне сервера.

Во-вторых, рендеринг на стороне сервера решает проблему производительности — скорость загрузки первого экрана слишком низкая.

Из входного URL-адреса в процесс рендеринга страницы мы знаем, что если это рендеринг на стороне клиента, нам нужно загрузить HTML, CSS, а затем сформировать его через JS.Render Tree, а затем нарисуйте страницу после позиционирования.

Во время этого процесса пользователь ждал.Если используется рендеринг на стороне сервера, серверная сторона может напрямую предоставить страницу, которая может быть представлена пользователю.

10.3 Как использовать рендеринг на стороне сервера

Как включить рендеринг на стороне сервера для React
Как включить рендеринг на стороне сервера для Vue

Включите реакцию:

import React from 'react';

const VDom = () => {
  return <div>我是一个被渲染为真实 DOM 的虚拟 DOM</div>
};

export default VDom;

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import VDom from './VDom';

// 创建一个 express 应用
const app = express();

// renderToString 是把虚拟 DOM 转化为真实 DOM 的关键方法
const RDom = renderToString(<VDom />);

// 编写 HTML 模板，插入转化后的真实 DOM 内容
const Page = `
<html>
  <head>
    <title>test</title>
  </head>
  <body>
    <span>服务端渲染出了真实 DOM:  </span>
    ${RDom}
  </body>
</html>
`;
            
// 配置 HTML 内容对应的路由
app.get('/index', function(req, res) {
  res.send(Page)
});

// 配置端口号
const server = app.listen(8000);

VDomкомпонент былrenderToStringпревращается в содержание<div data-reactroot="">我是一个被渲染为真实 DOM 的虚拟 DOM</div>, который вставляется в код HTML и становится частью фактического дерева DOM.

Что касается Vue, вы можете увидеть:Рендеринг на стороне сервера (SSR)?

Если вы не знакомы с Vue, вы не дрогнете.

10.4 Краткий обзор рендеринга на стороне сервера

SSR в основном используется для решения нехватки одностраничных приложений и проблем SEO, а также решать расходы на связь с Backend Studients. В то же время: улучшение давления сервера, едят ЦП, память и т. Д., Оптимизация не хорошая.

Механизм рендеринга одиннадцати браузеров

Ядро браузера определяет, как браузер интерпретирует синтаксис веб-страниц.

В настоящее время распространенными ядрами браузеров являются:Trident(ИЕ),Gecko(Fire Fox),Blink(Хром, Опера),Webkit(Сафари).

11.1 Шаги рендеринга в браузере

Как показано выше, процесс рендеринга браузера:

Разбирать HTML, генерироватьDOMДерево
Разобрать CSS, сгенерироватьCSS 规则树（CSS Rule Tree）
БудуDOM Treeа такжеCSS Rule Treeкомбинировать, генерироватьвизуализировать дерево(Render Tree)
Начиная с корневого узла, рассчитайте размер и положение каждого элемента и задайте точные координаты экрана, где должен появиться каждый узел, чтобы получить дерево рендеринга.дерево рендеринга компоновки(Layout of the render tree).
Пройдите по дереву рендеринга, нарисуйте каждый узел с помощью механизма рендеринга пользовательского интерфейса и нарисуйте все дерево на странице.Этот шаг называетсянарисовать дерево визуализации(Painting the render tree)

11.2 Оптимизация — проблемы с селектором CSS

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

#ul li {}

Такое однострочное правило, когда мы его пишем, получается очень плавным: сначала найдиidдляulэлемент, затем найдитеliэлемент.

Но на самом деле синтаксический анализатор CSS работает справа налево, он сначала найдет всеliэлементы и подтвердите это один за другимliродитель элементаidне так лиul, это мертво.

так как подстановочный знак* { padding: 0; margin: 0 }В этом случае друзья должны уменьшить настройки, иначе чем больше элементов на странице будет пройдено, тем дольше будет сопоставление.

В заключение:

Избегайте подстановочных знаков*Ждать.
Сократите использование селекторов тегов, вместо этого используйте селекторы классов или селекторы тегов, напримерspanзаменить.span.
уменьшить вложенные совпадения, например.#ul li a.

11.3 Оптимизация — проблемы с загрузкой CSS

Чтобы избежать проблемы с парсингом HTML, но не парсинга CSS, что приводит к проблеме, что страница прямо «прокручивается» перед пользователем, браузер не будет отображать обработанный контент при обработке CSS. дерево правил.

Так много раз мы будем иметь дело с веб-сайтом CSS как можно скорее, то естьheadвключено в ярлыкеlinkИли включите CDN, чтобы оптимизировать скорость загрузки статических ресурсов.

11.4 Оптимизация — проблемы с загрузкой JS

Мы не упомянули JS в приведенном выше процессе загрузки.На самом деле JS изменит DOM и CSSDOM, поэтому выполнение JS заблокирует синтаксический анализ дерева правил CSS, а иногда и DOM.

Фактически, когда анализатор HTML встречаетscriptтег, он приостанавливает процесс синтаксического анализа и передает контроллер JS-движку.

Если это внутренний код JS, он будет выполняться напрямую, но если этоsrcЕсли он вводится, скрипт должен быть сначала получен, а затем выполнен.

После выполнения движка JS он передается движку рендеринга для продолжения построения дерева HTML и дерева правил CSS.

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

Так что мы можем пройтиasyncАсинхронно загрузить JS-скрипт, а затем выполнить содержимое внутри; или черезdeferПосле того, как весь документ будет проанализирован, запустите файл JS.

Если зависимости между элементами JS и DOM или другим кодом JS не являются сильными, используйтеasync.

Если JS зависит от элементов DOM и других результатов выполнения JS, используйтеdefer.

11.5 Оптимизация — проблемы с рендерингом DOM

При использовании JS для манипулирования DOM это фактически связь между механизмом JS и механизмом рендеринга, и этот процесс связи является дорогостоящим.

Каждый раз, когда вы работаете с DOM, вы будете платить один раз, и если страниц больше, он зависнет.

В то же время изменение размера и других элементов при работе с DOM также вызовет перекомпоновку и перерисовку.

переплавка: ака перестановка (layout). Когда срабатывает размер, структура или определенные свойства элемента, браузер повторно отображает страницу, что называется перекомпоновкой. В это время браузеру необходимо произвести перерасчет, а после расчета ему необходимо переразметить страницу, так что это более тяжелая операция.
перекрашивать: когда изменение стиля элемента не влияет на макет, браузер будет использовать перерисовку для обновления элемента.В настоящее время на уровне пользовательского интерфейса требуется только повторный пиксельный рендеринг, поэтомуМеньше потерь.

Какое действие вызывает перекомпоновку?

Добавляйте и удаляйте элементы DOM
Изменить границы, поля, ширину и высоту (border,margin,padding,width,height)
Браузер меняет окно (resize)
……Ждать

Какое действие запускает перерисовку?

Измените цвет фона, цвет (background,color)
Установить видимость (visibility)
Установите фоновое изображение (background-image)
……Ждать

Если мы внимательно посмотрим на эту картинку, то увидим перестановку (Layout) приведет кRender Treeрефакторинг, который, в свою очередь, вызывает перерисовку (Painting):

Рефлоу надо перерисовывать, перерисовка не обязательно рефлоу.

Поэтому, когда мы манипулируем DOM, мы можем оптимизировать его следующим образом:

【CSS】Использоватьvisibilityзаменятьdisplay
【CSS】Избегайтеtableмакет. дляRender TreeВычисление , как правило, нужно пройти только один раз, ноtableМакет должен быть рассчитан несколько раз, обычно в 3 раза длиннее эквивалентного элемента, поэтому избегайте этого.
【JS】Избегайте делать это частоwidth,heightи т. д. вызовет операцию перекомпоновки.
[JS] При работе с DOM, если вы добавляете узлы DOM, вы можете управлять всеми узлами в JS перед рендерингом (однократно)

12 Предварительная загрузка ресурсов страницы

preloadПредоставляет декларативную команду, которая позволяет браузеру загружать указанный ресурс заранее (не выполняется после загрузки) и выполнять его, когда это необходимо.

Предоставляемые преимущества в основном:

Разделение загрузки и выполнения, неблокирующий рендеринг иdocumentизonloadмероприятие
Загрузить указанный ресурс заранее и больше не зависеть от негоfontШрифты требуют времени для обновления

<!-- 使用 link 标签静态标记需要预加载的资源 -->
<link rel="preload" href="/path/to/style.css" as="style">

<!-- 或使用脚本动态创建一个 link 标签后插入到 head 头部 -->
<script>
  const link = document.createElement('link');
  link.rel = 'preload';
  link.as = 'style';
  link.href = '/path/to/style.css';
  document.head.appendChild(link);
</script>

в не поддержкеpreloadв среде браузера соответствующийlinkЭтикетка.

различатьpreloadа такжеprefetch:

preload: Сообщите браузеру ресурсы, которые необходимы странице, и браузер загрузит эти ресурсы.
prefetch: Сообщает браузеру, какие ресурсы могут понадобиться странице, которые браузер не обязательно будет загружать.

Конечно, при разработке нужно обратить внимание на следующее:

избегать злоупотребленийpreload
избегать смешиванияpreloadа такжеprefetch
избегать неправильного использованияpreloadЗагружать ресурсы из разных источников

тринадцать длинный список

13.1 Ленивая загрузка

Идеи реализации ленивой загрузки:

divУстановите через фоновое изображение наnone, играет роль занимающего места.
появляется в видимой области,divВведите действительный URL.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Lazy-Load</title>
  <style>
    .img {
      width: 100px;
      height: 300px;
    }
    .img img {
      width: 200px;
      height: 400px;
    }
  </style>
</head>
<body>
  <div class="container">
    <!-- 注意我们并没有为它引入真实的 src -->
    <div class="img"><img class="pic" alt="加载中" data-src="https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/AboutMe-painting1.png"></div>
    <div class="img"><img class="pic" alt="加载中" data-src="https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/AboutMe-painting2.png"></div>
    <div class="img"><img class="pic" alt="加载中" data-src="https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/AboutMe-painting3.png"></div>
    <div class="img"><img class="pic" alt="加载中" data-src="https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/AboutMe-painting4.png"></div>
    <div class="img"><img class="pic" alt="加载中" data-src="https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/AboutMe-painting5.png"></div>
    <div class="img"><img class="pic" alt="加载中" data-src="https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/bpmn6.png"></div>
    <div class="img"><img class="pic" alt="加载中" data-src="https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/bpmn7.png"></div>
    <div class="img"><img class="pic" alt="加载中" data-src="https://hexo-blog-1256114407.cos.ap-shenzhen-fsi.myqcloud.com/bpmn8.png"></div>
  </div>

  <script>
    (function() {
      // 获取所有的图片标签
      const imgs = document.getElementsByTagName('img');

      // 获取可视区域的高度（document.documentElement.clientHeight 是兼容低版本 IE）
      const viewHeight = window.innerHeight || document.documentElement.clientHeight;

      // num 用于统计当前显示到了哪一张图片，避免每次都从第一张图片开始检查是否露出
      let num = 0;

      const lazyload = () => {
        for (let i = num; i < imgs.length; i++) {

          // 用可视区域高度减去元素顶部距离可视区域顶部的高度
          let distance = viewHeight - imgs[i].getBoundingClientRect().top;

          // 如果可视区域高度大于等于元素顶部距离可视区域顶部的高度，说明元素露出
          if (distance >= 0){

            // 给元素写入真实的 src，展示图片
            imgs[i].src = imgs[i].getAttribute('data-src');

            // 前 i 张图片已经加载完毕，下次从第 i + 1 张开始检查是否露出
            num = i + 1;
          }
        }
      }

      // 首屏初始化
      lazyload();

      // 监听Scroll事件
      window.addEventListener('scroll', lazyload, false);
    })()
  </script>
</body>
</html>

Существуют и другие методы, такие как:

imgПоставляется с этикеткойloadingАтрибуты
InsectionObserver
Скелетонный экран

13.2 Рендеринг видимой области

Бесконечная прокрутка очень распространена на мобильных устройствах, но рендеринг видимой области не распространен, в основном из-за UIWebView на IOS.onscrollЕго нельзя активировать в режиме реального времени.

Идея реализации рендеринга видимой области:

Вычислить начальные данные текущей видимой областиstartIndex
Рассчитать текущие конечные данные видимой областиendIndex
Рассчитать данные текущей видимой области и отобразить их на странице
рассчитатьstartIndexПозиция смещения соответствующих данных во всем спискеstartOffset, и установите в список

Реализация кода: незначительно.

14. Мониторинг производительности

Инструменты ChromePerformance
Плагин ChromePage Speed
инструмент автоматизацииLighthouse
1. Установка расширения для хрома
2. npm i lighthouse -g,lighthouse https://www.baidu.com
3. Chrome имеетLightHouseизAuditsпанель

15 ссылок

В этой статье 31 ссылка.

15.1 Оптимизация веб-пакета

2019 Статьи:

Оптимизация Webpack — удвойте эффективность сборки【Рекомендация по прочтению: 10 минут】
Оптимизация производительности --- Оптимизация скорости сборки Webpack【Рекомендация по прочтению: 10 минут】
Используйте webpack4, чтобы повысить скорость компиляции на 180%【Рекомендация по прочтению: 10 минут】
Код многопроцессорного параллельного сжатия【Рекомендация по прочтению: 5 минут】
Что такое подъем объема в веб-пакете?【Рекомендация по прочтению: 5 минут】
webpack 4: оптимизация разделения кода и чанков【Рекомендация по прочтению: 5 минут】

2018 Статьи:

Практика оптимизации производительности Tree-Shaking — принципы【Рекомендация по прочтению: 10 минут】
На 80% меньше объема! Раскройте истинный потенциал встряхивания дерева веб-пакетов【Рекомендация по прочтению: 10 минут】
Ваш Tree-Shaking бесполезен【Рекомендация по прочтению: 5 минут】
Как webpack устраняет мертвый код с помощью анализа области действия【Рекомендация по прочтению: 5 минут】
Пусть ваш Webpack взлетит — история участника Koala Практика оптимизации Webpack【Рекомендация по прочтению: 5 минут】
webpack dllPlugin объем упаковки и оптимизация скорости【Рекомендация по прочтению: 5 минут】
Разделение кода для оптимизации веб-пакета【Рекомендация по прочтению: 5 минут】

2017 Статьи:

Скорость оптимизации пакетов Webpack【Рекомендация по прочтению: 5 минут】
Speed Up Webpack — узкий поиск файлов【Рекомендация по прочтению: 5 минут】
Оптимизируйте вывод Webpack с помощью Scope Hoisting【Рекомендация по прочтению: 5 минут】
Разделение кода Webpack Dafa【Рекомендация по прочтению: 5 минут】

15.2 Другие оптимизации