Самостоятельные исследования и разработки Alibaba заняли 3 годаМеханизм веб-рендерингаBeihai (английское название: Kraken) имеет официально открытый исходный код и стремится создать легко расширяемый, кроссплатформенный, высокопроизводительный движок рендеринга, который использовался в таких бизнес-сценариях, как Youku, Damai и Tmall.
Официальный сайт:openkraken.com
Гитхаб:Github.com/открыть кракен/...
задний план
Быстрое развитие интернет-бизнеса неотделимо от кросс-платформенных технологий, и наиболее зрелой кросс-платформенной технологией является знакомый браузер.Его присущие ему кросс-платформенные возможности, открытые стандарты и сильная экология делают его горячим контейнером. Однако, поскольку он не предназначен для повышения производительности и имеет такие проблемы, как тяжелая историческая нагрузка, совместимость и медленные обновления от производителей, производительность браузера на мобильной стороне не является выдающейся. Хотя развитие сети и аппаратного обеспечения принесло достаточные дивиденды производительности, все более сложный бизнес всегда может полностью понять существующую производительность.
В прошлом было много исследований и практик кросс-платформенных решений, и новые технические решения постоянно разрабатывались с течением истории. От самого раннего решения H5 до решения Hybrid, а затем от решения Weex/React Native до текущего Flutter в самом разгаре.
Благодаря оптимизированному конвейеру рендеринга, эффективным возможностям рендеринга макетов и функциям самостоятельного рендеринга за последние два года Flutter стал новым любимцем кросс-энд-индустрии. До появления Flutter основным решением по-прежнему был React Native (Weex), а нижний уровень этого решения назывался нативным представлением. Именно из-за этого данному решению сложно обеспечить полную multi-end консистентность, т.к. сам нативный View имеет некоторые ограничения, а ограниченные возможности не могут удовлетворить все потребности разработчиков, поэтому он немного надуманный для реализации стандарта W3C. С другой стороны, Flutter выполняет рендеринг самостоятельного рисования на основе Skia более низкого уровня, что вполне может обеспечить многоконечную согласованность.
Студенты, знакомые с Flutter, должны знать, что Flutter разработан на языке Dart и виджете.Хотя язык Dart не очень дорог для студентов, знакомых с JavaScript, они уже хорошо знакомы с управляемым состоянием режимом разработки виджета. ., но противоречие между существующей инфраструктурой и фронтенд-экологией в целом недопустимо. Кроме того, динамические возможности просто необходимы для интернет-бизнеса, и Flutter для Интернета в настоящее время не идеален.
после всего,Первым шагом при внедрении новой технологии является определение стоимости внедрения новой технологии.. Поэтому мы активно изучаем кроссплатформенное решение, которое соединяет фронтенд-экосистему вверх и использует саморисованный рендеринг вниз.
Так родился этот высокопроизводительный кросс-терминальный движок рендеринга, основанный на стандарте W3C, Kraken.
На основе стандартов W3C
Пользователи, которых Kraken в конечном итоге хочет обслуживать, по-прежнему являются фронтенд-разработчиками, так как же снизить стоимость обучения и знакомства для фронтенд-разработчиков и как быстро перенести старые проекты в Kraken? Мы не хотим воссоздавать новый DSL в качестве среды разработки для использования разработчиками.При необходимости собственный Widget + Dart Flutter проделал хорошую работу. Front-end разработчики могут использоватьRax, также можно использоватьVueилиReactДа, мы все ожидаем, что пользователи Kraken смогут получить быстрый доступ с нулевой стоимостью. Затем вам нужно полагаться на набор стандартов, с которыми разработчики хорошо знакомы для реализации Kraken.
Стандарт W3C является одним из наиболее важных стандартов в Интернете, а также стандартом, с которым хорошо знакомы разработчики интерфейса. браузеры могут быстро приступить к работе почти «нулевой стоимости». В то же время мы можем избавиться от тяжелого исторического багажа, сделав рендеринг Kraken более эффективным.
Сильная экосистема фронтенд-разработчиков
Благодаря разработке, основанной на стандарте W3C, фронтенд-разработчики на Kraken могут в полной мере использовать огромную экосистему фронтенда, с которой они знакомы.
Прежде всего, в выборе R&D framework, независимо от того, что использует разработчик.RaxилиVue,ещеReactилиAngular, все они гарантированно хорошо отрисовываются на Kraken.
В-третьих, у фронтенда очень благополучная экосистема, большое количество NPM-пакетов в сообществе можно использовать непосредственно на проекте Kraken, а большое количество зрелых модулей обеспечивают эффективность развития бизнеса.
Кроме того, различные инструменты, которые разработчики обычно используют при разработке проектов, можно использовать непосредственно в проекте Kraken без каких-либо дополнительных затрат на знакомство и обучение.
Состыковываясь с протоколом Chrome DevTools, разработчики могут напрямую использовать очень знакомые инструменты Chrome DevTools для отладки разработанных страниц. Независимо от того, нужно ли разработчикам изменять стили CSS, просматривать структуру DOM или отлаживать код JavaScript с помощью точек останова, можно гарантировать тот же опыт отладки, что и при веб-разработке.
Согласованность рендеринга
Возможности рендеринга Kraken основаны на его стандартах W3C, поэтому можно гарантировать, что он будет точно таким же, как рендеринг в Интернете.
На следующем рисунке показан скриншот реального бизнеса, слева направо показаны Kraken (iOS), Kraken (Android) и веб-версия, видно, что результаты рендеринга полностью совпадают.
Лучший опыт и возможности, чем в Интернете
Таким образом, некоторые студенты здесь хотели бы спросить, в дополнение к опыту разработки и отладки, который соответствует текущей разработке внешнего интерфейса, а также согласованности рендеринга, какие возможности могут быть получены в конечном итоге и какие преимущества могут быть получены. получить по сравнению с браузерами?
Бесконечный прокручиваемый список
В бизнес-разработке разработчики иногда сталкиваются с некоторыми «списками с бесконечной прокруткой», которые не могут быть разбиты на страницы, но содержат большой объем данных. В разработке на стороне клиента есть RecyclerView/UITableView для реализации контейнера макета для повторного использования прокрутки.Хотя в веб-стандартах существует множество решений по оптимизации внешнего интерфейса для решения этой проблемы, это всегда было сложной проблемой. Kraken попытался решить эту проблему на стороне контейнера, увеличив значение свойства CSS Display — sliver.
Когда дочерний элемент в контейнере Sliver прокручивается за пределы области просмотра контейнера, объект рендеринга, используемый для рендеринга в дочернем элементе, может быть переработан для экономии использования памяти. Когда дочерний элемент появляется снова, объект рендеринга регенерируется в соответствии с описанием DOM.
Это демонстрация десятков тысяч узлов. Слева — контейнер переполнения: прокрутка, а справа — дисплей: контейнер ленты. Вы можете видеть, что контейнер ленты прокручивается гораздо более плавно в «списке бесконечной прокрутки». сценарий. В левом верхнем углу есть данные FPS, видно, что FPS контейнера с display:sliver поддерживается на нормальном уровне, а FPS контейнера с overflow:scroll значительно упал. Кроме того, есть также больший прирост памяти.
Синхронизированная растеризация
В браузере растеризация выполняется асинхронно, при инерционной прокрутке появляется белый экран, это неизбежная проблема с WebView. Благодаря эффективной реализации синхронной растеризации Flutter Kraken может быстро прокручивать длинные списки без белого экрана.
Улучшенная способность жестов
Кракен отОбщие жестыВстроено, так что, когда бизнес-разработчики используют возможности жестов, им больше не нужно вводить библиотеку JavaScript для перехвата события Touch для разработки.
Взяв в качестве примера жест смахивания «смахивание», разработчикам нужно только получить возможности жестов, предоставляемые по умолчанию для элемента, с помощью следующих методов. Непосредственно используйте встроенные расширенные возможности жестов для более быстрой разработки сложных интерактивных приложений.
element.addEventLisenter('swipe',(gestureEvent) => {
///...
})
Расширенные возможности жестов решают проблему производительности, связанную с частой доставкой событий в Интернете, и проблему, связанную с тем, что обработка жестов JavaScript занимает поток пользовательского интерфейса. Кроме того, благодаря возможностям конкурентного поля, реализованным внутри контейнера, могут быть решены такие проблемы, как проникновение жестов в сеть.
Встроенные стандартизированные возможности жестов также обеспечивают стандартизацию и единообразие возможностей взаимодействия жестов в разных приложениях одного и того же контейнера.
Возможность плагина
В дополнение к вышеупомянутому опыту и возможностям за пределами Интернета, очень важной особенностью Kraken является то, чтоВозможность плагина,Возможности подключаемых модулей предоставляют фронтенд-инженерам возможность переопределить возможности браузера., разработчикам нужно только написать плагин Flutter, чтобы расширить возможности самого Kraken.
С помощью подключаемых модулей разработчики могут реализовать множество пользовательских тегов (таких как камера или настраиваемый видеоплеер и т. д.) внутри или поместить общие бизнес-компоненты (например, слайдер) в контейнер на основе соображений производительности Floor. Поскольку развитие производителей браузеров и разработка стандартов часто отстают, разработчики с подключаемыми модулями могут быстро настраивать различные возможности рендеринга, чтобы бизнес-разработчики могли использовать новейшие или расширенные возможности.
В дополнение к расширению возможностей рендеринга разработчики также могут расширять возможности жестов.Расширение возможностей жестов может поместить возможность захвата реализаций Touch Event на внешнем интерфейсе в самом контейнере, что не только улучшает интерактивный опыт, но и предоставляет больше возможностей для взаимодействия. .
Гарантия стабильности
Движок рендеринга очень сложный, и часто бывает так, что изменение бага повлияет на все тело, поэтому для обеспечения стабильности движка рендеринга требуются автоматизированные тесты с высоким охватом.После каждой модификации необходимо следить за тем, чтобы существующие случаи не проблема. Убедитесь, что каждый случай сравнивается с результатами перед модификацией с помощью автоматического тестирования.Если есть разница, вы можете изменить ошибку через случай и сравнить разницу.
Эта автоматизированная система тестирования обеспечивает согласованность результатов кейсов, полученных Kraken до и после каждой модификации, чтобы обеспечить стабильность самого механизма рендеринга.
В настоящее время около 3000 тестовых случаев в будущем будут основаны на большем количестве сцен, чтобы обеспечить стабильность Kraken.
Деловой этаж
После стольких разговоров о возможностях Kraken должны быть некоторые студенты, которые хотят знать, как Kraken работает в реальных производственных сценариях.
В настоящее время Kraken имеет соответствующий бизнес-доступ к мобильным устройствам и низкопроизводительным устройствам IoT в сценариях на стороне C, которые можно использовать в реальных производственных сценариях.
В приложении Youku Kraken уже заработал много денег. Страница сведений об идентичности, показанная ниже, является примером.После преобразования Kraken произошло качественное улучшение.По сравнению с исходным планом той же страницы, рендеринг первого экрана увеличен на 28,4%, а частота кадров увеличилась на 8,3%.
На устройствах IoT наш бизнес Tmall U-first также очень хорошо показал себя на низкопроизводительных устройствах IoT в автономном режиме. В относительно сложных автономных сценариях, таких как Slider, анимация и производительность взаимодействия хорошие, приложение работает долго, а память стабильна и значительно не увеличивается, обеспечивая стабильность автономных приложений IoT.
механизм сотрудничества сообщества
Команда Kraken надеется создать базовые возможности и экологию Kraken вместе со многими разработчиками в сообществе с помощью хорошего механизма сотрудничества сообщества.
Команда Kraken ожидает прохождениясотрудникспособ участвовать в итерациях функций Kraken и обсуждениях проблем. В то же время через группу сотрудниковТехнический комитет (TSC)Чтобы определить техническое направление, выпустить и настроить стандарты и так далее.
Команда Kraken надеется, что благодаря справедливому и эффективному механизму сотрудничества разработчики из сообщества смогут лучше участвовать в развитии технологии контейнеров для веб-стандартов, чтобы голос каждого был услышан, и совместно продвигать Kraken и развитие отрасли.
Посмотреть более подробные механизмы совместной работы могут двигатьсяgithub.
перспективы на будущее
В прошлом, когда мы занимались оптимизацией производительности внешнего интерфейса, она часто оптимизировалась на уровне браузера, и дальнейшая оптимизация была затруднена. Появление Kraken дало фронтенд-инженерам новые возможности и вызовы.Возможность переопределить браузерВозможность имеет очень большой простор для воображения:
- Выйдите за пределы возможностей Интернета и сравните производительность и опыт с Native.
- Чем стандартные поставщики браузера, чтобы достичь быстрее, стоя в авангарде стандартного определения проблемы, за счет возможности достижения стандартов реверсоров тяги, способствовать развитию отрасли.
- Вы можете просмотреть оптимизацию и работу всей ссылки рендеринга сверху вниз, оптимизировать производительность и определить некоторые новые возможности рендеринга с помощью средств полной ссылки.
- В настоящее время все более сложные клиентские приложения приводят к тому, что пакеты JS становятся все более и более раздутыми. Разработчики также могут абстрагировать и повторно использовать общие возможности и погружать их на уровень контейнера. Повторное использование рендеринга и общих возможностей больше не зависит только от NPM. , Уменьшите общие способности, чтобы сделать больше.
- Благодаря комбинации «облако + терминал» также есть возможность изучить новое поколение перспективных технологий рендеринга.
- На основе Kraken, исследуйте больше возможностей...
Наконец, я надеюсь, что Kraken может принести вам больше опыта и возможностей, а также надеюсь, что каждый сможет активно участвовать в проекте Kraken и вместе строить экосистему Kraken.
Официальный сайт:openkraken.com
Гитхаб:GitHub.com/open kraken/…