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

предисловие

Оптимизация производительности — очень важное предложение. Будь то крупная фабрика или небольшая компания, они оптимизируют и исследуют, чтобы страница быстрее отображалась перед пользователями.页面性能也是检验一个前端工程师项目成果的重要指标,так,无论是不是要面试，常用的性能优化的手段还是要熟练掌握.

в предыдущих двух статьяхЗнания сервера, которые должны видеть фронтенд-инженеры,Отслеживание механизма рендеринга исходного браузера, какие детали Технические детали URL-адреса от ввода до рендеринга страницы, мы резюмируем эту статью,常用的性能优化操作.构建阶段的性能优化可以参考这篇Webpack не включает обучение или нет (2) Рекомендации по оптимизации производительности.

Сохранение карты Бога

navigation Timing流程图

уменьшить HTTP-запросы

减少页面的HTTP请求数является отправной точкой, важным ориентиром для повышения скорости первого посещения вашего сайта,小字当先.

Объединение скриптов и таблиц стилей

Объединить файлы css и js, после объединения размер файла, большие файлыgizpне может превышать33kb(не все упаковано в один), количество файлов должно быть适量.

CSS Sprites

является предпочтительным способом уменьшить количество запросов изображений. Объедините фоновые изображения в одно изображение, а затем используйте CSSbackground-imageа такжеbackground-positionсвойство, чтобы расположить раздел для отображения.

Встроенное изображение (в кодировке Base64)

Используйте шаблон data: URL для встраивания изображений на страницы. Это увеличивает размер HTML-файла, и рекомендуется помещать встроенные изображения в (кэшированную) таблицу стилей и успешно избегать того, чтобы страница становилась «тяжелой». Но современные основные браузеры плохо поддерживают встроенные изображения.

Настройте несколько доменных имен и ускорение CDN

Обычно браузеры一个域名的并发请求是有限Например: необходимо загрузить 100 файлов, но браузер может одновременно запрашивать только 10 файлов, поэтому для выполнения нескольких одновременных запросов потребуется время. Таким образом, настройка нескольких доменных имен может максимизировать количество одновременных запросов.

Однако здесь есть недостаток, который увеличит количество разрешений доменных имен браузера.Рекомендуется использовать CDN для загрузки статических ресурсов (изображений, библиотек css, сторонних библиотек js и т. д.), которые не часто обновляются и модифицированный. Во-первых, доменные имена CDN обычно кэшируются локально, а во-вторых, сетевые запросы CDN выполняются очень быстро.

стратегия кэширования

Ресурсы кеша являются наиболее立竿见影Установив атрибут кеша в заголовке запроса, при следующем посещении вы сможете напрямую получать ресурсы из локальной области, уменьшая ненужную передачу данных, экономя пропускную способность, снижая нагрузку на сервер, повышая производительность сайта и ускоряя загрузку. скорость страницы клиента. ,около强缓存和协商缓存Контент можно просмотреть передЗнания сервера, которые должны видеть фронтенд-инженеры.

Приоритет кеша: управление кешем > истекает > Etag > последнее изменение

При первом запросе браузер проверит наличие настройки кеша и запишет ее в память, при следующем запросе сервер вернет 304 для извлечения из кеша и 200 для извлечения с сервера .

cache-control

настраивать过期时间长度(секунды), в пределах этого временного диапазона браузер будет напрямую читать кеш, когда истечет срок действия, и кеш-контроль существуют, кеш-контроль优先级更大.

expires

Установите время истечения в заголовке http. До этого времени истечения срока действия запрос браузера не будет выдан, и файл будет считан из кеша, если только кеш не будет очищен или принудительно обновлен. Недостаток в том, что время сервера и время клиента может быть непоследовательным, всеhttp1.1Введен контроль кеша для улучшения.

etag

Когда сервер возвращает ресурс, если в заголовке есть etag, ресурс автоматически добавит значение в заголовок запроса в следующем запросе.if-none-match, сервер может сравнить это значение, чтобы определить, изменился ли ресурс, и вернуться, если изменений нет.304.

last-modified

Когда сервер возвращает ресурс, если заголовок имеетlast-modified, время запроса ресурса добавит значение кif-modified-since, сервер может сравнить это значение, чтобы определить, изменился ли ресурс и вернулся ли304.

Оптимизация загрузки трансфера

запустить gzip

Настроить в nginxgzip: on

Сначала мы можем сравнить, если бы мы не включали сжатие zip, наш соответствующий размер файла был бы следующим:

Теперь включаем gzip для сжатия размера файла, можно увидеть следующее:

И мы смотрим на заголовки ответов и видим сжатие, подобное gzip, как показано ниже.

Этот коэффициент сжатия очень объективен и значительно повышает эффективность страницы.

Keep-Alive

Добавить Connection: keep-alive в заголовок HTTP-запроса, чтобы указать другой стороне не закрывать запрос после завершения ответа, и мы продолжим общаться с этим запросом в следующий раз.

Keep-Alive вHttp1.1По умолчанию открыто, вы можете увидеть в заголовке ответаConnection: keep-alive.

В конфигурации nginx есть еще две важные настройки

keepalive_timeout 65  // 保持连接的时间，也叫超时时间，单位秒
keepalive_request 100 // 最大连接上限

Браузер запрашивает //xx.cn/a.js--> разрешает доменное имя —> HTTP-соединение —> сервер обрабатывает файл —> возвращает данные —> браузер анализирует и отображает файл. Решено Keep-Alive核心问题Прямо здесь,一定时间内，同一域名多次请求数据，只建立一次HTTP请求，其他请求可复用每一次建立的连接通道, чтобы повысить эффективность запроса. Можно настроить определенный период времени,

HTTP1.1 по-прежнему имеет проблемы с эффективностью

последовательная передача файлов
Слишком много соединений

HTTP/2 основан на потоке для всех запросов под одним и тем же доменным именем, а это означает, что независимо от того, к скольким файлам осуществляется доступ с одного и того же доменного имени, устанавливается только одно соединение. Точно так же максимальное количество подключений Apache равно 300. Благодаря этой новой функции максимальное количество одновременных соединений может быть увеличено до 300, что в 60 раз больше, чем в оригинале!

ленивая загрузка

Загружайте изображение только в визуальном окне, что значительно повышает скорость первого рендеринга! Родная поддержка плюсloading属性Требуется поддержка браузера

сторонние плагины

lazyload (opens new window)
react-lazyload(opens new window)

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

В предыдущей статье мы видели, что браузер сгенерировал四棵树

Поток GUI и поток js互斥из
Переформатировать и перерисовать дорого

Поместите таблицы стилей вверху, а файлы js внизу.

Военные правила Yahoo гласят,样式表放在顶部,js文件放在底部, смысл этого в том, чтобы два мастера не дрались, а исполняли слаженно.

Уменьшите количество перекомпоновок и перерисовок

chrome DevTools может обнаруживать профилирование рендеринга страницы Мы используем ключевые кадры. для достижения анимационного эффекта.

<div class="container">
  <div class="ball" id="ball"></div>
</div>

@keyframes run-around {
  0% {
    top: 0;
    left: 0;
  }
  25% {
    top: 0;
    left: 200px;
  }
  50% {
    top: 200px;
    left: 200px;
  }
  75% {
    top: 200px;
    left: 0;
  }
}

Обнаружение с помощью Chrome DevTols

Загрузка: сетевое взаимодействие и анализ HTML
Сценарии: время выполнения JavaScript
Рендеринг: расчет стиля и верстка, т.е. перестановка верстки
Покраска: Перекрасить

Видя, что браузер находится в цикле перекомпоновки и перерисовки композиции

Мы используем преобразование вместо абсолютного позиционирования дляGUI加速.

0% {
  transform: translate(0, 0);
}
25% {
  transform: translate(200px, 0);
}
50% {
  transform: translate(200px, 200px);
}
75% {
  transform: translate(0, 200px);
}

записать снова

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

requestAnimationFrame

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

Yahoo военный

雅虎公司制定了8个部分，35条性能优化准则，本文部分取自军规详细展开，详情可以查看`参考链接`。

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

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

этап (аббревиатура)	описывать	этап (полное имя)
TTFP	время первого байта	Time TO Frist Byte
FP	первый розыгрыш (первый узел)	First Paint
FCP	Первый рисунок с содержанием (скелет)	First Contentful Paint
FMP	Первый значимый розыгрыш (со всеми элементами/данными)	First Meaningful
TTI	Когда интерактивное время достигнуто, рекомендуемое время отклика находится в пределах 100 мс, в противном случае будет задержка	Time To Interactive
Long tasks	Задачи, которые превышают 50 мс
SSR&&CSR	Рендеринг на стороне сервера и рендеринг на стороне клиента	Server-Side-Rendering / Client Side Rendering
Isomorphic	изоморфизм

В качестве примера возьмем открытую страницу h5.

Монитор FP, FCP, FMP, TTI с хромированной панелью

Проблемы с производительностью SPA

Обычно код, написанный на React/Vue, упаковывается следующим образом:

Существует только один корневой узел, dom создается путем разбора js виртуального dom -> dom diff -> page

решение:может быть использованSSR服务端渲染Заполните html-контент, но это пожертвует временем TTFP.

резюме

подобно我们在电梯时会疯狂按关闭按键一样，用户是没有耐心等待一个页面的加载, неэффективная страница может легко потерять пользователей.

В этой статье рассматриваются две вышеупомянутые статьи, делается краткое изложение всего процесса и анализируются шаги, которые можно оптимизировать в середине.Конечно, здесь приведено как можно больше схем оптимизации.Ссылка на ссылку даст лучшую оптимизацию и производительность. Оптимизация — это долгий путь,本文会持续更新.

Ссылка на ссылку

Тщательно изучите сильный кеш и кеш согласования

Военные правила Yahoo 35

Сводка по оптимизации производительности внешнего интерфейса

Сводка по оптимизации производительности веб-интерфейса

Семь способов оптимизации производительности внешнего интерфейса

настройка кеша nginx и включение сжатия gzip

Оптимизация производительности мобильного Taobao [поделиться]

Оптимизация производительности внешнего интерфейса — сокращение HTTP-запросов

xikun's blog