1. Загрузка сети
1. Предварительная загрузка DNS
Через атрибут dns-prefetch браузер может заранее разрешить IP-адрес сервера, соответствующий ресурсу или интерфейсу, чтобы избежать инициирования запроса разрешения DNS в запросе и сэкономить время запроса.
2. Предварительная загрузка ресурсов
Используя свойства preload, prefetch, preconnect, мы можем
<head>Внутренний декларативный запрос на получение ресурса записи, загрузка не первого экрана, но более важных ресурсов заранее, чтобы избежать игнорирования загрузки других менее важных ресурсов в случае удовлетворения загрузки приоритета первого экрана
3. Используйте ресурсы CDN и обратите внимание на настройку заголовков http-кэша
Кэш HTTP включает надежный кеш (Cache-Control, Expire) и кеш протокола (Last-modified, Etag). Среди них ресурс кэша протокола будет отправлять запрос на сервер, чтобы определить, истек ли срок действия ресурса каждый раз, и возвращать 304, если он не истек. В случае очень медленной сети этот запрос 304 может блокировать загрузку ресурса всю страницу.
4. Ресурсы JS предпочтительно загружаются в соответствии с требованиями модуля и первого экрана, а модули, которые не нужны, загружаются по запросу.
Сетевые ресурсы на мобильном терминале ограничены.Чтобы пользователи могли увидеть осмысленный первый экран как можно скорее, нам нужно, чтобы ресурсы, которые должны быть загружены на первый экран, были как можно меньше.
5, первый экран ключевой встроенный CSS
Встраивайте ключевые стили первого экрана в страницу, чтобы обеспечить максимально быстрый просмотр первого экрана с помощью основных стилей и избежать длительного белого экрана на стороне пользователя.
6. JS-код встроенного ключа
Встроенный ключевой код также позволяет пользователю почувствовать, что страница была успешно загружена в первый раз, но встроенный код не может встроить весь код в HTML, потому что эти коды будут каждый раз загружаться вместе с HTML, что увеличивает размер HTML-файла.Также невозможно сделать так, чтобы в коде была предусмотрена функция повторного использования между разными страницами
7. Проверьте, сжаты ли ресурсы, доставленные сервером, с помощью GZIP.
GZIP имеет высокую эффективность сжатия текстовых ресурсов (файлы JS, CSS), обычно уменьшая объем на 70%.
8. Избегайте перенаправления ресурсов
Увеличивает время загрузки, плохой пользовательский опыт
9. Асинхронная ленивая загрузка стороннего некритического кода
Ресурсы мобильной сети ограничены, чтобы эти неважные коды не влияли на отрисовку первого экрана, вы можете отложить загрузку на небольшой промежуток времени.
10. Разумно используйте локальный кеш, чтобы не помещать все ненужные данные в COOKIE
Каждый запрос AJAX будет передавать на сервер все значения cookie в текущем доменном имени.
11. Используйте сервис-воркеров, чтобы улучшить работу страницы в автономном режиме и скорость загрузки страницы.
Когда страница отправляет запрос, она сначала проходит через скрипт SW, что позволяет нам программно указать файлы, которые нам нужно кэшировать, при этом файлы, кэшированные в сервис-воркере, могут быть доступны пользователям в автономном режиме.
12, в случае, когда разрешение условий, протокол может использоваться http2.0
Протокол HTTP2.0 может улучшить повторное использование сетевых ссылок и повысить эффективность загрузки ресурсов.
2. HTML
1. Обратите внимание на семантику тегов и оставьте наиболее краткие теги для выполнения необходимых функций.
Семантика тегов улучшает ремонтопригодность кода, и это не будет некрасиво, когда CSS не сможет загрузиться на странице. В то же время метки должны быть сведены к минимуму, бессмысленные метки могут быть представлены псевдоклассами.
2. CSS размещается в голове, JS размещается в конце тела, когда нужно разместить и JS, и CSS в голове, JS размещается спереди
1. CSS заблокирует отрисовку страницы, но не парсинг DOM 2. JS заблокирует парсинг DOM, но браузер заранее загрузит ресурсы 3. Браузер инициирует отрисовку страницы при встрече тег сценария. Если CSS не был загружен, страница будет ждать загрузки CSS перед выполнением
3, сжатие кода HTML, удаление комментариев, пробелы
Уменьшите размер файла для передачи по сети
4. Старайтесь избегать использования фреймов
Процесс загрузки ресурсов в iframe заблокирует загрузку статических ресурсов родительской страницы и анализ CSS и HTML DOM.
3. CSS
1. Сожмите код CSS и исключите повторяющиеся стили CSS.
Уменьшите размер файла для передачи по сети
2. Упакуйте файлы CSS в соответствии с компонентами
Загрузка по требованию, уменьшение размера файла для сетевых переводов
3. Избегайте синтаксиса CSS @import
Может блокировать загрузку страницы
4. При использовании предварительно скомпилированных языков, таких как Sass, Stylus и Less, вложенность кода CSS не должна превышать 3-х слоев.
Повысить эффективность парсинга CSS
5. Используйте автопрефиксер для автоматического добавления префиксов в код CSS.
Автоматически помогайте нам добавлять заголовки браузера, чтобы избежать непредвиденных проблем с совместимостью браузера.
6. Используйте подстановочные знаки CSS как можно реже, особенно в конце многоуровневого вложения.
Процесс синтаксического анализа CSS представляет собой обратное сопоставление справа налево. Использование подстановочных знаков CSS увеличивает объем вычислений синтаксического анализа.
7. Не злоупотребляйте стилем с высоким потреблением
Свойства box-shadow, border-radius и filter требуют от браузера большого количества вычислений перед рисованием.
4. Анимация
1. Старайтесь использовать только трансформацию, непрозрачность, переход и другие атрибуты для создания простых анимаций.
Изменения таких свойств, как ширина, высота, верхнее, левое, правое, нижнее и поле, вызовут изменение порядка страниц. Частые изменения в мобильной среде могут привести к зависанию анимации.
2, более сложная анимация может использовать анимацию кадра css
Хорошая совместимость, хорошая производительность и большая управляемость на мобильном терминале
3. Не используйте setTimeout и setInterval для js-анимации, используйте requestAnimationFrame
setTimeout и setInterval имеют проблемы с производительностью при выполнении анимации и не могут точно контролировать количество кадров.
4. Для части, которая будет использовать анимацию, включите аппаратное ускорение графического процессора (будьте осторожны, чтобы не злоупотреблять им).
Для тегов, которые включают аппаратное ускорение графического процессора, браузер выдвинет их на отдельный уровень и предварительно обработает с помощью графического процессора.
5. Используйте атрибут will-change (будьте осторожны, чтобы не злоупотреблять)
Роль will-change сообщает браузеру, какие свойства изменятся, чтобы он мог подготовиться заранее.
5. JavaScript
1. Сжатие кода JS, загрузка подмодуля кода
Уменьшите размер кода, загрузите ресурсы по запросу в соответствии с требованиями страницы и сведите к минимуму размер ресурсов, которые пользователи должны загружать для ускорения отображения страницы.
2. При работе с длинными списками или большим количеством элементов DOM не связывайте слишком много функций прослушивания событий.
Экономьте память и уменьшите регистрацию событий прослушивания
3. Используйте функции дросселя и устранения дребезга для работы с частыми триггерами, но функции, которые не нужно выполнять часто, такие как прокрутка, сенсорное движение
Избегайте часто недействительных операций, избегая страниц картона
4. Используйте setTimeout вместо setInterval
Может возникнуть проблема со стеком инструкций в setInterval, из-за чего страница зависает.
5. Старайтесь избегать масштабных перестановок и перекрасок
Перекомпоновка и перерисовка страницы очень требовательны к производительности, особенно перекомпоновка
6. Картинки
1. Используйте инструменты для сжатия изображений
Сетевые условия мобильного терминала ограничены.Чем больше изображение, тем больше время загрузки.Используйте разумно инструменты для сжатия изображения, которые могут учитывать качество изображения и размер изображения.
2. Используйте файлы webp в формате с более высокой степенью сжатия.
Уменьшите размер передаваемого файла, чтобы избежать проблемы неправильного использования размера изображения, используйте большие изображения для маленьких значков.
3. Используйте спрайт
Уменьшите количество http-запросов, но когда наш http-протокол будет обновлен до 1.1 и 2.0, эффект Sprite Map, уменьшающий количество http-запросов, не очевиден.
4. Ленивая загрузка картинок
Не позволяйте пользователям загружать слишком много бесполезных ресурсов заранее и тратить пользовательский трафик
5. Загрузите изображения разных размеров в соответствии с разным соотношением пикселей экрана.
Загрузка изображения небольшого размера на экран с большим соотношением пикселей приведет к размытию изображения; загрузка изображения большого размера на экран с меньшим соотношением пикселей приведет к потере пользовательского трафика и трафика CDN.
6. Для изображений размером менее 2 КБ вы можете попробовать использовать формат base64 для их замены.
Преобразование изображений в формат base64 может уменьшить количество http-запросов, однако вы не можете использовать формат base64 для изображений большего размера, потому что алгоритм base64 увеличит размер файла на одну треть.
7. Шрифты
1. Уменьшите размер шрифта, избегайте загрузки слишком большого количества бесполезных ресурсов и порекомендуйте инструмент Word Spider.
Нам нужны только те файлы шрифтов, которые нужны странице, и нам не нужно тратить трафик на загрузку ресурсов, которые не нужны пользователям.
2. Оптимизируйте стратегию отображения шрифтов
Используйте свойство для отображения шрифта, чтобы избежать проблемы не отображения текста во время загрузки шрифта
3. Когда объем специального текста невелик, а содержание фиксировано, можно попробовать использовать вместо него картинки
Быстрый и совершенный интерфейс восстановления
8. Другие
1. Когда потребность в ресурсах всей страницы велика, вы можете использовать скелетный экран или увеличить эффект загрузки.
Улучшите взаимодействие с пользователем, ускорьте работу с первым экраном и предоставьте пользователям возможность заранее получать обратную связь с помощью осмысленного пользовательского интерфейса.
2. Тест производительности Lighthouse
Инструмент Google для оценки производительности веб-страниц, который может всесторонне оценить производительность веб-сайта.
3. Найдите долю неиспользуемого кода в разделе покрытия кода панели управления Chrome.
Помогите нам быстро найти неиспользуемый код в верхней части страницы
4. Используя Scope Hoisting в инструменте сборки
Взяв здесь в качестве примера webpack, файлы, упакованные после использования Scope Hoisting, имеют меньший размер файла, и при выполнении кода создается меньше областей действия функций, что повышает скорость запуска JS.
Ссылаться на
- web-performance-made-easy
- Объяснение модели железной дороги
- Оптимизация производительности Yahoo
- Правила Google PageSpeed Insights
- Примечания по оптимизации веб-производительности Google IO
- 14 Rules for Faster-Loading Web Sites
- Контрольный список оптимизации производительности внешнего интерфейса на 2018 г.
- Контрольный список оптимизации производительности внешнего интерфейса на 2017 г.
- Оптимизация сенсорной производительности Meituan
- Связано с оптимизацией производительности интерфейса
- Введение в PWA
- css оптимизация производительности
обо мне
Я занимаюсь переносом кода без эмоций. Каждую неделю я буду обновлять от 1 до 2 статей, связанных с интерфейсом. Если вам интересно, вы можете отсканировать приведенный ниже QR-код, чтобы подписаться или выполнить поиск непосредственно в WeChat.前端补习班Сфокусируйся на.
Трудно быть опытным во фронтенде, давайте делать уроки вместе!