Оптимизация производительности внешнего интерфейса для предварительных интервью

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

Независимо от того, какое фронтенд-интервью, всегда задают один вопрос: оптимизация производительности фронтенда.

Я считаю, что если вы плохо ответите на этот вопрос, вы будете очень пассивны в интервью.

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

Start~

1. Оптимизация HTML

порядок рендеринга

  • 1. Таблица стилей CSS помещается в голову, и CSS будет отображаться при загрузке.
  • 2. Сценарий JS помещается в конец, и JS блокирует рендеринг до его загрузки.
  • 3. Используйте внешние таблицы стилей и скрипты для предпочтительной загрузки структуры HTML
  • 4. Ключевые коды JS и CSS могут быть встроены в HTML, такие как: rem dynamic и т. д.
  • 5. Избегайте iFrame
  • 6. Используйте экран-скелет

Во-вторых, оптимизация CSS

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

  • 1. Избегайте использования css @import
  • 2. Избегайте подстановочных знаков
  • 3. Избегайте использования !important
  • 4. Оптимизирован сброс css, поэтому в проекте не будет использоваться много сбросов
  • 5. Избегайте выражений CSS

Оптимизация анимации

  • 1. Вы можете использовать преобразование, чтобы включить ускорение графики.
  • 2. Используйте перевод вместо левого, чтобы избежать перестановки страниц

оптимизация селектора

  • 1. Старайтесь не вкладывать более трех уровней селекторов
  • 2. Старайтесь не вкладывать селекторы идентификаторов
  • 3. Используйте наследование

оптимизация объема

  • 1. Извлеките общедоступный CSS

3. JS-оптимизация

скорость бега

  • 1. Если проблем с совместимостью нет, попробуйте использовать нативный метод
  • 2. Подумайте, следует ли использовать полифиллы в соответствии с минимальной версией совместимых браузеров.
  • 3. Оператор switch может быть быстрее, чем if, за счет организации операторов case в порядке от наиболее вероятного к наименее вероятному.
  • 4. Битовая операция выполняется быстрее. Побитовые операции выполняются быстрее любых логических или арифметических операций при выполнении числовых операций.
  • 5. Умело используйте логические операторы || и &&, чтобы сократить выполнение операторов кода.
  • 6. Использование знака плюс для конкатенации является самым быстрым, за ним следуют String(), .toString(), new String()
  • 7. Когда вам нужно использовать таймер, замените setInterval на setTimeout, и setInterval всегда будет занимать память
  • 8. При создании анимации JS используйте requestAnimationFrame вместо setTimeout и setInterval

Оптимизация переменных

  • 1. Чтобы избежать глобального поиска, вы можете сохранить атрибуты, к которым необходимо получить доступ, в переменных
  • 2. Использование переменных быстрее, чем использование свойств объекта и элементов массива
  • 3. Для объектов, которые содержат большой объем данных и не требуют манипуляций, вы можете использовать Object.freeze, чтобы заморозить объекты, чтобы ускорить операцию.

Сокращение бесполезных операций

  • 1. Используйте дросселирование и защиту от тряски
  • 2. Используйте делегирование событий, чтобы заменить привязку большого количества событий
  • 3. Если вам нужно выполнить много операций с DOM, вы можете использовать Fragment, чтобы уменьшить количество операций.

Уменьшить неиспользуемый код

  • 1. Выполните встряску дерева и удалите неиспользуемый код

Оптимизация алгоритма

  • 1. Добавьте ключевое значение, чтобы максимально использовать виртуальный DOM и сократить время сравнения.
  • 2. Используйте ориентир для проверки производительности различных алгоритмов и выберите лучший

В-четвертых, оптимизация сети

Максимальное количество запросов:

  • 1. Каждый веб-сайт допускает до 6 запросов одновременно.Вы можете рассмотреть возможность развертывания ресурсов по классификации

Оптимизация скорости запроса:

  • 1. Использование CDN может увеличить скорость запроса ресурсов

Распределение времени загрузки:

  • 1. Предварительная загрузка основных ресурсов

  • 2. Загрузка ресурсов большого объема по требованию (распаковка Webpack)

Уменьшить объем загрузки

  • 1. Сжать картинки
  • 2. Сжать код HTML, CSS, JS
  • 3. Включите сжатие сети, например: GZIP

сократить время загрузки

  • 1. Создайте карту спрайтов
  • 2. Преобразуйте маленькое изображение в строку base64.
  • 3. Используйте кеш браузера
  • 4. Используйте внешний кеш, например: LocalStorage, Cookie, SessionStorage и т. д.
  • 5. Сократите запросы на перенаправление, такие как: перенаправление обратного прокси-сервера nginx
  • 6. Избегайте использования серверных шрифтов

Пять, оптимизация производительности React

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

2. Используйте постоянную структуру данных Immutable для управления избыточностью.

3. ОптимизацияshuoldComponentUpdateЖизненный цикл определяет базовый компонент BaseComponent заменяет React.Component

4. Используйте чистый компонент

5. Добавьте ключевое значение

Примечание. Приведенное выше резюме может быть неполным, вы можете добавить его в область комментариев, я добавлю его позже, спасибо~

Категории