Taro имеет 100% поддержку конверсииМини-программа JD, привлек внимание многих студентов. Среди них раздавались восторженные голоса: «Преобразование в апплет Jingdong одним щелчком мыши, и, наконец, вы сможете уйти с работы вовремя». Некоторые студенты, мало знающие о Таро, также задавали вопросы: «Каков результат преобразования?», «Соответствует ли производительность преобразованного кода стандарту?» и так далее.
В ответ на различные вопросы мы сокращаем с точки зрения опыта работы и развития и развития и сравнивали собственное развитие маленьких процедур Jingdong и Taro.
Сравнение производительности
Что касается проблем с производительностью, мы протестировали размер пакета пустого проекта Таро и производительность Таро в длинных списках соответственно. Поскольку размер пакета будет влиять на начальную скорость загрузки апплета, а длинный список — это сценарий, в котором часто возникают узкие места в производительности.
Таро пустой размер пакета проекта
В настоящее время каждый апплет имеет ограничение на размер основного пакета, например, апплет Jingdong ограничен 5M, а апплет WeChat — 2M. Это связано с тем, что скорость первоначального входа очень важна для удобства пользователя, и чем больше размер основного пакета, тем дольше время загрузки. Поэтому размер фреймворка апплета также стал одним из важных ориентиров при выборе фреймворка перед разработкой: если фреймворк слишком большой, доступное пространство для бизнес-логики будет сжато.
На следующих рисунках показаны размеры среды выполнения Taro до и после сжатия.Вы можете видеть, что сжатый размер составляет всего 84 КБ, что очень мало влияет на пространство основного пакета.
Перед сжатием:
После сжатия:
Производительность рендеринга длинного списка
Введение в тесты
мы ссылаемся наjs-framework-benchmarkЯ написал тест для сравнения производительности рендеринга кода Taro и нативного кода в сценариях с длинным списком.
Индикатор скорости
-
Инициализация: от начала страницы входа до завершения рендеринга 40 элементов.
-
Создать: 40 элементов создаются после загрузки страницы.
-
Дополнения: добавляйте по 20 элементов за раз в список из 40 элементов, созданных в прошлом.
-
Частичное обновление: обновите имя каждого 10-го элемента из 400 элементов.
-
Поменять местами: поменять местами два из 400 предметов.
-
Выбрано: щелкните изображение продукта, чтобы изменить цвет шрифта названия продукта.
момент времени
Taro:
Начало: начало функции ответа на событие.
конец:setStateВерхняя часть функции обратного вызова.
Родной апплет:
Начало: начало функции ответа на событие.
конец:setDataВерхняя часть функции обратного вызова.
разное
тестовый репозиторий:Github
Версия Таро: 1.3.21
Тестовая модель: примечание Meilan
Метод тестирования: тестируется 10 единиц данных в каждой группе, удаляются максимальные и минимальные значения и рассчитывается среднее значение.
Результаты теста
Поскольку время запуска обратного вызова setData немного отличается в апплете Jingdong и аплете WeChat, поэтомуперечислены отдельно.
| действовать | Taro jd | Нативная мини-программа JD |
|---|---|---|
| инициализация | 150 | 123 |
| Создайте | 87 | 85 |
| Частичное обновление | 125 | 235 |
| обмен | 140 | 213 |
| проверил | 131 | 155 |
| действовать | Taro weapp | Родной апплет WeChat |
|---|---|---|
| инициализация | 1155 | 1223 |
| Создайте | 500 | 408 |
| Частичное обновление | 167 | 307 |
| обмен | 252 | 309 |
| проверил | 193 | 178 |
После тестирования обнаружено, что длина списка будет влиять на время, затрачиваемое на добавление операций: чем длиннее список, тем дольше время на добавление операций. Следовательно, невозможно просто усреднить время увеличения N операций увеличения. Здесь мы решили использовать линейную диаграмму, чтобы показать тенденцию увеличения времени рендеринга по мере увеличения количества операций.
Заключение теста
Создайте
При создании Taro выполняет некоторую обработку данных, поэтому он будет немного медленнее, чем собственный.
инициализация
Разница между инициализацией и созданием заключается в том, что при этом требуется время на создание страницы. которыйДлительная инициализация = трудоемкая конструкция страницы + трудоемкая операция создания.
Taro будет обрабатывать данные во время инициализации и создания страницы, поэтому вся инициализация будет немного медленнее, чем нативная.
Так почему же инициализация Таро занимает меньше времени в апплете WeChat? В бенчмарке Таро и натив находятся соответственно вcomponentWillMountа такжеonLoadотображает список, а Таро используетComponentсоздавать страницы,componentWillMountпо фактуattachedВозникает в течение жизненного цикла. Потому что в апплете WeChatattachedСравниватьonLoadСрабатывает намного раньше, поэтому такое явление происходит.
проверил
Поскольку Taro просто оборачивает функцию обратного вызова слоем и обрабатывает параметры события, это и т. д., это эквивалентно собственной скорости.
Частично обновлено, заменено, добавлено
Таро будет быстрее родного. Причина в том, что Taro сначала сделает данные, которые будут setData, а текущие данные один раз.diff, что может значительно уменьшить объем данных в setData и ускорить отрисовку. Сравнивая две линейные диаграммы, мы видим, что чем больше объем данных, тем больше преимуществ оптимизации от diff.
Оптимизация производительности Taro для апплета
setData
В апплете проблема производительности в основном связана с большим объемом данных setData и частыми вызовами setData. Taro использует diff для решения проблемы слишком большого количества данных в одном setData, а также есть решение для частого вызова setData.
SetState Taro следует спецификации React, в отличие от синхронного обновления setData, он обновляет представление асинхронно. Таким образом, если разработчик вызывает setState несколько раз в одном цикле событий, setData будет выполняться только один раз в следующем цикле событий.
Предварительная загрузка прыжка
В процессе перехода со страницы A на страницу B апплет инициирует переход со страницы A на страницу B для срабатывания onLoad с задержкой 300–400 миллисекунд. Таро предоставляетcomponentWillPreloadХук, хук будет выполнен сразу после начала прыжка. Разработчики могут выполнить некоторую работу по извлечению данных в хуке как можно скорее, что может сэкономить 300–400 миллисекунд задержки по сравнению с извлечением данных после срабатывания onLoad.
shouldComponentUpdate & Taro.PureComponent
Компонент класса разработчика может наследоватьTaro.PureComponentТак что компонент будет делать неглубокое сравнение между старыми и новыми реквизитами и старым и новым состоянием перед обновлением, чтобы избежать ненужных обновлений. Конечно, разработчики могут реализовать свои собственныеshouldComponentUpdateПутем сравнения старых и новых реквизитов и ручного управления старым и новым состоянием решите, нужно ли обновлять компонент.
Taro.memo
Если разработчики пишут функциональные компоненты, они могут воспользоватьсяTaro.memoРеализуйте ту же функциональность shouldComponentUpdate .
Сравнение опыта разработки
грамматика
Собственный синтаксис мини-программ JD похож на мини-программы WeChat, обе из которых имеют синтаксис, подобный MVVM.Разработчики, которые не знакомились с мини-программами, несут определенную стоимость обучения. Кроме того, синтаксис стиля является подмножеством css, а единицей адаптивного размера является rpx, а это значит, что если нам нужен препроцессор css, нам нужно вручную настраивать рабочий процесс, и обращать внимание на преобразование единиц размера при написании стилей. .
В настоящее время Taro следует синтаксису React (в будущем будут поддерживаться все интерфейсные веб-фреймворки), JSX делает наш код более гибким. Поэтому разработчики с опытом разработки React могут сразу приступить к разработке Taro. Что касается стиля, Taro поддерживает выбор использования препроцессора css при создании проекта, и соответствующий рабочий процесс будет автоматически настроен после выбора. Для единицы стиля Taro также автоматически преобразует значение px, написанное пользователем, в соответствующее значение rpx, так что разработчикам больше не нужно отвлекаться на работу с единицами стиля каждой платформы.
Структура проекта
В нативной разработке страницы и компоненты состоят из 4 файлов (js, jxml, jxss, json), и управление кодом относительно проблематично.
Страницы и компоненты в Taro состоят из файла js и файла стиля, которые очень легко создавать и поддерживать.
экология развития
После непрерывной итерации апплет WeChat последовательно запустил систему подключаемых модулей и функцию, которая поддерживает ссылки на пакеты npm. Однако мини-программа JD пока не поддерживает первые два, а сообщество мини-программы JD еще не создано, а экологические ресурсы для разработки очень скудны.
Taro может не только свободно ссылаться на пакеты npm, но и поддерживать большое количество отличных инструментов и библиотек, накопленных в сообществе React, таких как react-redux, mobx-react и т. д.
Помощь в развитии
Нативная разработка апплета Jingdong не поддерживает Typescript и может иметь только функцию автодополнения в редакторе IDE.Эффективность кодирования не высока, а также подвержена ошибкам.
Taro отлично поддерживает Typescript и поставляется с интеллектуальными подсказками кода и функциями проверки кода в реальном времени, которые могут значительно повысить эффективность разработки.
напиши в конце
Увидев это, вы можете спросить, действительно ли исполнение Таро лучше нативного? На самом деле это не так, для каждого сценария мы можем использовать нативный код, чтобы написать лучшую производительность. Однако рабочая нагрузка слишком велика, и баланс между эффективностью и оптимизацией необходимо освоить при разработке реального проекта. Преимущество Taro в том, что он позволяет нам писать более эффективный код и иметь более богатую экосистему, а также обеспечивает хорошую производительность.
Наконец, вы можете использовать Taro для разработки приложений со всех сторон.Если у вас есть какие-либо вопросы по разработке или желание сотрудничать, пожалуйста, свяжитесь сtaro@jd.com, Мы ответим как можно скорее.
Ссылки по теме
Добро пожаловать в блог Bump Labs:aotu.io
Или обратите внимание на официальный аккаунт AOTULabs и время от времени публикуйте статьи: