Как быстро можно запустить обычное приложение PhoneGap? Советы по ускорению?

Ответ 1

Анекдотические данные:

Мои приложения для телефонных разговоров могут загружаться через 2 секунды (при нажатии на значок) на iPad 3. Тем не менее, вам рекомендуется использовать плагин с расширением экрана, чтобы поддерживать всплеск, пока пользовательский интерфейс приложения не загрузится, чтобы предотвратить мерцание и т.д.

Что вы можете сделать:

1) Не ждите, когда ваши данные начнут показывать ваш пользовательский интерфейс.

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

То же самое верно, если вы загружаете какие-либо сетевые данные - покажите пользовательский интерфейс, как только сможете, чтобы устранить ощущение приложения с медленной загрузкой. Затем, если ваши данные будут медленными для загрузки, поставьте счетчик. Пользователь увидит, что ваше приложение загрузилось быстро и что сеть теперь является узким местом.

2) Уменьшить размер/количество стартовых активов

Чем меньше скриптов, таблиц стилей и т.д., которые вы можете загрузить при запуске, тем лучше. Большинство веб-просмотров достаточно хороши в конвейерной обработке этих как можно больше, но в основном, чем больше данных, которые веб-представление необходимо загрузить, чтобы показать свой интерфейс, тем медленнее будет время загрузки вашего приложения. (Вот почему советы Apple для экранов заставки имеют смысл: показывая, что непопулярный пользовательский интерфейс почти сразу же должен помочь пользователям почувствовать, что приложение загрузилось быстро, даже если оно не было. Я не совсем уверен в этом аргументе..!)

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

3) Уменьшите количество плагинов до нужного числа, необходимого для функциональности вашего приложения.

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

4) Избегайте любых сложных вычислений при запуске до тех пор, пока не будет представлен пользовательский интерфейс

Если возможно, конечно. Даже если вашему приложению нужно нажимать данные (скажем, чтобы создать базу данных при первом запуске), сначала отбросьте пользовательский интерфейс, а затем вращатель, пока данные обрабатываются. Если вашему приложению нужно вычислить что-то сложное, сначала поднимите пользовательский интерфейс, а затем сверните свои номера.

5) Поймите, что некоторая часть времени загрузки вне вашего контроля

Необходимо загружать нативную оболочку, которая затем должна инициализировать веб-представление (которое требует времени), которое затем должно загрузить cordova.js(чтобы взаимодействовать между нативной и веб-сторонами). Это то, чего вы действительно не можете избежать (хотя вы могли бы избежать cordova.js, если бы вы не использовали какую-либо функциональность Cordova. Но тогда почему бы просто не построить более простую оболочку в этом случае - вообще не нужно использовать Кордову. )

6) Устройства сильно различаются

Конечно, время загрузки на одном устройстве не имеет никакого отношения, что-то еще на другом устройстве. Это верно на любой платформе, хотя я подозреваю, что она более заметна на Android благодаря широкому диапазону стоимости устройств. Медленное устройство для Android, вероятно, займет гораздо больше времени, чтобы загрузить ваше приложение, чем топ-оф-лайн модель Android. То же самое справедливо и для новых устройств. Например, если мое приложение может загрузиться в 2-х годах на совершенно новом iPad, шансы на то, что на старых аппаратных средствах потребуется немного больше времени. (Для меня я полагаю, что если я смогу загрузить приложение через 2-3 секунды на iPad 3, который не является самым новым, он должен загружаться еще быстрее на более новом оборудовании).

Наконец:

Я не уверен, что вы получите намного меньше времени загрузки на 1-2 секунды. Я также могу заявить, что 2-3-секундное время загрузки обычно не так сложно - я не прилагаю особых усилий в большинстве своих приложений, и они загружаются быстро и эффективно. (На самом деле, мое одно родное приложение загружается медленнее, чем мои телефонные приложения - 4 секунды против 2-3.)

Ответ 2

Вы можете увеличить скорость приложения:
1. Использование мини-версий js, которые вы включили в свой проект.
2. Избегайте использования изображений большего размера. настраивать их с помощью совместимых с PNG файлов Оптимизация изображений Использование CSS Sprite Sheets

   .icon {
      width: 14px; height: 14px;
      background-image: url("glyphicons-halflings.png");
    }
    .icon-glass {
      background-position: 0 0;
    }
    .icon-music {
      background-position: -24px 0;
    }
    .icon-search {
      background-position: -48px 0;
    }

Используйте правильный размер изображения (не масштабируйте изображения в HTML) Изображения хоста на масштабируемых распределенных системах (т.е. S3) Избегайте 404s для изображений

<img src="{{pic}}" onerror='this.src="nopic.jpg"'/>

3. Избегайте использования большого количества CSS.Limit Shadows и Gradients. Ссылка-shadow, border-radius, gradients, text-align Попробуйте отключить некоторые из CSS, которые замедляют его. В вашем jQuery mobile.css файл добавьте это в нижнюю часть:

* {
text-shadow: none !important;
-webkit-box-shadow: none !important;
-webkit-border-radius:0 !important;
-webkit-border-top-left-radius:0 !important;
-webkit-border-bottom-left-radius:0 !important;
-webkit-border-bottom-right-radius:0 !important;
-webkit-border-top-right-radius:0 !important;
}

4. Использование переходов CSS + аппаратное ускорение Использование основной прокрутки
5. Если вы используете любой живой URL, чтобы получить JS, лучше скачайте их и используйте локально.
6. FastClick FastClick - простая, простая в использовании библиотека для устранения задержки 300 мс между физическое нажатие и стрельба события щелчка на мобильных браузерах.

7. используйте экран Slpash.
8. Избегайте использования рамок только в случае необходимости. Попробуйте сделать отзывчивый дизайн.
9. Не создавайте пользовательский интерфейс на сервере. Создайте пользовательский интерфейс в JavaScript на стороне клиента
10. Минимизация отражений

• Уменьшить количество элементов DOM.
• Свести к минимуму доступ к элементам обновления DOM "в автономном режиме" до повторное вложение в DOM.
• Избегайте настройки макета в JavaScript

медленный

$("#header a.back").on("click", clickHandler);
$("#header a.back").css("color", "white");
$("#header a.back").css("text-decoration", "none");
$("#header a.back").attr("href", "#");

Быстрый

var $backButton = $("#header a.back");
$backButton.on("click", clickHandler);
$backButton.css("color", "white");
$backButton.css("text-decoration", "none");
$backButton.attr("href", "#");

11. Избегайте доступа к сети Не делайте приложения для зависимости от сети для получения контента

$.ajax({url: "services/states"}).done(function(data) {
    states = data;
});

использовать статические данные кэша LocalStorage, базу данных и файл медленный

$.ajax({url: "slow/feed"}).done(function(data) {

});

быстро

dataAdapter.getItems().done(function(data) {

});

12. Не дожидайтесь, пока данные отображают пользовательский интерфейс

// Display view
displayView();

// Get data
$.ajax({url: "product/101"}).done(function(product) {
    // Update view
});