Автор: Лю Вэньтао
Исходное заявление: Эта статья подготовлена членами команды интерфейса чтения YFE, пожалуйста, уважайте оригинальность, пожалуйста, свяжитесь с общедоступной учетной записью (id: yuewen_YFE) для авторизации и укажите автора, источник и ссылку.
В начале этого года наша компания начала зарубежное путешествие отправной точки бренда под названием «Webnovel».
В настоящее время три терминала ПК/М-станции/приложения находятся в быстрой итерации. Среди них зарубежная версия приложения разработана на основе технологии Hybrid. В качестве отправной точки для внешней разработки встроенных страниц в зарубежном приложении Hybird, от незнакомой версии 1.0.0 до владения недавно выпущенной версией 2.0.0, метод разработки зарубежной версии встроенных страниц улучшается, стремясь быть как можно ближе к производительности нативной страницы приложения и пользовательскому опыту.
Прежде чем приступить к объяснению конкретной реализации и оптимизации встроенных страниц в зарубежной версии приложения, давайте сначала разберемся с конкретной реализацией всего гибридного приложения.
1. Схема реализации гибридного приложения
1. Что такое гибридное приложение?
Гибридное приложение (гибридное приложение) относится к приложению между WebApp и Native-App, которое имеет как «преимущества хорошего взаимодействия с пользователем в собственном приложении», так и «преимущества кроссплатформенной разработки веб-приложений».
2. Почему стоит выбрать гибридное приложение
- Веб-реализация относительно проста, это набор кодов, совместимых с обеими сторонами;
- Продукт по-прежнему быстро обновляется, а переменные велики, а стоимость разработки нативного приложения высока;
- Время веб-разработки короткое, стоимость снижена, и он может справиться с быстрой итерацией продукта;
- Метод разработки гибридного приложения был хорошо использован в других проектах компании, и технические решения были ускорены;
Вышеуказанные пункты являются основными причинами разработки зарубежных версий приложений с использованием гибридного режима.
Во-вторых, общая структура
1. Гибридная реализация
Гибридное приложение разработано с использованием нативной iOS, нативной Android и веб-страницы «страницы, встроенной в приложение, то есть встроенной страницы».
2. Полные инструменты SDK
-
автономный пакет: ресурсы веб-страниц встроены в локальное хранилище приложения в виде автономных пакетов. При доступе к странице WebView напрямую считывает локально сохраненные ресурсы без дополнительных сетевых запросов. В остальных запросах есть только динамические данные Json, извлеченные Ajax, ресурсы изображения, переносимые при рендеринге этой части данных, и некоторые необходимые скрытые запросы. Это позволяет быстро открывать веб-страницы даже в условиях слабой сети;
-
Полный JSSDK: используйте JSSDK для взаимодействия с приложением, прозрачно и кроссплатформенно используйте возможности клиента, формируйте интерактивный замкнутый цикл и предоставляйте пользователям хороший интерактивный опыт;
-
Автономные инструменты обвязки пакетов: Автоматизированные инструменты упаковки могут быстро выводить пакеты в автономном режиме. Без ручного вмешательства также может быть гарантирована правильность автономного пакета APP;
-
Идеальный механизм горячего обновления: после того, как клиент приложения обнаруживает обновление автономного пакета, клиент обновляется молча (пользователь этого не воспринимает), что решает проблему, заключающуюся в том, что страница собственного приложения не может быть исправлена и обновлена, а может быть выпущена только для исправления ошибок;
3. Идеальная фоновая системная платформа
-
Упаковка в один клик: Визуализируйте автономный инструмент упаковки пакетов на встроенной странице, осуществите упаковку одним щелчком мыши и выведите автономный пакет;
-
понижение рейтинга: быстро вернуться к предыдущей версии, если есть какие-либо проблемы, быстро отключить функцию новой версии;
-
сбор информации: полная платформа для сбора данных, оптимизирующая взаимодействие с пользователем посредством анализа данных;
-
Обновление оттенков серого: поддержка обновления оттенков серого в соответствии с конфигурацией;
-
Непрерывная интеграция: системная платформа все еще постоянно интегрируется, чтобы обеспечить лучший процесс разработки;
В-третьих, оптимизация встроенных страниц
Большинство страниц нашего зарубежного приложения реализованы с помощью гибрида.Для двух аспектов производительности страницы и взаимодействия с пользователем, которые в наибольшей степени близки к нативному приложению, я сосредоточусь на следующих двух частях:
- Глобальная оптимизация встроенных страниц - страницы интерфейса загружаются параллельно;
- Оптимизация загрузки страницы подробностей - localStorage;
1. Глобальная оптимизация встроенных страниц - параллельная загрузка страниц интерфейса
Предыдущий метод разработки встроенных страниц заключался в отправке Ajax-запроса в JS для извлечения данных, затем использовании механизма шаблонов для объединения шаблонов, вставки их на страницу и последующего рендеринга страницы с помощью WebView.
Как видно из приведенного выше рисунка, несмотря на то, что скоро на странице появится заполнитель, вся операциясериалДа, вам нужно дождаться возврата данных Ajax, прежде чем вы сможете увидеть страницу. И время между WebView и запросом Ajax тратится впустую.
Если Ajax-запрос текущей страницы может быть отправлен при запуске WebView, наши данные могут быть получены заранее, и время простоя между запуском WebView и Ajax-запросом будет использоваться нами. В этот момент описанный выше процесс становится следующим:
При запуске WebView Приложение получает адрес соответствующего Ajax-запроса по URL-адресу, чтобы отправить запрос заранее, а когда отправляется запрос самой страницы, оно перехватывает Ajax и оценивает, является ли он это данные, которые были запрошены заранее. Если это так, страница будет отображаться на основе данных, возвращенных Ajax, запрошенных заранее, если нет, Ajax будет продолжать отправляться, и страница будет отображаться после возврата данных.
При описанном выше подходе мы полностью используем время между запуском App WebView и отправкой Ajax для получения данных. Запрос интерфейса загружается параллельно со страницей, что ускоряет отображение страницы.
Согласно приведенным выше данным, мы обнаружим, что среднее время отображения страницы почти на 300 мс быстрее. Не влияя на обычный процесс загрузки страниц, превращайте последовательные операции в параллельные, максимально используйте свободное время, значительно сокращайте время белого экрана встроенных страниц и позволяйте пользователям быстрее просматривать содержимое страниц нашего зарубежного приложения.
2. Детальная оптимизация загрузки страницы - localStorage
Метод параллельной загрузки ресурсов интерфейса и страницы значительно ускоряет отрисовку встроенной страницы, однако из-за большого количества зарубежных пользователей и неопределенности времени загрузки интерфейса страница все равно будет иметь белый экран Что нам нужно сделать дальше? Это конкретная страница, особая обработка.
На всей странице зарубежного приложения отправной точки страница сведений имеет относительно большое количество посещений, а также является более важной страницей на всем сайте, поэтому скорость ее отображения очень важна. Поэтому в этой итерации мы в основном специально занимаемся страницей сведений.
Во-первых, давайте проанализируем бизнес-форму страницы сведений. Данные страницы сведений о книге относительно стабильны и не часто меняются, но для возврата данных интерфейса требуется время, поэтому мы можем сначала сохранить данные страницы сведений о книге локально, чтобы добиться эффекта быстрого отображения, и одновременно отправьте интерфейс Ajax. Подождите, пока данные не будут возвращены, чтобы исправить старые данные на странице.
Что касается локального хранилища, мы вводим localStorage для локального хранилища по следующим причинам:
- localStorage может хранить большой объем данных;
- localStorage относится к постоянному хранилищу;
- localStorage в настоящее время хорошо поддерживается мобильными браузерами;
Из приведенного выше рисунка видно, что когда пользователь посещает страницу сведений о книге в первый раз, соответствующая страница данных книги в localStorage не отображается в соответствии с обычной логикой, но в это время мы будем кэшировать эти данные в localStorage. Когда пользователь посещает страницу сведений о той же книге во второй раз, мы быстро находим информационные данные соответствующей страницы сведений о книге в localStorage в соответствии со значением ключа bookId и объединяем шаблоны на основе кэшированных данных для отображения страницы. . При этом продолжайте выдавать Ajax-запросы, а когда данные будут возвращены, сравните их с данными в localStorage на основе алгоритма Diff. Если данные непротиворечивы, обработка не будет выполняться. Если данные противоречивы, страница будет повторно отображаться на основе новых данных, а данные в localStorage будут обновлены, чтобы вернуть новые данные Ajax. Таблица сравнения конкретных эффектов выглядит следующим образом: левая сторона без вторичного ускорения, а правая сторона представляет собой эффект использования вторичного ускорения:
Можно видеть, что когда страница отображается в первый раз, изображение-заполнитель все еще можно четко увидеть, но когда страница открывается во второй раз, она отображается напрямую, и эффект очевиден.
конец~~
Я занимался интерфейсной разработкой гибридной страницы более полугода и сделал много оптимизаций для зарубежной версии приложения, чтобы сделать его более удобным для пользователей. Но мы ничего не можем сделать с узким местом самой гибридной технологии. Поэтому наша команда в настоящее время пытается преобразовать технологию с гибридной на React Native, чтобы еще больше улучшить взаимодействие с пользователем.
Также продолжайте предыдущий обмен: оптимизация деталей может определить качество продукта, а хороший пользовательский опыт привлечет больше пользователей и получит больше похвал.
Ниже приведен адрес доступа к зарубежной версии отправной точки, пожалуйста, ткните посильнее~~👇
Отправная точка загрузки приложения для зарубежной версии:
Пожалуйста, перейдите в Google play / App Store [US] для загрузки.
Отправная точка веб-сайта зарубежной версии:
https://www.webnovel.com
Отправная точка зарубежной версии м станции:
https://m.webnovel.com