Les recommandations de spécifications suivantes sont toutes issues de l'expérience résumée et affinée par Alloyteam au cours du développement quotidien. Ces spécifications se sont révélées efficaces dans des projets réels et sont fortement recommandées.

Paramètres de police

Utilisez des polices sans-serif

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

iOS 4.0+ utilise la police anglaise Helvetica Neue, et les versions iOS antérieures reviennent à Helvetica. La police chinoise est définie sur STHeiTi. Il convient de noter que STHeiTi n'existe pas dans la bibliothèque de polices iOS (http://support.apple.com/kb/HT5484?viewlocale=en_US), mais le système associera automatiquement STHeiTi à la police chinoise par défaut du système, Heiti Simplified ou Heiti Traditional.

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

Sur Android natif, les polices chinoises et anglaises doivent toutes deux utiliser la police sans-serif par défaut.

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

Interaction de base

Définissez des styles CSS globaux pour éviter le menu contextuel d'appui long et le comportement de sélection de texte illustrés dans la figure.

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

user-select

Performances mobiles

Tenez compte des performances sur les appareils Android d'entrée de gamme et dans les scénarios de réseau 2G.

Vérifications obligatoires avant publication

  • Toutes les images doivent être compressées.
  • Envisagez une compression avec pertes modérée, par exemple en convertissant les images au format JPEG à 80% de qualité.
  • Envisagez de découper les grandes images en plusieurs images plus petites, généralement dans les cas où l'image de bannière est trop grande.

Optimisez les performances de chargement pour obtenir une ouverture suffisamment rapide.

  • Données hors ligne : envisagez de mettre en cache les données dans localStorage.
  • Nombre de ressources demandées initialement< 4 Remarque !
  • Utilisez CSS Sprites ou DATAURI pour les images.
  • Évitez d'utiliser @import dans le CSS externe.
  • Envisagez d'intégrer en ligne le contenu des petites ressources statiques.
  • Taille totale des ressources demandées initialement après gzip< 50kb
  • Les ressources statiques (HTML/CSS/JS/IMAGE) sont-elles optimisées et compressées ?
  • Évitez d'empaqueter de grandes bibliothèques.
  • Assurez-vous que la compression Gzip est activée au niveau de la couche d'accès.
  • Utilisez CSS3 au lieu d'images lorsque c'est possible.
  • Les ressources d'images en dehors du premier écran initial doivent être chargées en différé.Remarque !
  • Pour les applications monopages (SPA), envisagez le chargement différé des modules métier qui ne sont pas sur le premier écran.

Optimisez les performances d'exécution pour obtenir des opérations fluides.

  • Évitez le problème de délai de clic de 300+ms sur iOS.Remarque !
  • Mettez en cache les sélections DOM et les calculs.
  • Évitez les opérations qui déclenchent des réaffichages de page.
  • Appliquez un debounce aux événements déclenchés en continu (scroll/resize) afin d'éviter une exécution à haute fréquence.
  • Utilisez la délégation d'événements autant que possible pour éviter la liaison groupée des événements.
  • Utilisez les animations CSS3 au lieu des animations JS.
  • Évitez d'utiliser un grand nombre de dégradés CSS3 et d'effets d'ombre sur les appareils bas de gamme ; envisagez des effets de repli pour améliorer la fluidité.
  • Gardez une hiérarchie de structure HTML suffisamment simple ; il est recommandé de ne pas dépasser 5 niveaux.
  • Utilisez le moins possible les sélecteurs avancés CSS et les sélecteurs universels.
  • Restez simple

Guide d'utilisation de l'outil en ligne de test et d'évaluation des performances

  • Visitez le site d'évaluation en ligneGoogle PageSpeedOnline evaluation website
  • Saisissez l'adresse URL cible dans la barre d'adresse, cliquez sur le bouton Analyser pour lancer le test.
  • Optimisez en fonction des suggestions analysées par PageSpeed, et priorisez la résolution des problèmes de la catégorie rouge.

Source : http://www.zjgsq.com/1339.html