Конференция раннего чата по интерфейсу, новая отправная точка для развития интерфейса, была проведена совместно с Nuggets. Добавьте WeChat codingdreamer в эксклюзивную внутреннюю группу поддержки конференции и выиграйте на новой стартовой линии.
14-я сессия Front-end Growth and Promotion, 8-29 будет в прямом эфире, 9 лекторов (Ant Financial Services / Tax Friends и т. д.),Нажмите на меня, чтобы сесть в машину 👉 (Адрес регистрации):
Текст выглядит следующим образом
В этой статье рассказывается о пятом занятии - специальный лектор по построению системы внешнего мониторинга - Кайвэй:
Вступительное слово
Меня зовут Вэй Кайвэй, главный инженер отдела клиентских технологий Alibaba CBU. Сегодня я поговорю с вами о моей прекрасной соседке по столу мисс Батиан.Мониторинг метрик внешнего компонента иМониторинг показателей сценарияТема , прежде всего, позвольте мне открыть первую часть——Как комбинировать компоненты для разработки стратегии внешнего мониторинга.
представление о себе
С 2016 по июнь 2018 года работал в направлении визуализации данных в Gome Big Data Research Institute.
В июле 2018 года он присоединился к отделу CBU Alibaba, в основном отвечая за строительство инженерной системы и строительство цифровой фабрики. В 2019 году он отвечал за область маркетинговой деятельности, отвечал за управление компонентами и создание страниц различных маркетинговых площадок в 1688 году. После 6 крупных рекламных акций он работал менеджером по продвижению и 4 раза работал менеджером по продвижению A++ в день суперпроизводства. .
бизнес фон
Ежегодно компания 1688 проводит несколько рекламных акций уровня S, несколько рекламных акций уровня A++ и различные маркетинговые мероприятия.В 2020 финансовом году было запущено более 40 тематических мероприятий (практически каждый день), и в ходе операции было создано более 1,7 10 000 страниц мероприятий. .
Базовой единицей страницы является компонент, а количество компонентов определяет стоимость разработки. Статистика финансового года включает более 10 000 компонентов. Некоторые из них когда-то были очень популярны и приносили бизнесу хорошие конверсионные эффекты, о некоторых вскоре забыли, а некоторые даже были быстро отключены после запуска. От "пожара" к "проходу" - это проблема собственной грамотности, или проблема упаковки "брокерской компании"? Скажите, какой вклад вы вносите в своих «поклонников».
ежедневное накопление
Хорошая операционная стратегия может не сразу оправдать ожидания, но все же требует определенного количества экспериментов для постоянной оптимизации и, наконец, достижения максимального соответствия людей, товаров и полей.
Воображение — это начало творчества, много экспериментов + много настроек + много развития = много пулов ресурсов. Медленно это превращается во множество отложений, дублирования и расточительства. При наличии хорошей стратегии необходимо разрабатывать новые компоненты. Когда место встречи не достигает ожидаемых результатов, бизнес-сторона попытается изменить размер, настроить атмосферу и выявить несколько точек интереса.Бизнес-сторона называет это «корректировкой», а мы разрабатываем и пишем «развитие». Когда влияние места проведения относительно стабильно, деловая сторона может попробовать разные способы игры, что может преподнести сюрпризы. Конечно, это приводит нас к развитию. Иногда по вдохновению беру скорую пробу воды, конечно, для развития.
На приведенном выше рисунке объясняется происхождение 10 000 компонентов, с одной стороны, и упоминается решение, стоящее за рождением компонента, с другой стороны.Анализ производительности данных.
В общем, мы заботимся о всей площадкепотокиконвертировать.
Все самые непосредственные точки действия для входа и назначения трафика сосредоточены на компоненте.PV текущей страницы — это фактически количество кликов по компоненту на предыдущей странице, а коэффициент конверсии страницы — это коэффициент конверсии кликов компонент. Хороший компонент не только имеет привлекательный пользовательский интерфейс, очень важен привлекательный контент, расположение на этаже, экспозиция и собственная стабильность. Каждый компонент является результатом упаковки мысленной стратегии, совершенствования мышления о продукте и превосходной технологии, вдохновения + мудрости + пота.За исключением одноразовых потребительских товаров, простые компоненты также могут полироваться и полироваться. Компоненты, которые постоянно работают хорошо, должны стать образцом для подражания и максимизировать свою ценность. С этой целью команда по маркетингу и инжинирингу запустила программу Component 360 одновременно с созданием платформы.
Компонент 360 Определение
Компоненты 360Принять на себя ответственность «брокера», ответственного за управление «населением» компонентов, обогащение меток компонентов, открытие дополнительных запросов сценариев приложений компонентов, агрегирование экспозиции компонентов в бизнес-группе, эффекты конверсии кликов, качество собственного кода, рендеринг производительность, производительность загрузки данных, количество сбоев, перед лицом выбора компонентов, можно интуитивно анализировать и сравнивать индекс рейтинга аналогичных компонентов, а также использовать данные на основе лучших. С изменениями в бизнес-эффектах данные о производительности возвращаются со сцены к самим компонентам, и наиболее приспособленные постоянно исключаются.Отличные компоненты, плавающие на верхнем уровне, имеют большую ценность для обслуживания, а скрытая переработка опускается на дно пула. снижает вмешательство приложений и затраты на обслуживание.
Мы надеемся, что, накопив прошлый опыт работы и технический опыт в построении сцены, модель опыта будет оцифрована, что поможет в анализе операций и принятии решений, снизит стоимость эксперимента и сделает построение сцены более регулярным, более цифровым, и более эффективен в сопоставлении.
компонентная модель
Компонентное моделирование на 2020 финансовый год сосредоточено вокругэффективность бизнеса иконтроль качестварасширен.
Цитаты
Количество ссылок на компонент может отражать его универсальность: чем больше предприятий он охватывает, тем сильнее его универсальность, и его следует обвести кружком как ключевой объект управления.
Приложения
Во время рекламной акции 331 в 2020 году стек компонентов беспроводного терминала на объекте будет полностью преобразован из A в B, а это означает, что беспроводные компоненты, использовавшиеся в предыдущих рекламных акциях, столкнутся с затратами на миграцию и преобразование. Высокочастотные компоненты в большом бизнесе по продвижению выбираются в качестве приоритетных для миграции, а низкочастотные компоненты могут использоваться для определения необходимости, что значительно снижает нагрузку на модернизацию и трансформацию и обеспечивает управляемость построения. период акции 331.
монитор
мониторинг производительности
Создание страницы определяет сайт, на котором находится страница, что определяет spma (сайт) и spmb (сама страница); в процессе построения используется компонент для определения бита spmc; после публикации страницы, когда она работает в сети, каждый рендеринг. Выходящие интерактивные гиперссылки генерируют spmd.
Модель суперпозиционирования часто используется для общих данных, таких как трафик, источник и показатель отказов, управляемая конверсия, сумма транзакции, оборудование и ежедневная активность.
Изысканный пользовательский интерфейс, классная анимация, привлекательные и хорошие продукты и даже несколько наборов скинов, просто для шанса выиграть клик, или для развлечения или руководства по покупкам, и, наконец, для повышения конверсии.
Коэффициент конверсии лидов = объем лидов / клики / показы
Воздействие компонентовЭто PV компонента, а PV страницы не равно PV компонента. После доступа к странице будет сгенерирован PV страницы, а рендеринг и загрузка компонентов будут завершены.Ленивая загрузкаУлучшите производительность, только когда компонент появится в видимой области страницы, он будет засчитан как PV компонента. Страница PV >= Компонент PV >= Компонент Щелкните.
Щелчки компонента могут быть расположены на одной странице с помощью битов spma, b и c на странице назначения.Компонент может использоваться N раз на странице, биты spma и b одинаковы, а spmc разные, на N страницах цитируется N раз в спме, б и в все разные. Определите количество обращений для компонента, определите, какие страницы и этажи он использует, и полностью отмойте их. Сам компонент имеет версию, а не последняя страница должна быть последней версией, следуя спецификации обратной совместимости y и z, страница может использовать разные версии одного и того же компонента (при необходимости). Сводная классификация данных разделена комбинацией «год, месяц и день», а имя пакета компонента, версия и spmabc являются минимальными условиями группировки.
контроль качества
Компонент с отличной деловой эффективностью эквивалентен очень приятному внешнему виду, а качество компонента эквивалентно его физической пригодности. Медленная загрузка данных, тревожная производительность, частые ошибки, огромный размер, избыточный код, простые функции и сложная конфигурация, поэтому многим запутанным болезням и запутанным компонентам суждено пережить с первого по пятнадцатый день нового года. В частности, время загрузки данных, время рендеринга и нештатные условия будут напрямую воздействовать на клиента, вызывая дискомфорт в пользовательском опыте и даже невозможность работы, а потеря трафика и конверсий (жалобы клиентов) неспроста.
Платформа Alibaba провела большой мониторинг на уровне страницы, например, время загрузки первого экрана, время сетевого запроса, время загрузки изображения, скорость белого экрана и исключения JS. Для оптимизации уровня страницы вам все равно придется передать сам компонент, иначе, когда следующая ситуация будет нормальной, и отдельные компоненты не появятся, вы не сможете это контролировать. Компоненты загружаются и рендерятся в модулях, и сбой одного компонента не влияет на общий рендеринг. Учащиеся, не знакомые со структурой страницы, даже не подумают о наличии проблемы, когда увидят страницу в правой части рисунка ниже.
мониторинг исключений
Невидимость компонента вызвана либо специальной логикой, управляющей отображением, либо обнаружением исключения. Исключения также делятся наИсключение выполнения скриптаиИсключение данных. Исключения выполнения обычно отслеживаются в ошибках JS на уровне страницы.Исключения данных относятся к логическому уровню, и мониторинг ошибок JS неотличим, потому что такие исключения даже не сообщают об ошибках - часто имея дело с интерфейсами, ненормальные результаты данных должны быть все виды совместимости были сделаны (a&&a.b&&a.bc и a?.b?.c Babel 7, что вы предпочитаете).
Например, в списке 50 товаров, а 3 одинаковых изображения товаров, это не проблема на уровне кода, сложно увидеть неисправность после нескольких раз визуального осмотра на странице, и никакой ошибки не будет. сообщать при запуске.
Программа мониторинга:Один компонент и один источник данных,Результат источника данных имеет собственный формат. Как показано на рисунке ниже, мы устанавливаем ссылку на поле в структуре данных как точку карты мониторинга и настраиваем правила проверки.
Когда страница создаст и сохранит конфигурацию компонента, будет запущена асинхронная проверка правила., исключение в это время является просто предупреждением, при публикации страницы в предрелизной среде все компоненты будут синхронно проверяться на правила данных, а исключение в это время заблокирует публикацию и сообщит причину. Его нельзя успешно опубликовать до тех пор, пока аварийное восстановление не будет завершено, и он, наконец, появится в сети. В онлайн-среде сервер будет опрашивать и проверять данные компонентов на используемой странице.Как только данные будут ненормальными, он немедленно подаст сигнал тревоги в рабочей группе, и технические студенты смогут найти проблему и решить ее на месте. первый раз.
Точка улучшения: онлайн-среда используетПроверка опроса сервераИспользуемые данные — это данные запроса в среде, а реальные данные, персонализированные пользователем, — это то, что нам нужно отслеживать. Можно переместить логику с сервера во внешнюю операционную среду.После того, как все данные возвращены, они отправляются в компонент для проверки перед обновлением, чтобы можно было действительно обнаружить проблемы клиента.
мониторинг производительности
Точки мониторинга производительности компонентов:
- время загрузки модуля. Хотя компонент визуализируется одним модулем, при его загрузке все общие зависимости всех компонентов фактически извлекаются и объединяются в JS-запрос (называемый JS-комбинацией), а затем скриптовые запросы самих компонентов объединяются в JS-запрос: избегайте избыточных зависимостей между несколькими компонентами, мерж-реквесты для снижения частоты запросов и повышения производительности загрузки. В результате невозможно подсчитать время загрузки отдельного компонента, поэтому мы корректируем часть сетевого запроса, а время загрузки модуля приписывается времени самовыполнения при первом обращении к модулю.
- Инициализировать время загрузки данных. Во время первого процесса рендеринга экрана нашей страницы все данные компонентов на странице будут запрошены обратно, а затем отправлены обратно в компоненты для рендеринга. Скорость открытия страницы в секундах всегда была важным показателем для измерения производительности.Вклад времени загрузки данных компонента определяет вклад несекундного открытия.
- время рендеринга. Время рендеринга между beforeRender и afterRender. Как производительность компонента производительности, среднее значение видно по нескольким страницам.
Сложность конфигурации
Чтобы обеспечить собственную гибкость, компоненты часто открывают множество параметров конфигурации. Когда разработка завершена, она становится достаточно гибкой, и учащиеся, работающие с ней, могут больше вмешиваться в систему визуального построения. Если есть необходимость, можно поднять, если не хватает, добавить. Когда количество элементов конфигурации превышает 10, каждая конфигурация выполняется вручную, и учащиеся, которые впервые используют этот компонент, должны забыть об этом и испугаться. Точно так же компоненты становятся более сложными на уровне кода, а стоимость последующего обслуживания становится все выше и выше. Конечно, более открытая конфигурация также может отражать больше функций.
Вычислительная сложность заключается в том, чтобы максимально упростить сложные конфигурации, например, использовать поля выбора вместо полей ввода и попытаться предоставить значения по умолчанию и подсказки. После итерации компонентов неиспользуемые конфигурации своевременно очищаются, чтобы уменьшить путаницу пользователей.
Настройте правила расчета сложности.
качество кода
Комплексное управление
Будь то экспозиция, мониторинг производительности или исчерпывающие данные статистических компонентов, группы страниц, на которых они расположены, нельзя игнорировать. Ядром, объединяющим их, является spma, b, c. На странице сведений о компонентах рынка компонентов вы можете свободно объединять связанные страницы или бизнес-группы на панели «Компоненты 360» для просмотра общих результатов.
Я не знаю, есть ли у соседнего Сяомина 150 баллов. Я всегда чувствую, что мой результат 99 все еще очень хорош. Только когда есть сравнение, вы можете узнать, в чем вы бедны, и вы можете целенаправленно оптимизировать.
приложение для визуализации
Как правило, мониторинг и анализ осуществляются на одном конце, а просмотр данных — на другом. На самом деле выставлена только одна страница, а за ней много платформ. Например, платформа для действий, платформа для строительства, платформа для баннерных ресурсов, платформа для алгоритмов, платформа для выбора продуктов, платформа для A/B-тестирования, платформа для управления сценами, а также платформа для данных и платформа для мониторинга. Мне нужно на некоторое время успокоиться.
Визуализация данных — что видите, то и получаете
Для публикуемых страниц все очень обеспокоены данными о производительности Данные компонентов, которые вы видите на платформе анализа данных, выглядят так.
Является ли она точно такой же, как структура страницы при ее создании? Есть ли первый выбор для сводного отчета? Когда я вижу повторяющиеся названия компонентов (много раз использую "Wireless Universal Hotspot"), я могу не вспомнить точно, какая картинка была размещена для привлечения кликов. Высота занимает много места? Красная атмосфера хороша или розовая атмосфера хорошая.
Найдите страницу, данные о которой вы хотите просмотреть, в списке созданных вами страниц, щелкните значок «Компьютер» в столбце «Данные о производительности», и вы перейдете на страницу, которую нужно доставить. В отличие от того, что вы видите в обычных условиях, на странице много красочных масок, на них отмечены названия компонентов, и они аккуратно наложены на соответствующие блоки. Цвет маски представляет популярность данных первого индикатора на текущей странице (это блочная версия тепловой карты).
просматривать данные на мобильном
Что мне делать, если я хочу увидеть результаты доставки данных на мобильный терминал?
-
Просто откройте консоль браузера на только что открытой странице ПК, переключитесь в режим мобильной отладки и перезагрузите страницу. Это распространенный технологический метод, учащиеся, которые его не понимают, могут использовать следующий метод.
-
Или найдите целевую страницу на платформе Chimera и в столбце «Данные эффекта» наведите указатель мыши на значок «Мобильный», чтобы отобразить QR-код. Используйте любой инструмент распознавания QR-кода (браузер, WeChat, Alipay, Taobao, DingTalk...), чтобы отсканировать его.
Не забудьте подключиться к внутренней сети компании.
Перейти на платформу, чтобы увидеть данные
В целях дальнейшего WYSIWYG, ослабить платформу как сторонний носитель, а также позволить тяжело работающим сверхурочно просматривать данные для анализа после сна в постели. Планируется напрямую открыть возможность передачи данных на онлайн-страницу, то есть напрямую открыть страницу, на которой размещена реклама, независимо от того, является ли это ПК, мобильный телефон wap или 1688, внутренний Xiaoer активирует функцию передачи данных. на странице с помощью специального действия, поэтому нет необходимости искать платформу, чтобы найти страницу.
Thanks
Q&A
1. Как измерить сложность конфигурации компонентов
Ответ: Сначала суммируйте типы конфигурации компонента: тип ввода базовая сложность 3, со значением по умолчанию - 1, обязательно + 1 (строка, число, url, json, форматированный текст и т. д.); тип выбора (один выбор, проверка, выпадающий). вниз и т. д.), базовая сложность 2; конфигурация вложенного типа, например, настройка списка с картинками, копирайтинг, ссылки, базовая сложность = сложность добавляемых подэлементов * минимальное количество строк.
2. Как измерить качество кода
Ответ: Группа разработала платформу проверки качества кода с использованием eslint и sonar.Фронтальный проект выбрасывает количество строк правил, которые влияют на работу через плагин качества при отправке и сборке (например, присвоение второго значения к константе), а другие проблемы могут быть выборочно исправлены. После того, как код будет выпущен в повседневную среду, система автоматически создаст задачу проверки для текущей ветки, а затем классифицирует и подсчитает все отделы, которые запускают правила, и выставит баллы и оценки от хорошего к среднему в соответствии с количеством уровней Blocker/Critical/Major. , а также время, необходимое для анализа исправления. Отчет о качестве командного кода для сравнения, нажмите, чтобы оптимизировать код.
В этой статье используетсяmdniceнабор текста