Приведённые ниже рекомендации по спецификациям — это опыт, обобщённый и усовершенствованный командой Alloyteam в ходе повседневной разработки. Эти спецификации доказали свою эффективность в реальных проектах, и их настоятельно рекомендуется применять.

Настройки шрифтов

Используйте шрифты sans-serif

body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}

iOS 4.0+ использует английский шрифт Helvetica Neue, а более ранние версии iOS откатываются к Helvetica. Китайский шрифт установлен как STHeiTi. Следует отметить, что STHeiTi отсутствует в библиотеке шрифтов iOS (http://support.apple.com/kb/HT5484?viewlocale=en_US), но система автоматически сопоставит STHeiTi с системным китайским шрифтом по умолчанию — Heiti Simplified или Heiti Traditional.

Heiti SC Light 黑体-简 细体
Heiti SC Medium 黑体-简 中黑
Heiti TC Light 黑体-繁 细体
Heiti TC Medium 黑体-繁 中黑

В нативном Android как китайские, так и английские шрифты должны использовать шрифт sans-serif по умолчанию.

4.0 之前版本英文字体原生 Android 使用的是 Droid Sans，中文字体原生 Android 会命中 Droid Sans Fallback
4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体
其他第三方 Android 系统也一致选择默认的无衬线字体

Базовое взаимодействие

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

a, img {
    -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
}
html, body {
    -webkit-user-select: none;   /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}

user-select

Производительность на мобильных устройствах

Учитывайте производительность на маломощных Android-устройствах и в сценариях с сетью 2G.

Обязательные проверки перед релизом

  • Все изображения должны быть сжаты.
  • Рассмотрите умеренное сжатие с потерями, например преобразование в изображения JPEG с качеством 80%.
  • Рассмотрите возможность разделения больших изображений на несколько меньших, обычно в сценариях, когда изображение баннера слишком большое.

Оптимизируйте производительность загрузки, чтобы обеспечить достаточно быстрое открытие.

  • Офлайн-данные: рассмотрите кэширование данных в localStorage.
  • Количество ресурсов первоначального запроса< 4 Примечание!
  • Используйте CSS Sprites или DATAURI для изображений.
  • Избегайте использования @import во внешнем CSS.
  • Рассмотрите встраивание содержимого небольших статических ресурсов.
  • Общий размер первоначально запрошенных ресурсов после gzip< 50kb
  • Оптимизированы ли статические ресурсы (HTML/CSS/JS/IMAGE) и сжаты ли они?
  • Избегайте объединения больших библиотек в бандл.
  • Убедитесь, что на уровне доступа включено Gzip-сжатие.
  • Используйте CSS3 вместо изображений, где это возможно.
  • Ресурсы-изображения за пределами первоначального первого экрана должны загружаться лениво.Примечание!
  • Для одностраничных приложений (SPA) рассмотрите ленивую загрузку бизнес-модулей, не находящихся на первом экране.

Оптимизируйте производительность во время выполнения, чтобы обеспечить плавную работу.

  • Избегайте проблемы задержки клика в iOS 300+ms.Примечание!
  • Кэшируйте выборки DOM и вычисления.
  • Избегайте операций, вызывающих перерисовку страницы.
  • Применяйте debounce к постоянно срабатывающим событиям (scroll/resize), чтобы избежать высокочастотного выполнения.
  • Используйте делегирование событий везде, где возможно, чтобы избежать пакетной привязки событий.
  • Используйте анимации CSS3 вместо анимаций JS.
  • Избегайте использования большого количества градиентов CSS3 и эффектов теней на маломощных устройствах; рассмотрите упрощённые эффекты для повышения плавности.
  • Держите иерархию HTML-структуры достаточно простой; рекомендуется не превышать 5 уровней.
  • Используйте продвинутые селекторы CSS и универсальные селекторы как можно реже.
  • Сохраняйте простоту

Руководство по использованию онлайн-инструмента тестирования и оценки производительности

  • ПосетитеGoogle PageSpeed— сайт онлайн-оценки.
  • Введите целевой URL-адрес в адресной строке, нажмите кнопку Analyze, чтобы начать тестирование.
  • Оптимизируйте согласно рекомендациям, полученным в результате анализа PageSpeed, и в первую очередь устраняйте проблемы из красной категории.

Источник: http://www.zjgsq.com/1339.html