Руководство по оптимизации экстремальной производительности интерфейса

Основные знания указывают на пути к оптимизации внешнего интерфейса.

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

Разрешение рекурсивных запросов DNS — предварительная выборка, оптимизированная для DNS;
трехстороннее рукопожатие TCP, четырехсторонняя волна - разница между http1.0/1.1/2.0, разница между http/s;
http-кеш — 304 и CDN;
Механизм рендеринга в браузере — важность CSS, порядок JS, потеря @import, анти-шейк, троттлинг, перекомпоновка, перерисовка, ускорение GPU и т. д.;
Как оптимизировать основной поток JS — веб-воркер, сегментирование задач
...

Вы оптимизировали картинку, спрайт, webp, svg;
Оптимизация упаковки, например webpack
Базовые знания по эксплуатации и обслуживанию nginx

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

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

webpack

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

Плагин анализа блоков кода webpack-bundle-analyzer

npm i webpack-bundle-analyzer -D

Исправлятьwebpack.config.js

// 在头部添加
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');

// 在plugins: [] 中新增配置如下
new BundleAnalyzerPlugin({
  analyzerMode: 'server',
  analyzerHost: '127.0.0.1',
  analyzerPort: 8000,
  reportFilename: 'report.html',
  defaultSizes: 'parsed',
  openAnalyzer: true,
  generateStatsFile: false,
  statsFilename: 'stats.json',
  statsOptions: null,
  logLevel: 'info'
})

Запустить локальные службы разработки, открыть в браузереhttp://127.0.0.1:8000
Стратегия разделения кода по умолчанию в webpack4

Является ли новый чанк общим или модулем из node_modules
Размер нового фрагмента больше 30 КБ перед сжатием.
Количество одновременных запросов на загрузку чанков по запросу меньше или равно 5
Количество одновременных запросов при первоначальной загрузке страницы меньше или равно 3

Например, из-за частых деловыхantdв компонентах пользовательского интерфейса, но все они меньше, чем30kbНе будет упакован независимо, в результате чего будет слишком много повторяющегося кода в разныхchunkсередина. В настоящее время, в соответствии с реальной деловой ситуацией, конфигурация по умолчанию не соответствует требованиям. Изменить стратегию:

Семейное ведро React и управление состоянием одноvendorМешок
и связанный с нимlibМешок
Ввод node_modulescommonМешок

// 默认配置
splitChunks: {
  chunks: 'all',
  name: false,
}

// 修改后的配置
splitChunks: {
  chunks: 'all',
  name: false,
  cacheGroups: {
    vendor: {
      name: 'vendor',
      test: module = >/(react|react-dom|react-router-dom|mobx|mobx-react)/.test(module.context),
      chunks: 'initial',
      priority: 11
    },
    libs: {
      name: 'libs',
      test: (module) = >/(moment|antd|lodash)/.test(module.context),
      chunks: 'all',
      priority: 14
    },
    common: {
      chunks: "async",
      test: /[\\/] node_modules[\\ / ] / ,
      name: "common",
      minChunks: 3,
      maxAsyncRequests: 5,
      maxSize: 1000000,
      priority: 10
    }
  }
}

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

Объем до оптимизации 56Мб (удалить sourceMap)
Оптимизированный объем составляет 36 МБ (сохранение исходной карты, удаление исходной карты составляет около 7,625 МБ).

glob и purgecss-webpack-plugin для удаления бесполезного CSS

npm i glob purgecss-webpack-plugin -D

// 在webpack.config.js中的plugins: []中添加.
// 需要注意的是paths一定要是绝对路径，比如antd的样式不在src目录下就需要写成一个数组，要不然antd的样式就会不见了
new purgecssWebpackPlugin({
  paths: glob.sync(`${paths.appSrc}/**/*`, { nodir: true })
})

В заключение:CSSРесурсы сильно сокращаются

управлять им

В настоящее время ресурсы сократились примерно до 7,25 млн;
Скорость упаковки снижается с 7,5 до 2,5 минут, а эффективность значительно повышается.

картина

webp

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

Сокровище используется в большом масштабе
Достоинства: При одинаковом качестве картинка без потерь лучше, чемpngуменьшать26%размер, с потерями более низкий коэффициентjpegмаленький25-34%.
Недостатки: Некоторые браузеры несовместимы и должны быть совместимы.официальныйпоставка

// check_webp_feature:
//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
//   'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "data:image/webp;base64," + kTestImages[feature];
}

Согласно заголовку запроса, сообщенному клиентомaccept: image/webp, сервер оценивает и возвращает, если он поддерживаетwebpИсходное изображение не поддерживается.

Спрайт

Несколько изображений собираются в одно изображение с помощьюbackground-positionпозиция. Уменьшить http-запросы.

HTTP2 может решить проблему блокировки заголовка строки.

iconfont

svg версия спрайта

base64

// 字符转
window.btoa('str');
// canvas 转
canvas.toDataURL();
// 图片转
const reader = new FileReader();
const imgUrlBase64 = reader.readAsDataURL(file);
// webpack 打包转
// url-loader

Преимущества: легко хранить в html и js, уменьшая количество http-запросов.
Минусы: размер файла увеличивается30%о.

Он подходит для сцен с небольшим количеством небольших изображений.

тайник

Кэш DNS

Найти процесс

Сначала DNS-кэш браузера
найтиhostsдоменное имя файлаIPMapping (вы знаете IP за стеной DNS, но не заблокированный, вы можете установить доступ к файлу hosts)
найти местныйDNS解析器(Маршрутизация) кэш
Корневой DNS-сервер -> верхний уровень .com -> сервер доменных имен второго уровня xx.com -> хост www.xx.com

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

HTTP-кэш

Просто отложите, покаSPAПроекты, как правило, статические ресурсы размещаются на CDN, Для часто меняющихся входных файловindex.htmlУстановить срок действия обязательной проверкиCache-Control: no-cahceИли просто не кэшировать. разноеhashИменованные ресурсы напрямую устанавливают длинный кеш (максимальный возраст: полтора года).

Конкретные детали были объяснены в другом тексте, ссылка на который находится в конце текста.

CDN (сеть доставки контента) Сеть доставки контента

преимущество:

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

Локальный кеш localStorage, sessionStorage, куки

storage

localStorage всегда существует в браузере, либо пользователь удаляет его, либо политика кэширования браузера отбрасывается.
Страница sessionStorage закрывается и исчезает

Преимущество: может хранить большие данныеChrome 5M

в сравнении сstorage:

Преимущества: Вы можете установить время истечения срока действия
Недостатки: маленький объем памяти,http1.xОб этом будет сообщаться серверу каждый раз, что приведет к потере сети.

Рекомендация: Установите данные безопасности сервераhttp-only, можно использовать как можно реже и использовать только для поддержания состояния и идентификации пользователя на сервере.

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

CSS

уменьшать@importиспользование, анализ браузераhtmlБудет оптимизировать сниффинг для получения параллельных файлов, если используется@importНужно скачать и разобрать текущийCSSфайл для скачивания.
CSS имеет более высокий вес и должен быть загружен и проанализирован в первую очередь.

Отложенный скрипт, асинхронный

Действует только для исходящих скриптов. Известно, что синтаксический анализ скрипта блокируетDOMРазбор, эти два свойства предназначены для решения этой проблемы.

deferНе блокируйте синтаксический анализ HTML в DOM при загрузке и дождитесь завершения загрузки.DOMпостроен и вDOMContentLoadedВыполняется до запуска события, несколько разdeferСкрипты гарантируют порядок выполнения скриптов.
asyncПри скачивании не блокируйте парсинг HTML в DOM, а после скачивания старайтесь организовать выполнение JS. Это означает, что время выполнения не определено, и загрузка выполняется раньше. еслиDOMСкрипты могут блокировать построение DOM без завершения.
Например, клад широко используется на головеasync
Но я не очень понимаю, по принципуasyncследует использовать дляDOM构建Сценарии, не зависящие от порядка скриптов, и слишком быстрая загрузка могут блокироватьDOM构建. Чувствоватьdeferболее подходящий.

Защита от сотрясений, дросселирование

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

Предотвратить принудительную компоновку

В основном, чтобы избежать чтения и записи стилей в цикле

Ускорение графического процессора

will-change: transform
transform: translateZ(0)

Уровень продвижения элемента будет переданGPUвизуализировать, подогнать некоторыеAnimationанимация.

requestAnimation, requestIdelCallback

googleВ документации много дискуссий, новые способы обнаружения вычислительно длинных задач.apiпрогресс.
Facebookдо настоящего времениreactсерединаfiberпланирование, использованиеrequestAnimation, requestIdelCallbackПриходить Разделение времени на длительные задачи, избегая глубоких предыдущихDOMОбновление дерева занимает много времени или даже дрожит.

web worker

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

сервер

http2

Основной прогресс http1.1 по сравнению с http 1.0:

Усовершенствования обработки кэша, такие какEtag
Присоединяйсяrangeзаголовок, код ответа206（Partial Content）Поддерживает возобновление с точки останова
Присоединяйсяhostзаголовок, несколько доменных имен могут быть привязаны к одномуIP
заголовок ответаConnection: keep-alive, долгое соединение, клиенту не нужно связываться с одним и тем же хостом несколько раз三次握手

https и http

https требует приложенияCAСертификат, запрашивающий деньги; https добавляет еще один уровень протокола безопасности поверх httpSSL/TLS;
Клиент проводитCAАутентификация, соединение требует асимметричного шифрования (занимает много времени), а данные передачи используют симметричное шифрование;
Запретить операторам захватывать http, вставлять рекламу и т. д. http-порт80, https443.

http2 против http1.x

Сжатие заголовка, например, последний должен нести много одной и той же информации заголовка каждый раз, когда данные передаются, http2 будет сжимать заголовок и избегать повторной повторной передачи заголовка;
Новый бинарный формат, последний основан на разборе текстового протокола, первый основан на строках 01, что удобно и надежно;
мультиплексирование, обратите внимание, что сkeep-aliveразличать. Первый — это совместное использование соединения, каждый запрос имеет уникальныйidДля подтверждения атрибуции несколько запросов можно смешивать друг с другом одновременно. Последний уменьшает количество рукопожатий для поддержания длинных соединений, что повлияет на производительность сервера.При первом входе, первом выходе необходимо дождаться завершения предыдущего запроса, прежде чем переходить к следующему, что приводит к блокировке заголовка очереди. Клиент обычно ограничивает верхний предел одновременных http-соединений между страницей и разными серверами;
Сервер push, http1.x сервер может только пассивно получать запросы на отправку ресурсов, HTTP2 может активно push.

http2 может повысить эффективность передачи. Это необходимо для nginx для обновления и понижения версии http2.

gzip

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

Как показаноindex.htmlсжатие файлов(383-230)/383=39.95%.

Заголовки запросов Chrome сообщают серверу о поддерживаемых алгоритмах сжатия:Accept-Encoding: gzip, deflate, br
Алгоритм сжатия, используемый заголовками ответа ответа сервера:Content-Encoding: gzip

nginx включен

gzip on;
// 不压缩临界值，大于1K的才压缩，一般不用改
gzip_min_length 1k;
// 压缩级别，1-10，数字越大压缩的越细，时间也越长
gzip_comp_level 2;
// 进行压缩的文件类型
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
// ie兼容性不好所以放弃
gzip_disable "MSIE [1-6]\.";

плагин сжатия-webpack с gzip

npm i compression-webpack-plugin -D

const CompressionWebpackPlugin = require('compression-webpack-plugin');

// 在webpack.config.js中的plugins: []中添加.
new CompressionWebpackPlugin({
  asset: '[path].gz[query]', // 目标文件名
  algorithm: 'gzip', // 使用gzip压缩
  test: /\.(js|css)$/, // 压缩 js 与 css
  threshold: 10240, // 资源文件大于10240B=10kB时会被压缩
  minRatio: 0.8, // 最小压缩比达到0.8时才会被压缩
})

преимуществоnginxвключиgzip, обнаружил, что сжатыйgzipСжатые файлы будут использоваться напрямую, что снижает нагрузку на сервер.cpuиспользование ресурсов.
недостаток Время упаковки будет увеличено. Теперь статические ресурсы обычноCDN,gzipЭто базовая услуга сервера CDN, Нужно сохранить ресурсы сервера, на которые вы потратили деньги, и увеличить время упаковки?

es6, динамическое использование POLYFILL

webpackПоддержка по умолчаниюes6новые особенностиtree-shaking, можно стряхнуть неиспользуемый код, да и производительность нового API высокая. Рекомендуется полное использование.

// 会根据ua返回不同的内容
https://polyfill.io/v3/polyfill.min.js

строить планы	преимущество	недостаток
babel-polyfill	Реагировать на официальную рекомендацию	Объем 200кб
babel-plugin-transform-runtime	небольшой объем	Не удается заполнить методы на прототипе
polyfill-service	Динамическая загрузка в соответствии с пользовательским интерфейсом	Совместимость, некоторые отечественные браузеры имеют проблемы

Вывод: можно уменьшить размер ресурсов, но если вы полагаетесь на внешние сервисы и строите сами, откажитесь от этого.

Ссылаться на

От оптимизации до руководства по одежде для собеседования — веб-серия

webpack

Плагин анализа блоков кода webpack-bundle-analyzer

glob и purgecss-webpack-plugin для удаления бесполезного CSS

картина

webp

Спрайт

iconfont

base64

тайник

Кэш DNS

HTTP-кэш

CDN (сеть доставки контента) Сеть доставки контента

Локальный кеш localStorage, sessionStorage, куки

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

CSS

Отложенный скрипт, асинхронный

Защита от сотрясений, дросселирование

Предотвратить принудительную компоновку

Ускорение графического процессора

requestAnimation, requestIdelCallback

web worker

сервер

http2

gzip

плагин сжатия-webpack с gzip

es6, динамическое использование POLYFILL

Ссылаться на

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

webpack

http связанные

iconfont