Эта статья выбрана Технологической ассоциацией Alibaba (ATA).
оптимизация ввода-вывода
сегодня Выпущено приложение Go Ah 5.1.1, а гибридная архитектура Air Travel была дополнительно реализована. Цель этого раунда оптимизации — сделать H5 действительно «бесшовным».
Сначала посмотрите на эффект, а, чтобы купить международные авиабилеты в сети App 2G и 30 секунд, чтобы завершить, в дополнение к странице поискового портала, список до оплаты на первой странице страницы H5, почувствуйте:
Таким образом, оптимизация ввода-вывода и HTML-рендеринг контейнера H5 находятся в центре внимания преобразования в этом выпуске, а именно:
- Оптимизация ввода-вывода ресурсов загрузки контейнера H5: избавьтесь от мгновенной распаковки zip-пакетов, распаковывайте и хэшируйте на SD-карту сразу после обновления автономных пакетов, считывайте файлы непосредственно с устройства каждый раз, когда создается представление, и локальное управление файлами по-прежнему основано по стандартной спецификации пакета H5.
- HTML сама на самом деле оптимизация страницы, CSS впереди, JS позади.
Действие «CSS впереди и JS позади» созданоинструментЧто нужно сделать. То есть, пока инструменты построения унифицированы, разработчикам не нужно заботиться о том, как оптимально разместить скрипты, а нужно сосредоточиться только на реализации бизнес-логики.Например, JS размещается следующим образом:
По сути, это не что иное, как смена синхронного скрипта на асинхронный. Сначала убедитесь, что стилизованный фрейм страницы выходит за считанные секунды, а затем выполните JS. Нет даже разницы в данных о производительности, но сенсорное улучшение настолько очевидно, что я бы предпочел, чтобы вы сначала увидели интерфейс, а не пустой экран.
Оптимизация ввода-вывода (продолжение)
Со стратегической точки зрения выполнения этих двух пунктов достаточно, чтобы справиться с большинством сценариев, и может гарантировать, что страница может отображаться за считанные секунды в любое время. Но во всей нашей гибридной архитектуре мы разработали более гибкий автономный H5, то есть используя виртуальные домены для обеспечения согласованности онлайн и оффлайн, напримерГостиница Группа Покупка H5 СтраницаСкан-код браузера открыт — это онлайн-страница, а скан-код приложения — это офлайн-страница, тот же код, сетевая нагрузка, один для загрузки:
Разработанный в первую очередь, чтобы сделать коммутацию онлайн и в автономном режиме, срочную проблему, которая будет организована на любой строке страницы, линия готова развернуть страницу, то она приходит к тому, чтобы оттолкнуть пакет страницы. Для выполнения этого коммутатора слоя, является ли файл проблемой, он принесет онлайн или оффлайн.
Поскольку прокси-уровень виртуального домена контейнера H5 будет направлять WebView для чтения файлов локально, а не по сети. Если локальный файл не может быть прочитан, создайте HTTP-запрос к соответствующему онлайн-файлу запроса. Если вы судите, есть ли файл локально через IO один раз, очевидно, что фактическое количество IO все еще не может быть уменьшено (все запросы файлов ресурсов должны быть IO один раз на жестком диске мобильного телефона).Чтобы уменьшить фактическое количество IO, мы генерируем по одному для каждого автономного пакета H5. Список файлов локальных ресурсов (cache_info.json), и в то же время путь доменного имени и путь к файлу преобразуются в карту сопоставления. Эта таблица сопоставления считывается в память и используется для Резервное копирование.Это включает доступ H5.С помощью этого фильтра карты вы можете напрямую найти то, что хотите прочитать.Расположение файла, Карта Если он не совпадает, вы можете напрямую создать HTTP для получения файлов из Интернета, что позволит избежать ненужных операций ввода-вывода.
Ускорение AngularJS на мобильных устройствах
Идите, в Hybrid есть много страниц со списками, таких как вышеупомянутая групповая покупка и пример международных авиабилетов в видео, AngularJS является наиболее подходящим для этого сценария. Но AngularJS в настоящее время не оптимизирован для мобильных устройств и мобильных устройств.hashchangeМодель данных Дискаdata-modelизменения, а затем черезViewрендерить. Первый рендер немного медленнее из-за ожиданияModelПредставление отображается, когда оно готово, и интерфейс все равно не выйдет через секунды (отhashchangeк интерфейсу не менее 0,8
Секунды) Структура данных немного сложнее, сразу ломается 1 секунда, естественно это время сопровождается помехами построения DOM для первой загрузки.
Несколько трансформаций:
- Первая загрузка убивает любые HashChanges, влияющие на флаттер страницы.
- Автономные основные данные (например, список городов)
Эти моменты — не что иное, как возможность отобразить первый рендеринг как можно скорее, а программирование в OPOA — это то, в чем хорош AngularJS.
Как сумка TMS загружается в автономном режиме
мы знаем AWPОн поддерживает только публикацию статического HTML, что не так просто объяснить.Ведь высокая производительность требует более простого и эффективного кеширования.Полная статика может быть полностью закэширована,особенно в сломанной сети мобильных терминалов.Кэширование особенно важно,но Динамическая TMS Как генерируется контент? Мы все знаем, что платформа AWP предоставляет<!--HTTP:url-->Тег (Инструкции по применению), ТМС
После изменения HTML регенерируется и передается в CDN.
Так вот вопрос, что делать в оффлайн пакете?
Наша команда студентов написалаoffline-tms-parserмодуль,clamбуду<!--HTTP:url-->Сборка тега:
<!--HTTP:http://abc.php,gbk:HTTP-->
Построить как:
<script
src="http://trip.taobao.com/market/trip/h5_offline_service.php? callback=handle_tms_fragment&src=http%3A%2F%2Fabc.php "
charset="gbk "></script>
Таким образом, содержимое TMS в офлайн-пакете полностью отделено от страницы H5, ведь TMS не может быть напрямую оффлайн из-за частых изменений. Но приведенный выше скрипт явно блокирует рендеринг страницы, поэтомуoffline-tms-parserПредусмотрена асинхронная версия, а именно:
<!--HTTP:http://abc.php?async,gbk:HTTP-->
Построить как:
<script id="tms_fragment_1
">
get_tms_fragment("http://abc.php ", "gbk ", "tms_fragment_1 ");
</script>
Затем поместите один вверху страницы H5.get_tms_fragmentможно реализовать.
Таким образом, развитие бизнеса на базе платформы AWP никак не пострадает, инструменты помогают нам справиться со 100%-й развязкой TMS и страниц H5, а также TMS можно массово использовать в офлайн-пакетах.
Тем не менее, нельзя злоупотреблять TMS, а разделение представления и данных на уровне логики кода по-прежнему необходимо.
Ожидаемый грохот-км
grunt-kmb, да, процесс сборки тоже нужно урезать и упростить.
grunt-kmbРазрабатывается другим одноклассником командыgrunt-kmcuglify-jsкоторый предоставил
JavaScript Syntax Parse Tree (AST), сначала посмотрите на сравнение:
Скорость грунт-кмс:
скорость хрюка-км:
Полное удвоение скорости слишком желанно, чтобы с нетерпением ждать его.
What's Next
Оптимизация этой проблемы не в том, насколько высокотехнологичными материалами, в основном ручной рабочей силы, технологии тщательно делать. Действительно хороший опыт накоплены бит, нам нужно нанять время для измельчения.
Фактически, прошло более полугода с тех пор, как Goah App Hybrid начал разрабатывать и оптимизировать первую версию.В течение этого периода искренние инвестиции студентов-клиентов неотделимы, потому что оптимизация H5 должна опираться на высокопроизводительные контейнеры WebView, но полагаясь на высокопроизводительные контейнеры WebView. H5 или веб-технологии сами по себе не могут быть созданы за считанные секунды. Добавлять "Руководство по созданию высокопроизводительных веб-сайтов«Что касается фрагментированных навыков оптимизации, H5 может быть достигнуто за считанные секунды в гибридной среде, а затем оснащено такой инфраструктурой, как динамическая отправка пакетов в автономном режиме и сбор скрытых точек. Узким местом веб-технологии является мобильность. определенные прорывы могут быть достигнуты.
я в этой группе В отчете на саммите передовых технологий мы упомянули проблемы, с которыми мы сталкиваемся:
Приложение Go представляет собой нечто среднее между приложением-кошельком на основе инструментов и операционным приложением для ручного тао. В нем есть как маркетинговая деятельность, так и PageFlow на основе инструментов и процессов. Чтобы максимизировать производительность стандартизированного PageFlow, следующая проблема заключается в том, как разумно продвигать операционные действия и завершать автономное развертывание таких страниц.
Конечно, в автономном режиме страницы события не то, что мы сталкиваемся с самой актуальной проблемой, самая сложная вещь - проблема данных.
Глядя на эту сцену, я сделал вход в приложение кошелька, вызывая Go App, и нашел страницу результатов поиска авиабилетов:
В настоящее время нам трудно отслеживать эффект, приложение в мобильном телефоне является информационным островом, сложно подключить PageFlow через приложение к приложению. Даже если параметр может принести его, он может принести его, если информация идентификатора, состояние входа в систему и ассоциации учетных записей могут быть приведены, каждый из них очень сложный.
- Тысячи тысяч лиц, сосредоточенных на решении проблемы с телефоном для выполнения функций настройки для разных людей.
- Беспроводные большие данные, направленные на разрушение информационных островов между приложениями, что делает операции с кросс-конечными данными более эффективными и надежными.
- Wireless Open Source, позволяющий принять участие B, например, нативную детализацию продукта, эпоха приема всех продуктов скоро будет нарушена более персонализированными и красочными нестандартными продуктами. В это время большое количество дизайна вертикальной модели продукта Больше зависит от участия торговцев, не наших собственных менеджеров по продуктам. Поэтому услуги закрытых петлей - это король магазинов мобильных телефонов, которые более открытыми исходными и свободными.
Говоря о закрытой петле, перейдите в процесс покупки билетов, это классический случай беспроводной терминальной петли:
В этом примере процесс покупки билета начинается со входа в кошелек, и пользователи попадают в приложение Go через SMS, Push, загрузку, возбуждение и другие операции (весь процесс проходит гладко, по оценкам, это сложно). чтобы вы могли различать, какие страницы H5, а какие нативные).
Итак, открытый исходный код + замкнутый цикл — это предельное состояние моей идеальной беспроводной гибридной технологии, и накопление гибридной технологии только началось.