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

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

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

Статус проекта

Текущий проект (платформа визуализации, если вы знаете Feibing и Drafting, это, вероятно, на один уровень сложнее, чем эти два) очень большой и сложный.Фронтенд разделен на более чем 10 проектов, которые далее делятся на состояние разработки иРабочее состояние зависит друг от друга через программные ссылки, в общей сложности около 2 миллионов строк кода.Он разделен на две фазы.Пользователи начинают использовать его после передачи первой фазы.За этот период было выявлено много проблем , включая проблемы с производительностью.

вопрос:

открыть консоль,networkсерединаOnlineпереключиться наFast3G, нажмите на консольPerformance, нажмите кнопку обновления, чтобы наблюдать время белого экрана, обычная страница должна открывать время белого экрана5s, сложные страницы требуют14s

Время белого экрана:地址栏输入网址后回车 - 浏览器出现第一个元素
Экранное время:地址栏输入网址后回车 - 浏览器第一屏渲染完成

анализировать

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

строить планы

1. Инициализируйте страницу и добавьте карту размещения

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

2. Сократите HTTP-запросы и избыточные данные

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

3. Компоненты, маршрутизация отложенной загрузки

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

4. Настройте оптимизацию nginx

Сжатый файл
включиgzipдопустимыйvue-cli2средняя ручка лесовconfig/index.jsсерединаproductionGzipУстановить какtrue

location 
    { 
        gzip on;   //开启压缩
        gzip_typestext/htmltext/plaintext/css;  //指定需要压缩的文件类型，默认为text/html
        gzip_min_length 512;  //需要进行压缩的最小文件大小（单位字节)
    }

Распределение буфера оптимизации
Nginx использует запросы к хранилищу кеша и возвращает данные, оптимизирует назначение кеша для экономии места в памяти и уменьшения использования ЦП. Обычно используемые JS, CSS и изображение могут быть установлены в локальном кеше браузера, чтобы пользователь локально кэшировал указанный выше контент, повышая скорость загрузки страницы при последующем открытии, экономя большую часть полосы пропускания.
Настроить белый список

5. Оптимизировать механизм упаковки wepack

Используйте плагины件webpack-bundle-analyzerПосмотреть все пакеты и размеры проекта

Оптимизация кода упаковки, сжатие кода
purifyCSОптимизация упаковки, дедупликация и недопустимый код
UglifyJsPluginСожмите файл js, чтобы уменьшить размер файла js и увеличить скорость загрузки.УведомлениеЭтот плагин будет замедлять скорость компиляции webpack, рекомендуется отключить его на этапе разработки и снова включить во время развертывания.
Tree ShakingУдалить неиспользуемый код. Такой функционал отлично подходит для создания больших приложений
Зависимости вводятся по требованию Удалите избыточные зависимости
Например: интерфейс iview импортируется по запросу.
код субподряда
Удалите ненужные файлы

6. Используйте CDN

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

7. Предварительный рендеринг

По сравнению с SSR предварительный рендеринг относительно прост, и предварительный рендеринг может значительно повысить скорость доступа к веб-странице. Нет необходимости в динамической компиляции в реальном времени на сервере, используется предварительный рендеринг, а статические HTML-файлы просто генерируются для определенных маршрутов во время сборки.
использоватьprerender-spa-pluginплагин

8.ssr

客户端渲染：
Также известный как внешний рендеринг, он возник с появлением js. Ajax делает внешний рендеринг более зрелым, передний конец фокусируется на пользовательском интерфейсе, а внутренний — на логике. end и back-end, взаимодействуя через согласованный API, причем back-end предоставляет данные, front-end генерирует DOM по данным и вставляет их в HTML-страницу. Большая часть первоначального рендеринга заключается в замене метки данных {{}} в исходном html, щелкните правой кнопкой мыши, чтобы просмотреть исходный код, код страницы не виден в исходном коде, а потребление производительности находится на стороне клиента.

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

服务端渲染：
Также известный как внутренняя визуализация, перед возвратом HTML сервер заполняет специфичные для региона символы HTML данными, а затем отправляет их клиенту.Клиент отвечает только за синтаксический анализ HTML. Если щелкнуть правой кнопкой мыши и выбрать «Просмотр исходного кода», код страницы можно увидеть в исходном коде. Потребление производительности находится на стороне сервера.Когда пользователь достигает определенного уровня, бэкэнд рассмотрит возможность кэширования некоторых данных, чтобы избежать повторного рендеринга чрезмерного потребления ресурсов.

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

9. Изображение в base64

в упаковкеurl-loaderПреобразуйте изображение, которое не установлено или меньше, чем установка предельного байта, и используется src img в формате base64; а для изображения, превышающего предельное байт, используйтеfile-loaderразобрать.

10. Фоновое распределенное развертывание, балансировка нагрузки

Эпилог

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