Практика Flutter Web на вынос Meituan

1. Предпосылки

1.1 Предыстория бизнеса

Бизнес Meituan по продаже еды на вынос вращается вокруг миллионов продавцов, предоставляя ряд функций, таких как выполнение транзакций, эксплуатация, реклама и маркетинг на ПК и в приложениях, и часто встречаются сцены аутсорсинга H5 (например, колледж на вынос, торговое сообщество, маркетинг и т. д.), деятельность и т. д.). В этом мультимодальном бизнес-сценарии вопрос о том, как обеспечить согласованность многостороннего опыта и как повысить эффективность многоэтапной итерации, всегда был в центре внимания производства и исследований бизнес-конца.

1.1.1 Обеспечьте согласованность работы с несколькими терминалами

Из-за разницы в конечных возможностях существует большая разница в производительности бизнеса в приложении и в Интернете.Например, приложение имеет собственный анимационный переход, но стоимость реализации в Интернете высока, поэтому эта часть часто понижается и отбрасывается Функция. Кроме того, даже если мы сможем использовать многотерминальные библиотеки компонентов пользовательского интерфейса, такие как Roo и MTDUI, внутри компании, чтобы сгладить различия пользовательского интерфейса на каждом конце, трудно достичь идеального и согласованного опыта из-за различных реализаций. библиотеки компонентов на каждом конце.

1.1.2 Повышение эффективности многотерминальной итерации

Из-за различных технических систем каждого конца требования, затрагивающие несколько концов, часто требуют, чтобы разные группы разработчиков и тестировщиков завершали разработку, совместную отладку, тестирование, онлайн и другие процессы, занимая огромные ресурсы Весь цикл доставки бизнеса растягивается. Хотя React Native, Flutter и другие кросс-платформенные решения решают некоторые проблемы повторного использования, этого явно недостаточно в бизнес-сценарии на стороне продавца.Наша цель — достичь полноплатформенного (Android, iOS, ПК, H5) повторного использования. ., чтобы максимизировать эффективность многоконечной итерации.

1.2 Техническая информация

1.2.1 Резервы Флаттера в магазинах Meituan на вынос

MTFlutter — это исследовательская экосистема Flutter на уровне компании, созданная Meituan Waimai. Схема ее архитектуры показана на следующем рисунке:

Как показано на рисунке, MTFlutter охватил весь замкнутый цикл исследований и разработок, отладки, тестирования, выпуска, онлайн-эксплуатации и обслуживания, а также инженерного управления.В то же время он внедрил динамические решения для поддержки многопланового развития бизнеса компании. В соответствии с тенденцией крупномасштабной интеграции интерфейса продавцы еды на вынос Meituan продолжают изучать лучшие решения для повторного использования нескольких терминалов.Благодаря построению экосистемы MTFlutter стек технологий Flutter в настоящее время охватывает более 90% бизнеса в приложении продавца. , и имеет возможности разработки Flutter, Способность студентов также достигла более 90%. Поэтому при наличии достаточного технического «запаса» мы можем исследовать повторное использование всей платформы (Android, iOS, ПК, H5) на основе Flutter.

1.2.2 Поддержка трепета

В 2018 году Google впервые выпустила бета-версию Flutter Web, стремясь еще больше реализовать концепцию одного кода и работы с несколькими терминалами. В настоящее время Flutter Web официально включен в Master.За этот период благодаря усилиям бесчисленного количества инженеров Flutter Web смог обеспечить более унифицированное взаимодействие и визуальный опыт с Flutter Natvie.

Как видно из приведенного выше рисунка, общая архитектура Flutter Web и Flutter Native аналогична.Оба используют слой Framework (зеленая часть), предоставляя анимацию, жесты, базовые классы виджетов и коллекции виджетов темы Material/Cupertino, необходимые для большинство приложений. Разница в том, что Flutter Web переписывает слой dart:ui (желтая часть) и использует DOM и Canvas для согласования возможностей рендеринга пользовательского интерфейса Flutter Native, чтобы пользовательский интерфейс, написанный Flutter, мог нормально отображаться в современных браузерах.

Кроме того, благодаряdart2jsС помощью этого хорошо зарекомендовавшего себя инструмента логику Dart можно легко преобразовать в JavaScript, а затем нормально запустить в Интернете.

2. Проблемы, с которыми пришлось столкнуться

Подводя итог, мы решили изучить кросс-энд (App\PC\H5) решение на основе Flutter Web, чтобы по-настоящему реализовать принцип «Напиши один раз и запускай где угодно». Конечно, проблемы также огромны, в основном они отражают тот факт, что Flutter и MTFlutter не имеют достаточной веб-поддержки на данном этапе.

2.1 Статус Flutter Web

Официальная текущая работа Google над Flutter Web в основном сосредоточена на выравнивании dart: ui (Web) и относительно мало связана с инженерией и производительностью, такими как:

• Продукт веб-сборки Flutter относительно прост, он просто выводит статические ресурсы, такие как main.dart.js (1.1M, не Gzip) и изображения, в нем отсутствуют работы по оптимизации, такие как распаковка JS, хэширование файлов и загрузка ресурсов CDN, что значительно влияет на производительность страницы. Производительность загрузки.
• Поскольку сам Flutter Web реализует набор механизмов прокрутки страницы, во время процесса прокрутки страницы часто вычисляется информация о положении, что приводит к воссозданию содержимого области прокрутки и, в конечном итоге, к низкой производительности прокрутки страницы.

2.2 Статус MTFlutter

Хотя MTFlutter провел большую настройку и оптимизацию на уровне Flutter Native, создание Flutter Web только началось, как показано на рисунке:

• Существующие базовые зависимости MTFlutter, такие как Request (инкапсуляция запроса), Router (маршрутизация), скрытая точка, контейнерный мост и внешний мониторинг, еще не поддерживают реализацию в Интернете.
• MTFlutter достиг полного пакета процесса публикации модуля Flutter, но не поддерживает веб-конструкцию и развертывание.

3. Общий дизайн

На приведенном выше рисунке показана схема архитектуры MTFlutter + Web.Из рисунка видно, что веб-страница Flutter должна соответствовать производственным требованиям, и предстоит еще много работы (показано в желтой части рисунка выше), в основном в том числе:

• Расширьте поддержку основных зависимостей (таких как Request, Router, скрытые точки и т. д.) на веб-стороне.
• Улучшение инженерного строительства, например: оптимизация статических ресурсов, автоматизация строительства и развертывания.
• Глубокая оптимизация производительности прокрутки и загрузки страниц позволяет Flutter Web соответствовать основным производственным требованиям.

4. Детальный дизайн

4.1 Построение базовой зависимости

Основные зависимости разработки приложений корпоративного уровня (такие как библиотека запросов, библиотека маршрутизации, библиотека скрытых точек и т. д.) необходимо перестроить с помощью Dart во Flutter.Временные затраты, совместимость, риск и т. д. — все это неконтролируемые факторы. MTFlutter — это плагин, разработанный на основе оригинальной базовой зависимости Native, поэтому он не поддерживает веб-сторону. В этой главе рассказывается, как плавно и ненавязчиво расширить реализацию основных зависимостей MTFlutter на веб-сторону.

4.1.1 Программирование подплатформы Flutter Package

Использование пакетов во Flutter создает модульный код, которым легко поделиться. Официальные лица настоятельно рекомендуют использовать форму Package для управления различными методами инструментов. В официальном определении Пакет включает следующие две категории:

1. Dart Package: Обычные пакеты, написанные на Dart, некоторые из которых могут содержать определенные функции, зависящие от платформы Flutter, и использование которых ограничено Flutter, например.path.
2. Plugin Package: специальный пакет Dart, реализованный несколькими платформами для написания API в Dart. Пакеты подключаемых модулей могут создавать пакеты подключаемых модулей для Android (с использованием Kotlin или Java), iOS (с использованием Swift или Objective-C), Интернета, macOS, Windows или Linux или любой их комбинации.

Ниже описано, как программировать по платформам в этих двух типах пакетов.

(1) Dart Package

Пакеты Dart написаны на чистом Dart, поэтому большую часть кода можно написать с помощьюdart2jsСкомпилируйте код, который может запускаться веб-платформой напрямую, но некоторые библиотеки, использующие собственные возможности (например,dart:io) нельзя перевести, поэтому необходим метод, совместимый с платформой.Ниже представлены два решения для подплатформенного программирования в пакете Dart.

Подплатформа уровня кода

Для уровня кода под-платформы мы можем использовать постоянный флаттер SDK, обеспечивает kisweb. Способ применения следующий:

Глядя на исходный код, можно увидеть, что причина, по которой kIsWeb можно использовать для оценки веб-платформы, заключается в том, что JavaScript не поддерживает целочисленные типы.В веб-среде Dart double и int поддерживаются одним и тем же типом объекта, а число с плавающей запятой «0.0» равно целому числу «0», что неверно для кода Dart, работающего на AOT или VM.

import 'package:flutter/foundation.dart';
if (kIsWeb) {
  print('Web 端')
} else {
  print('其他端');
}

Подплатформа на уровне файлов

Для подплатформ на уровне файлов мы используем условный импорт и экспорт, где конкретное использование условного экспорта выглядит следующим образом:

// tool.dart
export 'src/tool_native.dart' // 兜底导出，即没有命中条件时导出的文件
  if (dart.library.html) 'src/tool_web.dart'; // web 端导出的文件，该文件中可以使用 dart:html，也可以通过判断 dart.library.js 导出 Web 端文件。

// 引入 tool.dart
import 'package:tool/tool.dart';
void main() {
  print('import tool');
}

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

(2) Plugin Package

Пакет подключаемых модулей (далее именуемый «Подключаемый модуль») на платформах Android и iOS реализуется MethodChannel для передачи сообщений на уровне пользовательского интерфейса и на уровне платформы для обеспечения поддержки конкретной платформы.В официальной документации также представлены конкретные методы реализации на платформах Android и iOS во всех Круглый путь и примеры реализации веб-платформы менее представлены. Подводя итог, можно сказать, что разница между реализацией веб-платформы и нативной платформы в основном сосредоточена в следующих двух моментах.

Прежде всего, рекомендуемый способ веб-плагина - не реализовывать его на языке JS для конкретной платформы, а реализовывать его через библиотеку или пакет Dart.Для существующего готового JS SDK или необходимости использовать много JS для достижения функций. , чиновник предоставляетpackage:jsПакет вызывает Javascript для взаимодействия с Javascript.

Во-вторых, Web Plugin не пропускает сообщения, регистрируя MethodChannel, и Flutter может напрямую вызывать через официальную указанную форму (Federated Plugin) для написания класса веб-плагина Flutter.

На следующем рисунке полностью показана общая архитектура плагина:

4.1.2 Основная зависимость

В целом, основные зависимости MTFlutter разрабатываются и поддерживаются в виде плагинов. Чтобы обрабатывать общую логику в зависимостях и улучшить масштабируемость плагина, плагин MTFlutter добавляет общедоступный уровень обработки логики поверх архитектуры плагина Flutter (собственный уровень реализации каждой платформы и уровень интерфейса плагина), который, наконец, выставлен. пользователю в качестве интерфейса, предоставляемого уровнем API подключаемого модуля. Схема архитектуры плагина MTFlutter выглядит следующим образом:

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

(1) Платформа может быть выровнена в боковой веб-сцене, например, в библиотеке Buried.

Библиотека док-станции находится на родной стороне или веб-конце - это использование единой SDK компании, которая имеет естественную консистенцию в конструкции API, поэтому мы полностью способны соединять все интерфейсы в слое интерфейса плагина, а также верхний бизнес. Логика нужна только по требованию требует некоторой совместимой обработки. Общий дизайн идеи веб-конца библиотеки захороненной точки выглядит следующим образом:

1. Непосредственно импортируйте сценарий сценария в файл web/index.html бизнес-проекта и инициализируйте его (Примечание. Место, куда импортируется сценарий, должно располагаться перед main.dart.js).
2. с помощьюpackage:jsБиблиотека вызывает встроенный JS SDK, согласовывает API встроенной библиотеки Flutter и реализует веб-поддержку плагина Flutter.Подробная схема архитектуры показана на следующем рисунке:

(2) Каждая платформа реализует сценарии, которые не могут быть согласованы на стороне Интернета, например, библиотеки маршрутизации.

Библиотека маршрутизации MTFlutter — это новый набор систем маршрутизации, поддерживаемый Native в нижней части. Он предоставляет мощные функции настройки, полагаясь на встроенную поддержку. Однако на веб-стороне они не могут обеспечить 100% поддержку на собственном уровне реализации каждой платформы. Поскольку плагин MTFlutter, наконец, предоставляет API-интерфейс плагина, мы решили напрямую согласовать API-интерфейс плагина с поддержкой библиотеки маршрутизации на веб-стороне (с помощью Flutter Navigator и dart:html для завершения расширения на чистом языке Dart). архитектура показана на следующем рисунке:

(3) Веб-терминал из-за необходимости достижения большого количества функций, зависящих от JS-библиотек, таких как запрос библиотеки.

В обычной веб-запросе Unified Package с большим количеством бизнес-логики (например, отчеты об перехватчиках, исключениях и т. Д.), Если снова повторно реализовать дартс, стоимость высока. Я хотел бы использовать повторно использовать существующую основу пакета Axios (библиотека JS-запроса), эквивалентно запросу, чтобы сделать веб-платформу библиотеки, используя язык JS Plugin. Дарт и взаимодействовать через jspackage:jsДелайте интерфейсные вызовы, поэтому мы используем Dart для согласования соответствующего API на уровне общей логической обработки.Подробная схема архитектуры показана на следующем рисунке:

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

В обычных веб-проектах, чтобы обеспечить лучшую загрузку страниц и производительность рендеринга, нам нужно проделать большую работу по обработке статических файлов ресурсов, таких как: хеширование файлов ресурсов, CDNизация, обработка загрузки по запросу и т. д. Эти Его можно предварительно обработать с помощью таких инструментов сборки, как Webpack и Rollup. Но во Flutter Web эти операции предварительной обработки в настоящее время официально не поддерживаются, потому что есть только одна команда, которую нам предоставляет Flutter.flutter build web, так что мы не можем напрямую сделать более тонкую персонализацию. Если мы хотим, чтобы Flutter Web соответствовал стандартам приложений корпоративного уровня, нам нужно изучить принцип работы Flutter SDK на более глубоком уровне. Ниже мы перечисляем проблемы с производительностью, с которыми мы сталкиваемся в настоящее время, и способы их решения.

4.2.1 Текущие проблемы с производительностью

Официальные вопросы Google Оптимизация производительности Flutter Web все еще относительно невелика, есть большие проблемы с производительностью, выводимые компилятором страницы, в основном в следующих двух аспектах:

1. Время рендеринга первого экрана. Даже после использования FutureBuilder для разделения бизнес-кода на xxx.part.js объем main.dart.js остается на уровне 1,1 млн. Время загрузки и парсинга одного файла слишком велико, а отсутствие поддержки CDN для статических ресурсов неизбежно скажется на времени рендеринга первого экрана.
2. Плохая производительность прокрутки.Сам Flutter Web реализует набор механизмов прокрутки страницы, в процессе прокрутки страницы будет часто создаваться Canvas, что в конечном итоге приведет к проблемам с производительностью прокрутки и даже к сбоям страницы.

Вышеуказанные проблемы могут быть четко отражены через отображение ситуации мониторинга сети браузера на следующем рисунке:

Чтобы решить вышеуказанные проблемы с производительностью, мы исследовали процесс компиляции Flutter SDK и резюмировали общий процесс от бизнес-кода Flutter до веб-продуктов. Подробный процесс показан на следующем рисунке:

Из процесса мы видим, что Flutter поддерживает преобразование Dart -> JS только на веб-конце, а уровень пользовательского интерфейса выровнен, и мало что делается для разработки и оптимизации производительности.

Поэтому мы должны решить вышеуказанные проблемы с производительностью, чтобы обеспечить нормальную работу нашего бизнеса. Благодаря тщательному анализу и тщательному анализу процесса компиляции мы настраиваем Flutter SDK до того, как будет сгенерирован продукт AOT, и выполняемОптимизация производительности загрузкиа такжеОптимизация производительности памяти, содержание этих двух частей описано ниже.

4.2.2 Оптимизация производительности загрузки

бегатьflutter build webПосле команды мы получаем основные статические ресурсы: основной файл main.dart.js (1.1M), бизнес-код xxx.part.js каждой страницы (после использования FutureBuilder) и файлы изображений. Применение этих ресурсов непосредственно к проекту столкнется со следующими проблемами:

1. Функция не может быть обновлена ​​вовремя: Браузер кэширует одноименный файл, что может привести к несвоевременному обновлению программного кода или нарушению выполнения.
2. Плохая производительность рендеринга первого экрана: Main.dart.js Файл слишком большой, загрузка одной файла, анализа длительного времени, обязательно повлияет на время рендеринга складки.
3. Не могу использовать CDN: Flutter поддерживает только метод загрузки относительного пути и не может использовать доменные имена CDN, отличные от текущего доменного имени, что приводит к невозможности использования преимуществ, предоставляемых CDN.

С этой целью в части загрузки мы добавили следующие три оптимизации в Flutter SDK, чтобы соответствовать стандарту онлайн-операций.Этапы оптимизации показаны на следующем рисунке:

Хеширование файлов ресурсов

За исключением файла web/index.html, мы будем хешировать все ссылки на файлы. Чтобы внести изменения в build_system/web.dart, выполните следующие действия:

1. Просмотрите каталог продуктов и создайте ResourceMap.
2. Значения хешей рассчитываются для каждого файла.
3. Назовите новое имя файла-[хэш].xxx.
4. Измените ссылочное отношение нового имени файла в соответствующем файле.

Шардинг больших файлов

После компиляции Flutter Web будет сгенерирован основной файл main.dart.js объемом 1,1М (около 400К после Gzip), что сильно влияет на скорость загрузки страницы. С этой целью мы сегментируем код, что позволяет эффективно повысить скорость загрузки страниц с помощью параллельной загрузки браузером нескольких файлов.

Конкретные этапы реализации:main.dart.jsНа стороне Dart он разбивается на несколько простых текстовых файлов, а фронтенд загружается параллельно через XHR и последовательно встраивается в код Javascript и помещается в тег

Файл ресурсов Cdnization.

Из-за разницы в механизме ссылок на веб-ресурсы Flutter, даже если относительный путь к файлу заменяется абсолютным путем с именем домена CDN в процессе хеширования файла ресурсов, ресурс CDN не может быть загружен. В то же время локальный тест показал, что логика загрузки изображений и ресурсов Javascript неодинакова, поэтому соответствующую логику загрузки следует оптимизировать отдельно.

• Обработка изображения: после длительного чтения и разбора исходного кода мы обнаружили, что URL-адрес запроса изображения будет прочитан первым.metaна этикеткеassetBaseУровень вызова URL-адреса ценности для доступа к ресурсам в соответствии с словом URL. В настоящее время проектweb/index.htmlmetaтег, поэтому запрос будет выполнен по относительному пути. Решение состоит в том, чтобы увеличить в зависимости от среды запроса в процессе компиляции.metaмаркировать и ставитьcontentУстановите путь CDN.
• Обработка JavaScript: Чтобы решить проблему загрузки файлов ресурсов изображения, мы добавилиassetBaseизmetaтеги, но нашелxxx.part.jsФайл по-прежнему загружается с использованием текущего доменного имени, видно, что логика загрузки ресурсов Javascript и загрузки ресурсов изображения отличается. правильноmain.dart.jsАнализ исходного кода, мы нашли запросxxx.part.jsДоменное имя зависит от содержащегоmain.dart.jsсодержаниеScriptпомеченsrcАтрибуты. сквозьjs_helper.dartДля динамической компиляции мы положили чтениеsrcсвойство изменено для чтенияwindow.assetBaseЭта глобальная переменная (meta на этикеткеassetBaseзначение обрабатываемой переменной) для достиженияxxx.part.jsCDN загрузка файлов.

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

Когда на странице есть прокручиваемая область, при каждой прокрутке страницы создается большое количество Canvas. Используя инструмент анализа Canvas в Safari, мы обнаружили, что основная причина проблемы заключается в том, что во время прокрутки страницы Flutter часто создает Canvas в области прокрутки, а память каждого созданного Canvas варьируется от 10 до 70 МБ. , поэтому после прокрутки нескольких кадров использование памяти превысит порог браузера.

Во Flutter есть концепция ReusablePool для управления Canvas.В начальном процессе будет создано определенное количество Canvas, а та часть, которая не изменится в процессе взаимодействия со страницей, будет преимущественно использовать Canvas, кэшированный в пуле, для сохранения Память. Поскольку сам Flutter Web реализует набор механизмов прокрутки страницы, во время процесса прокрутки страницы часто вычисляется информация о положении, что приводит к воссозданию содержимого области прокрутки, поэтому Canvas создается каждый раз, когда он прокручивается.

Решение, которое мы разработали, состоит в том, чтобы изменить FlutterSDK и определить пороговое значение во время процесса прокрутки.Когда высота прокрутки находится в пределах порогового диапазона, мы кэшируем текущий холст. Это выборочное создание и уничтожение Canvas может эффективно снизить нагрузку на память, тем самым повышая производительность прокрутки страниц.

4.3 Сборка и развертывание

4.3.1 Настройка образа Docker

Поскольку шаги установки веб-среды MTFlutter относительно фиксированы, и весь процесс установки занимает много времени (> 80 с). Поэтому, настроив его как образ Docker и интегрировав его в Talos, этап компиляции Flutter Web может исключить процесс установки и эффективно повысить эффективность построения. Подробный процесс настройки и выпуска образа Docker см.официальная документацияЭта статья не описана позже. Файл DockerFile, используемый в пользовательском цвете трепетания веб-зеркала следующим образом:

FROM $BaseImage \# 继承基础镜像
RUN apt-get update
RUN apt-get install rubygems -y
RUN gem install flutter-cli
RUN flutter-cli install
ENV PATH="/$User/.flutter_sdk/bin:${PATH}"
ENV PUB\_HOSTED\_URL="https://xxx.com" \# 私有pub服务
ENV FLUTTER\_STORAGE\_BASE_URL="https://storage.flutter-io.cn"
RUN ~/.flutter_sdk/bin/flutter config --enable-web

4.3.2 Непрерывная доставка и развертывание

Чтобы обеспечить непрерывную доставку и развертывание, мы установили конвейер выпуска Flutter Web в Talos (внутреннее интерфейсное решение для непрерывной доставки Meituan):

Видно, что процесс установки веб-окружения MTFlutter был исключен из пайплайна.Важные узлы в существующем пайплайне описаны следующим образом:

• Flutter-Web-Build использует встроенный в Docker MTFlutter для веб-компиляции.
• Flutter-Web-Publish отвечает за загрузку скомпилированного продукта на сервер хранения ресурсов Meituan.

5. Отображение достижений

5.1 Отображение эффектов

Мы взяли на себя инициативу по внедрению Flutter Web в Meituan Food Delivery Merchant Academy (платформа, которая помогает продавцам изучать операции по доставке еды, развитие отрасли и стратегию платформы в виде статей, видео и т. сценарии доставки), а теперь возьмем страницу видеоконтента Business Academy в качестве примера, чтобы сравнить эффекты отображения Flutter Native и Flutter Web:

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

5.2 Скорость загрузки страниц

Как упоминалось выше, мы внедрили ряд методов оптимизации ресурсов для Flutter Web, которые значительно улучшили производительность загрузки страницы.Полное время загрузки страницы составляет примерно1300 мс (TP50)вплоть до580 мс (TP50), см. следующий рисунок для получения дополнительных данных об индексе производительности:

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

5.3 Производительность прокрутки

Для оптимизации прокрутки мы модифицировали Flutter SDK, чтобы Canvas не нужно было повторно создавать при прокрутке страницы, а кэшировать. Это значительно экономит накладные расходы памяти (использование страничной памяти после оптимизации стабильно около 100 МБ, что ничем не отличается от обычных веб-страниц) и в то же время в определенной степени повышает производительность прокрутки. Возьмем в качестве примера страницу содержания статьи Merchant College, сравним FPS при прокрутке до и после оптимизации:

Видно, что производительность прокрутки веб-страниц Flutter значительно улучшилась, чего достаточно для большинства бизнес-сценариев. Однако из-за частого вычисления информации о положении в процессе прокрутки веб-страниц Flutter определенные проблемы все же будут возникать в сложных бизнес-сценариях (например, большое количество анимаций на страницах). Поэтому дальнейшая оптимизация производительности прокрутки также будет в центре нашей будущей работы.

Основываясь на построении командой инженерных возможностей Flutter Web и хороших кроссплатформенных функциях Flutter, реализация требований к редакции Flutter Web в Meituan Takeaway Merchant College значительно повысила эффективность итерации, и, по оценкам, эффективность человека увеличилась более 40%. Формула расчета:

Среди них E представляет собой повышение эффективности человека, Ci относится к времени, затраченному на совместимость и адаптацию, а Np представляет количество перекрестных услуг.В настоящее время Meituan Takeaway Merchant Academy завершила мультиплексирование на обоих концах Native и H5 и последующие требования на стороне ПК. Во время согласования значение повышения эффективности будет увеличено, и ожидается, что эффективность работы человека увеличится более чем на 60%. В то же время мы будем продвигать и применять его в большем количестве предприятий, чтобы повысить итеративную эффективность всего бизнеса.

6. Резюме и перспективы

Подводя итог, можно сказать, что разнообразные бизнес-формы и достаточные технические «запасы» продавцов Meituan на вынос позволяют реализовать многотерминальное повторное использование на основе Flutter. Flutter Web также добился поэтапных результатов в бизнесе Meituan Takeaway Merchant Academy, реализовав согласованность опыта на стороне приложения и H5, заложив прочную основу для последующего продвижения большего количества бизнес-направлений для реализации интеграции App-Web.

Можно предвидеть, что повторное использование нескольких терминалов на основе Flutter Web должно эффективно сократить цикл реализации проекта. Однако, поскольку наша производительность загрузки страниц и производительность прокрутки все еще недостаточно совершенны для работы с более сложными бизнес-сценариями, у нас еще много работы:

• Оптимизация производительности прокрутки страницы:Из-за разницы в макете между Flutter и Интернетом, dart:ui (Web) также подвержен ограничениям макета Flutter Native.Как сломать такие ограничения, является ключом к решению проблемы производительности прокрутки.
• Оптимизация производительности загрузки страницы:Текущая производительность загрузки страниц все еще имеет много возможностей для оптимизации.Необходимо скомпилировать и оптимизировать Flutter (например, отделить main.dart.js по мере необходимости), чтобы уменьшить размер пакета ресурсов и эффективно повысить производительность загрузки страниц.
• Веб-инфраструктура Flutter: улучшите и оптимизируйте ссылки на разработку, отладку, компиляцию, создание и развертывание, чтобы новые и старые проекты могли быстро получить доступ к Flutter Web.
• Повторное использование Flutter Web на стороне ПК: Работайте с командой UED, чтобы сформулировать спецификацию адаптации для ПК и приложения, и в то же время, основываясь на мощных возможностях Dart2js и dart:ui (Web), реализуйте абстракцию логики, завершите адаптацию компонентов и модулей. и максимизировать эффективность;
• Следите за официальными тенденциями Flutter: Выпуск Flutter 2.0 стабилизирует поддержку Интернета, в то же время режим компиляции Canvaskit принят по умолчанию, что значительно повышает производительность прокрутки страниц. Однако, поскольку файл canvaskit.wasm слишком велик (2,5 МБ), что снижает скорость загрузки, по-прежнему не рекомендуется использовать Canvaskit непосредственно на веб-сайте. Тем не менее, официального обещания оптимизировать общую производительность в 2021 году все еще стоит ждать, и мы продолжим следить и общаться.

Мы продолжим исследовать и пробовать больше на основе Flutter Web. Если вас также интересует Flutter Web, вы можете оставить сообщение или дать предложения в области комментариев в конце статьи, большое спасибо.

Прочтите другие технические статьи от технической команды Meituan

внешний интерфейс | алгоритм | задняя часть | данные | Безопасность | Эксплуатация и обслуживание | iOS | Android | тестовое задание

|Ответьте на ключевые слова, такие как [акции 2020 г.], [акции 2019 г.], [акции 2018 г.], [акции 2017 г.] в диалоговом окне строки меню общедоступной учетной записи, и вы сможете просмотреть коллекцию технических статей технической группы Meituan в течение годы.

Уведомление об авторских правах

Эта статья подготовлена ​​технической группой миссии США, авторские права на которую принадлежат американской группе. Добро пожаловать, чтобы поделиться и обменяться в некоммерческих целях, перепечатать или использовать эту статью, пожалуйста, укажите «содержимое перепечатано технической группой миссии США». Эта статья без разрешения не может быть воспроизведена или использована в коммерческих целях. Любое коммерческое поведение, пожалуйста, отправьте электронное письмо по адресуtech@meituan.comПодать заявку на авторизацию.