Что касается оптимизации производительности интерфейса, то каждый раз, когда упоминается это слово, возникает множество идей. Теперь успокойтесь и подумайте о различных средствах, которые мы используем, можно, наконец, свести к трем этапам.
1. Байты ключевых ресурсов
Количество байтов — это то, что я обычно говорю, чтобы уменьшить размер файлов ресурсов (js, css, изображение, видео...)
1. Сжатие
- Интерфейс использует uglify для запутывания сжатия.
- Включить gzip на серверной части
- Сожмите изображение и используйте формат с более высокой степенью сжатия (webP).
2. Кэш
- Сильный кеш (код состояния http: 200), используйте локальный кеш напрямую, не запрашивая сервер
- Согласуйте кеш (код состояния http: 304), при его использовании сначала запросите сервер использовать локальный кеш, если ему говорят, что срок действия кеша не истек, без загрузки ресурсов
- Используйте localstorage для хранения данных
3. Оптимизирован для первого экрана
Отложенная загрузка и асинхронная загрузка некритичных ресурсов для уменьшения размера ресурсов на первом экране
Во-вторых, количество подключений к ключевым ресурсам.
1. Мерж-реквест
- Мультиплексирование мерж-реквестов с использованием http2.0
- Настройте комбо как средство объединения запросов ресурсов, когда нельзя использовать http2.0.
2. Уменьшите количество запросов изображений
- Используйте диаграммы злости
- использовать svg-символ
3. Используйте встроенные css и js для некоторых сценариев
4. Использование сильного кеша уменьшает один запрос к серверу
5. Некритические ресурсы задерживаются и загружаются асинхронно, что снижает количество подключений к ресурсам на первом экране.
В-третьих, критический путь рендеринга
В интернете есть картинка про путь рендеринга страницы, сюда ставить не буду, всем интересен Baidu
1, выход блока bigpipe
В основном это связано с тем, что для завершения вывода всей страницы необходимо обработать множество задач.Мы можем разделить эти несколько задач на блоки, и тот, кто выполнит их первым, выведет первый и, наконец, выведет узлы DOM через заполнение JS. Этот метод в основном решает проблему прямой блокировки страниц.
2, рендеринг блока bigrender
Обычный метод заключается в использовании внешнего шаблона для рендеринга страницы, что в основном уменьшает количество узлов при первом построении дерева DOM для первого экранного времени.
3, для оплавления, перекраски, обработки составного пути
4. Концепция слоя, когда речь идет о слое рендеринга анимации, графическом слое.
5. Поместите css вверху и js внизу, чтобы не блокировать построение дерева DOM.
По поводу влияния позиции css и js на отрисовку страницы можно обратить внимание на соответствующие статьи. Ядро: ресурсы CSS не будут блокировать построение дерева DOM, но будут блокировать рендеринг DOM, JS будет блокировать построение дерева DOM, CSS будет блокировать выполнение JS.
Суммировать
Соответствующие решения для трех шагов оптимизации производительности приведены выше.Это еще не все.В будущем каждый, кто задумывается о front-end оптимизаторах производительности, может начать с этих трех направлений бенчмарков.