[uni-app] методы и предложения по оптимизации проекта uniapp

внешний интерфейс uni-app
[uni-app] методы и предложения по оптимизации проекта uniapp

методы и предложения по оптимизации проекта uniapp

介绍: Оптимизация производительности была первоочередной задачей с древних времен.Методы оптимизации проекта uniapp являются наиболее полными и будут дополняться по ситуации разработки.

banner.jpg

1. Сложные области данных страницы инкапсулированы в компоненты

场景:

Например, проект содержит аналогичную страницу форума: щелкните значок «Нравится», и количество лайков должно сразу стать +1, что приведет к синхронизации всех данных на уровне страницы из слоя js в слой представления, в результате чего обновление данных всей страницы, что приводит к задержке кликов.

优化方案:

Для сложных страниц при обновлении данных в определенной области нужно сделать эту область компонентом, чтобы при обновлении данных обновлялся только этот компонент

Примечание: app-nvue и h5 не имеют этой проблемы; причина разницы в том, что апплет в настоящее время предоставляет только механизм обновления дельты компонентов и не может автоматически вычислять дельты всех страниц.

2. Избегайте больших изображений

场景:

Если на странице используется большое количество больших ресурсов изображений, переключение страниц будет зависать, что приведет к увеличению системной памяти или даже к сбою белого экрана; двоичные файлы большого объема base64 также очень ресурсоемки.

优化方案:

Пожалуйста, сжимайте изображения и используйте их, чтобы избежать больших изображений. При необходимости вы можете рассмотреть изображения спрайтов или svg. Если можно достичь простым кодом, не используйте изображения.

3. Слишком много субподрядных страниц для небольших программ и приложений.

Перейдите на официальное руководство веб-сайта, чтобы просмотреть конфигурацию.

4. Ленивые загрузки изображения

功能描述:

Эта функция действительна только для апплета WeChat, приложения, апплета Baidu и апплета ByteDance и включена по умолчанию.

Перейдите к руководству uView, чтобы просмотреть конфигурацию.

5. Не злоупотреблять локальным хранилищем

Не злоупотребляйте локальным хранилищем, передавайте URL-адреса параметров между частичными страницами, если вы используете локальное хранилище для передачи данных, вам нужно назвать спецификацию и уничтожить ее по требованию.

6. Переменные могут быть определены извне

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

7. Загрузите данные в партии для оптимизации рендеринга страницы

场景:

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

优化方案:

Визуализация страницы путем частичного обновления страницы, например: сервер возвращает 100 фрагментов данных, которые можно загружать пакетами, за один раз загружается 50 фрагментов данных, а следующая загрузка выполняется через 500 мс.

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

  1. Уменьшите прослушиватель событий прокрутки компонента прокрутки-представления.При прослушивании события прокрутки прокрутки-представления слой представления будет часто отправлять данные на уровень логики.

  2. При отслеживании события прокрутки компонента scroll-view не изменяйте свойства scroll-top/scroll-left в реальном времени, потому что при отслеживании прокрутки слой представления общается с логическим слоем, а при прокрутке-верх/прокрутка- слева изменяется, уровень логики снова обменивается данными с представлением Связь уровня, которая может привести к зависанию связи

  3. Обратите внимание на использование onPageScroll.Когда onPageScroll слушает, уровень представления будет часто отправлять данные на уровень логики.

  4. Используйте анимацию css вместо анимации через интерфейс таймера js

  5. Если вам нужно делать ручные операции в канве, рекомендуется использовать renderjs на стороне приложения, а компонент web-view на стороне апплета, страницы в web-view не имеют концепции разделения логического слоя и уровень просмотра, и, естественно, потери связи не будет.

9. Оптимизация CSS

Чтобы узнать, какие атрибуты унаследованы, как шрифты, цвет шрифта, размер текста унаследован, без бессмысленного дубликата кода

10. Эффективно используйте дросселирование и защиту от тряски

防抖:

Выполнить функцию после ожидания n секунд. Если она снова запускается в течение периода ожидания, время ожидания будет повторно инициализировано

节流:

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

11. Оптимизация анимации переключения страниц

场景:

Существует много изображений или встроенный компонент инициализации страницы, отображающий большие объемы данных и сообщений, будет происходить от нового рендеринга страницы и анимации до разграбления ресурсов, что приводит к переключению страниц. Катон, вне кадра

优化方案:

  1. Рекомендуется отложить рендеринг изображений или сложных нативных компонентов на 100–300 мс и выполнять пакетную передачу данных, чтобы уменьшить количество узлов для однократного рендеринга.

  2. Эффект анимации на стороне приложения можно настроить; анимационный эффект экструзии двойного окна с помощью popin/popout потребляет больше ресурсов. Если во время анимации на странице выполняется трудоемкий js, кадр анимации может быть удален; на этот раз вы можете использовать менее ресурсоемкие анимационные эффекты, такие как слайд-вправо / слайд-вправо

  3. App-nvue и H5 также поддерживают предварительную загрузку страниц,uni.preloadPage, что может улучшить взаимодействие с пользователем

12. Оптимизируйте цвет фона, чтобы он мигал белым.

场景:

При входе на новую страницу фон мигает белым.Если фон страницы темный, может случиться так, что на странице vue, когда новая форма начнет анимироваться, фон будет серо-белым, и он изменится на темный фон, когда анимация заканчивается, что приводит к заставке.

优化方案:

  1. Написание стилей в App.vue может ускорить отрисовку стилей страницы; стили в App.vue являются глобальными стилями, и каждый раз, когда открывается новая страница, стили в App.vue будут загружаться первыми, а затем будут загружены стили обычных страниц vue.

  2. На стороне приложения вы также можете настроить собственный цвет фона страницы отдельно в стиле pages.json, например, настроить глобальный цвет фона в globalStyle->style->app-plus->background

"style": { "app-plus": { "background":"#000000" } }
  1. Страница nvue не имеет этой проблемы, ее также можно изменить на страницу nvue

13. Оптимизируйте скорость запуска

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

  2. Отключение заставки на стороне приложения имеет механизм обнаружения белого экрана.Если домашняя страница всегда пуста или сама домашняя страница является пустой страницей передачи, это может привести к закрытию заставки через 10 секунд.

  3. Когда на стороне приложения используется компилятор версии 3, а домашней страницей является страница nvue, для нее устанавливается значениеРежим быстрой загрузки, в это время приложение запускается быстрее всего

  4. Приложение настроено как чистый проект nvue (рендерер: "native" в app-plus установлен в манифесте). Такой вид проекта запускается быстрее и может быть запущен за 2 секунды, потому что он использует собственный рендеринг для всего приложения, он не загружается на основе структуры веб-просмотра

14. Оптимизируйте размер пакета

  1. Когда Uni-App для отпускания апплета, если функция поворота ES6 ES5, функция выравнивания CSS, код может быть увеличен объем, вы можете быть настроен для компиляции этих функций включены

  2. На стороне H5 uni-app uni-app предоставляет механизм оптимизации tree-shaking.Общий размер пакета uni-app до оптимизации tree-shaking составляет около 500 КБ, а после развертывания сервера с помощью gzip — 162 КБ. Чтобы включить оптимизацию встряхивания дерева, вам необходимоконфигурация манифеста

  3. На стороне приложения uni-app базовый движок Android составляет около 9M, и приложение также предоставляет модули расширения, такие как карты, Bluetooth и т. д. Если эти модули не нужны во время упаковки, их можно вырезать, чтобы уменьшить дистрибутив, том находится в manifest.json-разрешения модуля приложения можно выбрать

  4. Поддержка на стороне приложения. Если вы выберете чистый проект nvue (установите средство рендеринга: «native» в разделе «app-plus» в манифесте), размер пакета может быть дополнительно уменьшен примерно на 2M.

  5. После HBuilderX 2.7 на стороне приложения режим компиляции, отличный от v3, был исключен на стороне приложения, а размер пакета уменьшился на 3M.

15. Запретить злоупотребление внешними js-плагинами

描述:

При наличии официального API не обращайтесь дополнительно к плагину js для увеличения размера проекта

例如:

Используйте encodeURIComponent() и decodeURIComponent() напрямую, чтобы передать URL-адрес шифрованию.

Категории