оптимизация сайта iPad - PullRequest
1 голос
/ 29 июля 2011

Наша компания разрабатывает крупное корпоративное решение для бизнеса (сайт).После одобрения поддержки Apple iPad мы увидели, что наш сайт работает очень медленно.Итак, мне было поручено оптимизировать производительность для iPad путем оптимизации графического интерфейса (Html, JS ...), потому что серверная часть приложения довольно быстрая.
Я нашел несколько решений с одобрением клиента:
* Уменьшениестолбцы сеток подсчитывают и оставляют только самые полезные.
* Отключите всю анимацию.
* Уменьшите максимально возможное изменение размеров.
И, конечно, я уменьшил все скрипты и таблицы стилей.
МожетВы делаете мне дополнительные советы, как улучшить производительность?

Ответы [ 2 ]

2 голосов
/ 29 июля 2011

Есть несколько вещей, многие из которых относятся к настольным сетям, а также являются лишь частью хорошей практики.

В произвольном порядке:

  • Удалить лишние пробелы и комментарии HTML / CSS / JS
  • GZip весь текстовый контент (HTML, CSS, JS)
  • Оптимизируйте все свои изображения (например, используйте сервис, такой как http://Smush.it)
  • Переместите ваши изображения / статический контент на отдельный сервер (усиление конвейерной передачи HTTP) и не обслуживайте файлы cookie на этом сервере
  • Не подносите ничего "мобильному", что им не нужно (где это возможно)
  • Не уменьшать изображения на клиенте, обслуживаемые уменьшенные версии с сервера
  • Поскольку большинство мобильных браузеров хорошо справляются с CSS, конвертируйте «списки» данных, которые отображаются в таблицах, для использования неупорядоченных списков и т. Д.
  • Служите распространенными сценариями, такими как jQuery, из CDN, такими как Google
  • большинство мобильных браузеров поддерживают какое-либо автономное кэширование или локальную облегченную базу данных - если есть что-то, что вы можете кэшировать, чтобы уменьшить будущие нагрузки, подумайте об этом
  • Если вы хотите стать действительно модным, вы можете сделать что-то, например, не загружать изображения напрямую ... и затем проверять на странице, какие изображения отображаются в данный момент (или с небольшой задержкой), и загружать их по мере необходимости ... Полезность этого будет сильно зависеть от содержания
  • Рассмотрите возможность задержки загрузки результатов поиска, если это применимо (например, например, поток Twitter, который может загружать только первые 20 элементов, а затем загружать только дополнительные элементы по требованию.
1 голос
/ 30 июля 2011

Вот некоторые практические вещи, о которых я хотел бы рассказать;

  1. Избегайте использования фреймов на ваших страницах. Они плохо работают на iPad.
  2. Используйте такую ​​библиотеку, как Sencha touch, которая оптимизирована для iPad.
  3. Делайте ссылки или кнопки, чтобы иметь большие области просмотра, поскольку пользователи могут быть расстроены неправильными щелчками ссылки ..
  4. Избегайте использования элементов CSS с абсолютным позиционированием.

Также добавить еще несколько очков;

  1. Лучше всего использовать настройку окна просмотра мета как width = device-width ... Это гарантирует, что ваш видовой экран настроен на основе вашего устройства, а не жестко задан.
  2. Избегайте использования CSS: свойства наведения в вашем iPad CSS ... Они могут вызвать ненужные проблемы (ложные наведения)
...