Мобильный Интернет с огромным количеством платформ веб-приложений, браузеров, беспроводных сетей и т. Д. Обладает гораздо более сложной средой по сравнению с обычной веб-ареной. Это, безусловно, вызвало узкие места в производительности из-за задержек событий касания, медленной загрузки и грубых переходов страниц, если упомянуть некоторые проблемы. В то время как разработчики стремятся обеспечить удобство работы со своими мобильными веб-приложениями, существуют определенные факторы, которые трудно преодолеть.
Ограниченная площадь экрана, время работы от батареи, задержки радиопакетов и т. Д. — вот некоторые причины, побуждающие пользователей ожидать быстрых результатов от мобильных решений. Плохое время загрузки может существенно повлиять на коэффициент конверсии и прибыль, а также может помешать вашему поисковому рейтингу. Еще один факт, который следует учитывать, заключается в том, что мобильные пользователи более нетерпеливы, лишь немногие принимают фактические задержки, а остальные разочаровываются и мгновенно покидают сайт. Более того, с постоянно растущим мобильным трафиком в Интернете стало более чем необходимо оптимизировать работу мобильного Интернета, иначе вы рискуете своим потенциальным бизнесом.
Хотя существует несколько платформ, поддерживающих разработку мобильных веб-приложений , существуют определенные скрытые сложности, которые эти фреймы пытаются скрыть от вас. В этой статье я расскажу полезные советы и рекомендации, которые помогут вам разработать оптимальное мобильное веб-приложение на основе HTML.
Давайте углубимся в тему.
1. Функция обнаружения соединения — для более умного приложения
Вы можете оптимизировать скорость соединения, тщательно обдумав этот момент. Вот важный шаг, необходимый для решения большинства планов подключения.
window.addEventListener('load', function(e) {
if (navigator.onLine) {
// call different page
funcOnline();
} else {
// call available page
funcOffline();
}
}, false);
window.addEventListener("offline", function(e) {
// go offline and links not working
funcOffline(e.type);
}, false);
window.addEventListener("online", function(e) {
// comeonline and links working
funcOnline(e.type);
}, false);EventListener выполнит подходящий набор функций в зависимости от того, из какой точки он был вызван, например, произошло ли событие, был ли сделан запрос страницы или был выполнен запрос обновления.
Вы можете реализовать вышеупомянутый фрагмент кода для выполнения следующих задач.
-
Получить доступ к автономному доступу через приложение кэш
-
Определить, если приложение находится в автономном режиме и в закладки
-
Идентифицируйте при переключении из онлайн в автономный режим и наоборот.
-
Анализируйте медленные сетевые соединения и извлекайте контент, принимая во внимание тип сети.
2. Аппаратное обеспечение
Существует множество ограничений для устройств, которые необходимо учитывать при разработке мобильного веб-приложения. Такие темы, как распределение памяти, потребление батареи и т. Д., Создают большие проблемы, и если они не обрабатываются надлежащим образом, они могут испортить общую производительность вашего приложения. Хотите знать, как?
Например, давайте рассмотрим потребление батареи. Аппаратное обеспечение включает батарею, важно учитывать энергопотребление при разработке приложения. Это так, потому что современные браузеры получили больший доступ к аппаратному обеспечению устройства, что может снизить производительность в сети.
Для создания согласованного UX без сбоев необходимо разрешить ЦПУ мобильного устройства настраивать начальную анимацию, а затем задействовать графический процессор для распространения различных слоев при выполнении процесса анимации. Это назначает слой каждому анимированному элементу, чтобы устройство могло безошибочно отрисовывать все.
3. Определите безупречные переходы страниц
Разработчики часто предпочитают создавать эффект переворачивания, поворота или скольжения при определении переходов страниц. Все три эффекта обычно можно увидеть в нескольких приложениях. Здесь я буду просвещать эффект переключения .
Перевернуть страницу очень похоже на перелистывание страницы. С этим эффектом легко справиться, внедрив простой код JavaScript на устройствах Android и iOS. Поскольку у нас есть устройства с сенсорными экранами, крайне важно контролировать текущее положение элементов пользовательского интерфейса при создании таких эффектов.
Это можно сделать с помощью указанного ниже фрагмента кода.
function slidePage(event) {
// calculate position when move page
var curEffect = new WebKitCSSMatrix(window.getComputedStyle(page).effect );
var pagePos = curEffect.m41;
}Теперь наша цель — определить направление, в котором пользователь будет переворачивать страницу, и соответственно установить соответствующий порог для выполнения подходящей навигации по странице.
if (pagePos >= 0) {
//move effect
if (( pagePos > pageFlip) || ( hitTime < hitThreshold)) {
//slide right
slideWay = 'right';
}
} else {
if ((hitTime < hitThreshold) || (pagePos < pageFlip)) {
// slide left
slideWay = 'left';
}
}Здесь hitTime измеряется в миллисекундах. Это поможет мгновенно запустить событие навигации в зависимости от того, как пользователь проводит по экрану, чтобы пролистать страницу. Более того, после каждого запуска события, переходы CSS3 реализуются для создания собственного внешнего вида.
Code Snippet for CSS3 transitions:
function setPage(end) {
page.style.effect = 'translate3d('+ presentPos + 'px, 0, 0)';
if (end) {
page.style.effect = 'all 0.5s linear';
} else {
page.style.effect = 'all 0.4s linear';
}
page.style.effect = 'none';
}Чтобы активировать эту навигацию, вызовите swipeTo ().
track.ontouch = function(event) {
slidePage(event);
if (slideWay == 'left') {
slideTo('inner');
} else if ( slideWay == 'right') {
slideTo('index');
}
}Это создаст восхитительный перелистывающийся переход на другую страницу, одновременно создавая естественный опыт для мобильных пользователей.
Вывод
Существует несколько ключевых факторов, которые при правильном рассмотрении могут помочь оптимизировать мобильные веб-приложения HTML5. Я надеюсь, что некоторые из методов, включенных в этот пост, помогут вам повысить производительность вашего мобильного веб-приложения и обеспечить потрясающую производительность.