Введение в загрузку веб-страниц на мобильном

Когда мы загружаем веб-страницу, мы не отправляем url-запрос на загрузку всего контента, а помимо основного URL-запроса идет множество других запросов, таких как JS, CSS, картинки и другие файлы, каждый из которых независимые Некоторые запросы по-прежнему являются последовательными, и эти файлы ресурсов необходимо загрузить перед рендерингом.

Мобильный терминал использует webveiw для загрузки статус-кво

Использование веб-просмотра на мобильном терминале влияет на взаимодействие с пользователем, главным образом потому, что время загрузки слишком велико (отправляется больше запросов), что приводит к слишком долгому отображению пустых страниц, что отражается в следующем процессе загрузки веб-просмотра — долго время загрузки, в основном включающее следующие три шага:

1. Инициализация веб-просмотра
2. Скачать HTML и разобрать его
3. Скачивание и рендеринг ресурсов css и js

Как сократить время, затрачиваемое на эти три шага, стало предметом исследования.

Процесс загрузки WebView

В качестве примера возьмем страницу консультации сообщества.В случае хороших условий сети 4G случайным образом выбираются пять наборов данных, и получается следующая цифра.Среднее время запроса html составляет 506 мс, а время запроса js и css составляет 783 мс, не включая время запроса изображения.

Пример запроса: например, я использую веб-просмотр для загрузки запросаТакже 5plus.com/post?post SI…

Из потока запросов захвата chales вы можете видеть, что при загрузке URL-адреса веб-просмотра после первого запроса html посредством синтаксического анализа загружаются некоторые ресурсы, такие как css и jss, В то же время вы также можете видеть, что веб-просмотр загружается страница, кроме основного HTML В дополнение к URL css и js, 7 запросов отправляется для запросов css и js.Это все еще менее сложная страница веб-просмотра.Если она слишком сложна, количество запросов может быть воображаемый. Как уменьшить запросы css и js — это тоже один из способов оптимизации стороны H5. Для клиента скорость загрузки webveiw также можно оптимизировать, предварительно разместив некоторые ресурсы js и css локально.

Как WebView загружает HTML

Через сервер вернуть в виде url

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

Загрузите локальный HTML-шаблон и вставьте контент локально

Таким образом, основное внимание уделяется большинству исследований компании, которые могут реализовывать секунды веб-просмотра, такие как страница сведений о новостях заголовков, подходящая для страниц, которые не уделяют особого внимания изменениям в реальном времени, почти без белого экрана, могут достичь исходного опыта, принцип заключается в том, чтобы заранее загрузить требуемый шаблон JS, CSS, HTML, заранее отобразить WebView, просто открыть, клиент вводит данные контента, что значительно повышает скорость WebView, это также является предметом этого исследования.

Загружать строки с тегами напрямую (загружать как форматированный текст)

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

Статус страницы консультаций сообщества Dewu

В настоящее время на странице колонки консультаций сообщества верхняя часть страницы использует WebView, а нижняя часть — собственная страница комментариев. Способ загрузки WebView также является традиционным способом загрузки через URL-адрес. Пользовательский интерфейс не очень хорошо, и для открытия страницы в среднем требуется около 2 секунд. Чтобы улучшить взаимодействие с пользователем и сократить время загрузки веб-просмотра, была исследована оптимизация веб-просмотра.

Наконец, путем исследования и сравнения программ клиент решил изучить и загрузить локальный HTML-шаблон и загрузить страницу WebView путем внедрения содержимого.

Поскольку, когда список загружается на странице консультации сообщества, данные содержимого для рендеринга были получены веб-просмотром, поэтому при нажатии на страницу «Сведения об консультации» данные содержимого также являются локальными, что эквивалентно снизить количество запросов Отправлено веб-просмотром. Данные CSS и шаблон HTML предоставляются локально заранее и загружены заранее через протокол файла. Когда веб-просмотр открывается, содержимое напрямую вводится в локальный HTML-шаблон, который значительно сохраняет время WebView Запрос и загрузка.

Схема финального запроса на загрузку WebView показана на рисунке выше, что экономит время на промежуточные запросы html, css и js.За счет загрузки автономных локальных методов скорость значительно повышается, а время на локальную загрузку html , css и js незначительны.

Логика скачивания пакета в автономном режиме:

Не удалось скопировать загружаемый контент

Способ получения введенных данных контента:

1. Если в списке уже есть данные контента, нет необходимости отправлять запрос на вход в веб-просмотр, вы можете напрямую вводить данные контента в локальный шаблон html.
2. Если в списке нет данных о содержимом, войдите в веб-просмотр и запросите разные URL-адреса для получения данных о содержимом в соответствии с другим содержимым, а затем введите локальный шаблон html.

Эффект сравнения до и после использования условий сети Chalect моделирования 4G в виде DEMO:

До оптимизации

📎Колонка консультаций перед оптимизацией 4G.mp4

Оптимизировано

📎Колонка консультаций после оптимизации 4G.mp4

Сравнение данных до и после оптимизации, что касается демонстрации

Сравнение времени между загрузкой веб-просмотра и окончанием рендеринга выглядит следующим образом.

Из данных в вышеприведенной показателе можно четко видеть, что веб-просмотр увеличился примерно на 98% от нагрузки до конца рендеринга, а эффект оптимизации все еще очевиден.

Далее давайте уточним время запроса каждого этапа веб-просмотра:

время запроса сети ресурса css, js

время сетевого запроса html

Так как шаблоны css, js и html могут быть размещены локально заранее в виде офлайн-ресурсов, можно сэкономить время на запрос ресурсов, что значительно сократит время в процессе загрузки webview.

\

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

резюме

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