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

Такое слово уже должно быть обиходным, не только интервьюер сломает вам голову на собеседовании, но и руководительскорость загрузки веб-страницыМедленно бить вас учиться (играть) учиться (работать), затем оптимизация производительности фронтенда, если вы судите, нужно ли вам это делать, нужно ли это делать, как это сделать или как найти точку входа для оптимизации ?

Давайте исследовать вместеОптимизация производительности интерфейса(emo~

Как определить, нуждается ли веб-сайт в оптимизации производительности?

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

Ниже приводится использование Chrome с подключаемыми инструментами для анализа.

Вы можете использовать инструмент chrome приходит lightHouse для анализа. Полученные баллы будут включать три оценки. Затем он оптимизируется для различных выдвинутых предложений.

Например: откройте страницу Nuggets, затем щелкните плагин Lighthouse в инструментах разработчика.

Мы видим несколько показателей:

• Первая Contentful Paint над временем загрузки сгиба (FCP)
• Время до взаимодействия Время до взаимодействия (TTI)衡量一个页面多长时间才能完全交互
• Индекс скорости Скорость, с которой контент визуально заполняется (SI)分数越低越好
• Общее время блокировки Общее время блокировки (TBT)主线程运行超过50ms的任务叫做Long Task，Total Blocking Time (TBT) 是 Long Tasks（所有超过 50ms 的任务）阻塞主线程并影响页面可用性的时间量，比如异步任务过长就会导致阻塞主线程渲染，这时就需要处理这部分任务
• Наибольшее время отрисовки содержимого для загрузки самого большого визуального элемента (LCP)对于SEO来说最重要的指标,用户如果打开页面很久都不能看清楚完整页面，那么SEO就会很低。（对于Google来说）
• Совокупное смещение макета Совокупное смещение макета (CLS)衡量页面点击某些内容位置发生偏移后对页面对影响 eg:当图片宽高不确定时会时该指标更高，还比如异步或者dom动态加载到现有内容上的情况也会造成CLS升高

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

Изображение ниже представляет собой график анализа моего собственного проекта.

• например, размер пакета (оптимизация веб-пакетов, плагины для дерева и загрузки по требованию, а также слияние css)
• Оптимизация размера загрузки изображений (используйте сжимаемые изображения с отложенной загрузкой и предварительной загрузкой)
• Двоичные заголовки и мультиплексирование доступны после замены http1.0 на http2.0. (Некоторые изображения используют http1.0 при использовании запроса cdn)
• Изображение не имеет ширины и высоты (или ограничений родительского контейнера), что может легко вызвать путаницу в макете страницы, когда страница перерисовывается и перекомпоновывается.
• Избегайте огромных сетевых нагрузок, таких как одновременные запросы изображений, и уменьшите количество одновременных запросов.
• Кэширование статических ресурсов
• Уменьшите неиспользуемый JavaScript и отложите загрузку скриптов (отложите и асинхронно)

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

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

Vue-cli провел оптимизацию:

• Использовать cache-loader по умолчанию компилятор Vue/Babel/TypeScript открыт, файлы кэшируются в node_modules/.cache в
• Картинки менее 4k будут преобразованы в Base64, сохраненные в файле JS
• Рабочая среда извлечет CSS в отдельный файл.
• Извлечь общедоступный код
• сжатие кода
• Добавить предварительную загрузку ко всем файлам js и css

Оптимизации, которые нам нужно сделать :(下面做出的优化都是根据分析工具得出后，对应自己的项目进行细化而来)

1. Первый уровень кода:

   1. Страницы с несколькими изображениями необходимо сделать изображение Lazy Loading + Preloading + CDN запрос и сжатие.后期会推出一篇关于图片优化的文章...
   2. Компоненты загружаются по запросу
   3. Для операций DOM, которые неизбежны, старайтесь выполнять как можно больше одноразовых операций. Избегайте перерисовки и перекомпоновки страницы, вызванных несколькими операциями на dom
   4. Извлечение общих компонентов
   5. Количество ajax-запросов можно максимально сократить, если ajax-запрос медленный, его необходимо запросить. затем рассмотрите возможность использованияWeb Worker

2. Упакуйте проект.

   1. Используйте плагин webpack, например.tree-sharkingОбратное зависит от отказа. Используйте Terser для сжатия кода, дайте Loader plus Loader на время выполненияcache-loader, который можно использовать в следующем пакетеnode_modules/.cacheвнутренний
   2. Статические ресурсы загружаются с использованием кеша или cdn, а некоторые динамические файлы устанавливают срок действия кеша.