Домашняя страница Jingxi (торговый портал WeChat) Практика кросс-энд разработки и оптимизации

Введение

Когда в этом году Double Eleven подошла к концу, компания Jingxi (ранее JD.com) также одержала свою первую победу. Накануне Double Eleven вход первого уровня WeChat shopping был переведен на апплет Jingxi.Проект успешно прошел проверку почти 100 млн трафика.Хочу поделиться с вами небольшой частью своей работы.

До того, как взяться за проект, бизнес Jingxi долгое время стабильно работал онлайн. Но после периода итеративного обслуживания мы обнаружили следующие проблемы на главной странице:

В версии домашней страницы H5 было разработано несколько наборов страниц для разных каналов, что является большой проблемой для разработчиков по поддержке и управлению контентом и требует больших трудозатрат;
Стек технологий проекта не унифицирован, включая традиционную разработку H5, разработку нативных апплетов и разработку фреймворка wqVue, что серьезно влияет на сложность проекта, а процесс итерации убога;
H5, апплет и RN имеют свои собственные процессы построения и выпуска, которые включают в себя множество инструментов и сложных системных процессов, влияющих на эффективность доставки бизнеса.

Таким образом, Цзинси открыл возможность пересмотра.

Пересмотренная цель

С точки зрения внешнего интерфейса эта редакция направлена на достижение следующих целей:

Обновите и унифицируйте стек технологий проекта, чтобы устранить текущую путаницу в стеке технологий проекта;
Используйте набор кодов для адаптации к шести бизнес-сценариям входа в WeChat, входа в мобильный QQ, апплета WeChat, приложения JD, приложения Jingxi и станции M, чтобы снизить стоимость обслуживания нескольких наборов страниц и повысить эффективность доставки;
Улучшить технические резервы команды на стороне приложения, позволив внедрить технологию РН в бизнес;
Оптимизировать производительность страницы и взаимодействие с ней, а также обеспечить высокое качество продукта для пользователей на падающем рынке;

Технический отбор

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

С точки зрения технического отбора мы выбираем команду собственной разработкиTaroМноготерминальное унифицированное решение для разработки.

Taro — это набор многоцелевых решений для разработки, соответствующих спецификациям синтаксиса React.

В настоящее время на рынке существуют различные формы терминалов.Очень популярны различные терминалы, такие как Web, React-Native и апплет WeChat.Когда бизнес-требования должны быть выражены на разных терминалах одновременно, несколько наборов кодов написано для разных терминалов. Стоимость, очевидно, очень высока. В настоящее время возможность адаптироваться к нескольким терминалам, написав только один набор кода, крайне необходима.

Используя Taro, мы можем написать только один набор кода, а затем использовать инструмент компиляции Taro для отдельной компиляции исходного кода, который можно использовать на разных терминалах (апплет WeChat/Baidu/Alipay/ByteDance/QQ, Quick App, H5, React - Собственный и т. д.) код для запуска.

Есть две причины для его выбора.Во-первых, Таро зрелый и имеет много практики как внутри, так и снаружи.Внутренне есть JD.com 7FRESH, JD.com Daojia и т. д., а внешне много таких случаев как испытание TaopiaoPiao и Maoyan. Вы можете уверенно инвестировать в развитие бизнеса. ; Во-вторых, все члены команды имеют опыт использования Taro для разработки внутренних библиотек компонентов, что гарантирует быстрое завершение бизнеса.

Рекорд развития

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

статьи H5

Все наши страницы основаны на таких компонентах, как глобальный общедоступный заголовок и хвост существующего бизнеса и панель поиска, что неизбежно требует интеграции процесса разработки Taro в существующий процесс разработки и выпуска. В то же время общедоступные компоненты проходят черезSSIметод вводится и поддерживается, чтобы иметь возможность запускатьnpm run dev:h5При предварительном просмотре полного эффекта страницы вам необходимоindex.htmlГрамматика SSI в шаблоне анализируется,index.htmlСтруктура кода файла шаблона примерно следующая:

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
  <title>京喜</title>
  <!--#include virtual="/sinclude/common/head_inc.shtml"-->
</head>
<body>
  <div id="m_common_header" style="display:none;"></div>
  <!--S 搜索框-->
  <div id="search_block" class="search_block"></div>
  <div id="smartboxBlock" style="display:none;"></div>
  <!--E 搜索框-->
  <div id="app" class="wx_wrap"></div>
  <!--#include virtual="/sinclude/common/foot.shtml"-->
</body>
</html>

Вы можете видеть, что в шаблоне много общего.Коды форматов — это общедоступные компоненты H5, представленные через SSI, и ихvirtualФайлы, на которые указывают свойства, не существуют локально, но существуют на сервере, поэтому первая проблема, с которой мы столкнулись, заключалась в том, чтобы проанализировать эти файлы локально, чтобы убедиться, что можно просмотреть полный эффект страницы, иначе разработка и отладка будут очень неэффективными. К счастью, Таро предоставил конфигурацию веб-пакета, мы можем ввести собственный загрузчик (здесь он называетсяssi-loader), чтобы разобрать путь этих кодов, а затем запросить содержимое файла на сервере и заменить его.Для достижения этой функции вам нужно толькоconfig/dev.jsДобавьте в него следующий код:

module.exports = {
  h5: {
    webpackChain(chain, webpack) {
      chain.merge({
        module: {
          rule: {
            ssiLoader: {
              test: /\.html/,
              use: [
                {
                  loader: 'html-loader'
                },
                {
                  loader: 'ssi-loader',
                  options: {
                    locations: {
                      include: 'https://wqs.jd.com'
                    }
                  }
                }
              ]
            }
          }
        }
      })
    }
  }
}

Это решает проблему локальной разработки и отладки, а затем успешно разрабатывает страницы.

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

В этом сложном процессе еще много проблем, он немного громоздкий для новых студентов, и есть много возможностей для улучшения, это также является фокусом следующего направления работы. Кроме того, терминал Taro H5 ранее был основан на режиме SPA, который не очень удобен для проектов с требованиями к многостраничной разработке.В то время об этом было сообщено студентам в команде Taro, которые отвечали за H5, и они быстро получили ответ.В настоящее время Таро поддерживает многостраничный режим разработки H5., поддержка очень быстро.

Небольшая программа

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

Вот как использовать Taro для разработки в собственном проекте апплета.Поскольку наш проект Taro и существующий проект собственного апплета являются двумя независимыми проектами, нам нужно скомпилировать код апплета проекта Taro в существующий.В рамках проекта собственного апплета каталоге, первым шагом является настройка конфигурации Тароconfig/index.js, укажите выходной каталог компиляции и отключите вывод файла приложения, чтобы предотвратить перезапись существующих файлов.

const config = {
  // 自定义输出根目录
  outputRoot: process.argv[3] === 'weapp' ? '../.temp' : 'dist',
  // 不输出 app.js 和 app.json 文件
  weapp: {
    appOutput: false
  }
}

Поскольку Jingxi раньше был столбцом основного апплета покупок, позже он стал независимым апплетом, но основной процесс покупок по-прежнему был основным апплетом покупок, который использовался повторно, что усложняло ситуацию. здесь или черезgulpДля выполнения утомительной обработки файлов каталога, таких как страницы и компоненты наших апплетов, необходимо наследовать основные апплеты для покупок.JDPageиJDComponentБазовый класс, поэтому нужно заменить код перед копированием файла.Код выглядит следующим образом:

// WEAPP
const basePath = `../.temp`
const destPaths = [`${basePath}/pages/index/`, `${basePath}/pages/components/`]
const destFiles = destPaths.map(item => `${item}**/*.js`)

/*
 * 基类替换
 */
function replaceBaseComponent (files) {
  return (
    gulp
      .src(files || destFiles, { base: basePath })
      .pipe(
        replace(
          /\b(Page|Component)(\(require\(['"](.*? "'"")\/npm\/)(.*)(createComponent.*)/,
          function(match, p1, p2, p3, p4, p5) {
            const type =
              (p5 || '').indexOf('true') != -1 ||
              (p5 || '').indexOf('!0') != -1
                ? 'Page'
                : 'Component'
            if (type == 'Page') p5 = p5.replace('))', '), true)') // 新：page.js基类要多传一个参数
            const reservedParts = p2 + p4 + p5
            // const type = p1
            // const reservedParts = p2
            const rootPath = p3

            const clsName = type == 'Page' ? 'JDPage' : 'JDComponent'
            const baseFile = type == 'Page' ? 'page.taro.js' : 'component.js'

            console.log(
              `🌝 Replace with \`${clsName}\` successfully: ${this.file.path.replace(
                /.*?wxapp\//,
                'wxapp/'
              )}`
            )
            return `new (require("${rootPath}/bases/${baseFile}").${clsName})${reservedParts}`
          }
        )
      )
      .pipe(gulp.dest(basePath))
  )
}

// 基类替换
gulp.task('replace-base-component', () => replaceBaseComponent())

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

статьи РН

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

Поскольку Jingxi APP является базовой структурой и механизмом JDReact, который повторно использует промежуточную платформу технологии Jingdong, вся разработка и развертывание следуют существующему процессу JDReact, и общая блок-схема выглядит следующим образом:

Платформа JDReact основана на фреймворке Facebook ReactNative с открытым исходным кодом и подверглась глубокой вторичной разработке и функциональному расширению. Он не только открывает трехтерминальную платформу Android/iOS/Web, но также инкапсулирует основные бизнес-возможности мобильного терминала JD на уровне SDK, предоставляя унифицированный и простой в разработке API. Бизнес-разработчики могут использовать платформу JDReact SDK для быстрого развития бизнеса JD и могут быть легко интегрированы в клиент (Android/iOS) или преобразованы в веб-страницу для онлайн-развертывания, не полагаясь на версию выпуска, действительно реализуя одноразовую разработку и быстрое развертывание три конца.

Поскольку все модули JDReact приложения Jingxi являются независимыми складами git, нам необходимо настроить конфигурацию нашего проекта Taro.config/index.jsВыходной путь компиляции выглядит следующим образом:

rn: {
  outPath: '../jdreact-jsbundle-jdreactpingouindex'
}

Таким образом, когда мы бежимyarn run dev:rnВо время локальной разработки файлы автоматически компилируются в проект JDReact, после чего мы можем использовать симулятор или реальную машину для предварительного просмотра и отладки. Когда мы занимаемся локальной разработкой и отладкой, наиболее эффективным способом является использование официальной версии, предоставленной Taro.taro-native-shellДля запуска нашего проекта используется собственная оболочка React Native, а подробную конфигурацию можно настроить, обратившись к README проекта.

Поскольку React Native официально предоставляетRemote DebuggerФункция очень слабая, рекомендуется использоватьReact Native DebuggerДля выполнения локальной отладки RN он предоставляет более богатые функции, которые в основном близки к возможностям отладки H5 и небольших программ.

Таким образом, у нас есть нормальная среда разработки и отладки, а затем мы можем проводить эффективную разработку.Поскольку мы завершили большую часть разработки бизнес-логики на этапах версии H5 и апплета, основная работа для версии RN — это фокус на адаптация стиля и взаимодействия различных моделей iOS и Android.

Что касается адаптации стиля, я должен упомянуть, что Taro предлагает несколько лучших практик для наших распространенных сценариев, которые можно использовать в качестве эталонов макета:

Фиксированный размер (кнопка, размер текста, интервал): пишем PX/Px/pX
Сохраняйте соотношение сторон (как изображение баннера):Imageобработка компонентов
Фиксированный интервал, адаптивный контент (например, ширина карточки товара): используйтеflexмакет
Масштаб пропорционален экрану: используйте единицы пикселей, обрабатываемые во время компиляции (scalePx2dpдинамический расчет)

Сборник лучших практик Taro RN

В реальном процессе разработки мы также столкнулись со многими проблемами совместимости, которые приведены здесь для справки:

текст для использования<Text>Этикетки завернуты, потому что RN неtextNodeКонцепция чего-либо;
При использовании Swiper оберните представление снаружи, в противном случае установитеmarginПосле этого это приведет к ненормальной высоте под Android;
Cannot read property 'x' of undefined, проблема, вызванная использованием react-native-swiper в нижней части Swiper, Disable Remote JS Debug не появится.
Размер изображения по умолчанию неверен, RN не поможет автоматически установить размер изображения, а оставит его на усмотрение разработчика, который преднамеренно разработан таким образом;
onClick не может быть установлен для компонентов изображения
Чтобы добиться выравнивания базовой линии:vertical-align: baseline,использовать<Text>Просто оберните компоненты, которым требуется базовое выравнивание.
```
<Text>
  <Text style={{ fontSize: 20 }}>abc</Text>
  <Text style={{ fontSize: 40 }}>123</Text>
</Text>
```
старайтесь избегать использованияline-height, ведет себя непоследовательно на Android и iOS, и даже если установлено значениеfontSizeТо же самое приведет к отсечению;
android debug бандл продакшн среды, встряхните телефон, выберите Dev Setting, и снимите галочку с первого пункта Dev;

производственные пакеты отладки iOS,AppDelegate.mДобавьте строку, чтобы закрыть dev:

  [[RCTBundleURLProvider sharedSettings] setEnableDev:false];
  // 找到这行，并在它的上面增加上面这行
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

<Text>и<View>Поддерживаемые атрибуты стиля не совпадают.

> [Text Style Props](https://facebook.github.io/react-native/docs/text-style-props "Text Style Props") & [View Style Props](https://facebook.github.io/

react-native/docs/view-style-props)

Не возвращайте пустую строку в методе рендеринга

Следующий код сообщит об ошибке в Android (содержимое empty_string — пустая строка)
```
<View>
  {empty_string && <Text></Text>}
</View>
```
так какempty_string && <Text></Text>Возвращаемое значение представляет собой пустую строку, и RN сообщит об ошибке в среде Android при попытке добавить строку в дочерние элементы представления:
```
Error: Cannot add a child that doesn't have a YogaNode
```
border-radiusНеправильный цвет фона. Если угол задан только с закругленными углами, на краю без закругленных углов будет полупрозрачный цветной блок того же цвета, что и цвет фона.
1. Добавьте внешний контейнер, чтобы установить закругленные углы и скрытое за его пределами
2. Установите все углы, чтобы быть закругленными, а затем используйтеtransform:tanslate()Скрыть нежелательные закругленные углы
Для решения проблемы, связанной с невозможностью щелчка по прозрачному представлению, добавьте к элементу прозрачный цвет фона с помощью onClick:

style={{ backgroundColor: "transparent" }}

Его нельзя написать в scss, допустимы только написанные на JSX.Taro может игнорировать прозрачный цвет фона при компиляции.

проблема с пропуском одного пикселя

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

Кроссплатформенная разработка

js-файл

1. Как разделить файл

Чтобы «идеально» скомпилировать трехтерминальный код, первое, что нужно решить, — это адаптация общедоступной библиотеки классов.К счастью, бизнес-команда Brother накопила полную трехтерминальную общедоступную библиотеку классов, Платформа разработки предоставлена Таро.Возможность сглаживания трехтерминальных имен методов и параметров не является единообразной, вы вполне можете решить проблему адаптации общедоступной библиотеки классов, как показано ниже:

.
├── goto.h5.js
├── goto.rn.js
├── goto.weapp.js
├── request.h5.js
├── request.rn.js
├── request.weapp.js
└── ...

отrequestВозьмем в качестве примера публичный компонент, трехтерминальный код выглядит следующим образом:

request.h5.js

import request from '@legos/request'
export { request }

request.rn.js

import request from '@wqvue/jdreact-request'
export { request }

request.weapp.js (поскольку общедоступные компоненты апплета не публикуются в npm, здесь указан локальный исходный файл проекта)

import { request } from '../../../common/request/request.js'
export { request }

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

goto.rn.js

import jump from '@wqvue/jdreact-jump'

function goto(url, params = {}, options = {}) {
  jump(url, options.des || 'm', options.source || 'JDPingou', params)
}

export default goto

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

import goto from './goto.js'

2. Способ условной компиляции

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

if (process.env.TARO_ENV === 'h5') {
  this.speedReport(8) // [测速上报] 首屏渲染完成
} else if (process.env.TARO_ENV === 'weapp') {
  speed.mark(6).report() // [测速上报] 首屏渲染完成
} else if (process.env.TARO_ENV === 'rn') {
  speed.mark(7).report() // [测速上报] 首屏渲染完成
}

CSS-файл

Вышеупомянутый метод обработки кода js, и есть аналогичные методы обработки для файлов и кодов css.

1. Как разделить файл

Например, стили RN сильно отличаются от стилей H5 и Mini Programs.Стили, поддерживаемые RN, являются подмножеством CSS, поэтому многие стили, которые кажутся очень распространенными, не поддерживаются и могут различаться следующими способами. :

├── index.base.scss
├── index.rn.scss
├── index.scss

здесь сindex.base.scssКак общедоступный стиль, совместимый со всеми тремя терминалами (имя может быть любым, не обязательно xxx.base.scss),index.rn.scssЭто уникальный стиль на стороне RN,index.scssЭто уникальный стиль H5 и апплета, потому что в принципе нет разницы между H5 и стилем апплета, и здесь он обрабатывается как один файл.

2. Способ условной компиляции

Taro также поддерживает условную компиляцию в файлах стилей, синтаксис выглядит следующим образом:

/* #ifdef %PLATFORM% */
// 指定平台保留
/* #endif */

/* #ifndef %PLATFORM% */
// 指定平台剔除
/* #endif */

%PLATFORM%Обратите внимание на значениеВстроенные переменные окружения Taro

Вот пример кода:

.selector {
  color: #fff;
  /* #ifndef RN */
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
  /* #endif */
}

Стиль, скомпилированный в H5 и апплет:

.selector {
  color: #fff;
  box-shadow: 1px 1px 1px rgba(0, 0, 0, .1);
}

Стиль РН это:

.selector {
  color: #fff;
}

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

Немного прискорбно, что менеджер по продукту имеет явный онлайн-приоритет для этой новой версии домашней страницы: сначала версия H5, затем версия апплета WeChat и, наконец, версия RN, которая похоронена для последующей версии RN, чтобы разойтись. с H5 и версиями апплета Предварительно, если позволяют условия, рекомендуется использовать версию RN в качестве эталона для разработки, чтобы избежать серьезных корректировок структуры и стиля после разработки H5 и апплета, потому что RN действительно слабее к стилю.

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

Оптимизация изображения

На веб-сайте электронной коммерции будет большое количество материалов или изображений продуктов, которые часто оказывают большое влияние на производительность страницы. Благодаря сервису Jingdong Image Bed он предоставляет мощные функции настройки изображений, что избавляет нас от большого количества работы по оптимизации изображений. представить изображения продукта"https://img10.360buyimg.com/mobilecms/s355x355_jfs/t1/55430/24/116/143859/5cd27c99E71cc323f/0e8da8810fb49796.jpg!q70.dpg.webp"В качестве примера мы частично оптимизировали приложение изображения:

Надлежащим образом обрежьте размер изображения в соответствии с размером контейнера: s355x355_jfs.
Установите параметры качества изображения в соответствии с сетевым окружением: 0e8da8810fb49796.jpg!q70
Выберите тип изображения разумно в соответствии со средой браузера: 0e8da8810fb49796.jpg!q70.dpg.webp

Установите атрибут lazyload для тега Image, чтобы вы могли получить функцию отложенной загрузки в H5 и апплете.

Агрегация интерфейсов напрямую

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

Стратегия приоритета кэша

Поскольку бизнес Jingxi в основном сосредоточен на рынке стоков, сетевая среда его групп пользователей будет более сложной.Чтобы обеспечить производительность страницы, важной мерой является сокращение сетевых задержек.

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

Длинный список высокопроизводительных водопадов

Рядом с первой областью экрана на главной странице находится длинный список каскадов, поддерживающих загрузку со слайдом вниз.Каждый раз, когда вы перемещаетесь вниз, асинхронно извлекается 20 фрагментов данных, и в общей сложности будет загружено около 500 фрагментов данных. Это обычный интерактивный процесс под iOS. Однако на модели Android с более низкой конфигурацией после перехода на 2 или 3 экрана он начинает испытывать серьезные лаги и даже вылеты.

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

Поскольку получение таких данных, как смещение координат элемента в RN, более проблематично, чем H5 и апплет, конкретные детали реализации можно найти в извлеченной простой реализации.Высокопроизводительные компоненты водопада Taro (для RN).

напиши в конце

В этой статье кратко излагается пересмотр домашней страницы Jingxi по трем параметрам: технический выбор, отчет о разработке и оптимизация производительности. Практика всего проекта доказывает, что фреймворк разработки Taro полностью подходит для масштабных коммерческих проектов. Несмотря на то, что на многостороннюю разработку и адаптацию ушло некоторое время, нагрузка на независимую разработку и обслуживание по-прежнему меньше, чем на каждую сторону.В сегодняшней нехватке внешних ресурсов выбор зрелых инструментов разработки для контроля затрат и повышения эффективности является главный приоритет каждой команды рабочие цели. В то же время, как стратегический бизнес JD.com, Jingxi имеет десятки миллионов порталов трафика. Наша оптимизация опыта и улучшение производительности страницы выходят далеко за рамки этого. Мы надеемся, что каждое небольшое изменение может вызвать у пользователей приятные ощущения. и всегда предоставлять пользователям приятные впечатления Обеспечьте качественный опыт работы с продуктом.

Добро пожаловать в блог Bump Labs:aotu.io

Или обратите внимание на официальный аккаунт AOTULabs и время от времени публикуйте статьи: