Comment réaliser un développement mobile haute performance

Comme nous le savons tous, les terminaux mobiles doivent non seulement se charger rapidement, mais également proposer du contenu sans expérience utilisateur. Ils doivent également fonctionner de manière fluide, comme des interactions à réponse rapide et des animations fluides...

. Comment obtenir les effets ci-dessus dans le développement réel ?

1. Confirmer les normes d'analyse des performances de rendu

2. Préparez une règle pour mesurer les normes de performances de rendu

3. Optimisez les zones les plus chronophages

.

Nous pouvons grossièrement obtenir les objectifs d'optimisation suivants

Le premier est le premier moment de présentation à l'écran en ligne. les informations ont Il existe de très nombreux codes compressés, utilisent des images Webp, utilisent des sprites, un chargement à la demande, une "sortie directe", un CDN...

Le second est l'optimisation de 16 ms. Cet article se concentre sur 16 ms. optimisation.

1. Rendu du navigateur Introduction au principe

La fréquence de rafraîchissement de la plupart des appareils est de 60 fois/seconde, (1000/60 = 16,6 ms) Autrement dit, le rendu de chaque frame par le navigateur doit être terminé dans un délai de 16 ms. Au-delà de ce délai, le rendu de la page sera bloqué, affectant l'expérience utilisateur.

C'est ce qui est montré dans l'image ci-dessus

Si l'attribut est modifié plus à gauche dans l'image ci-dessus, l'impact. sera plus grand et l’efficacité sera plus faible.

Le processus de rendu du navigateur est le suivant :

Récupérez le DOM et divisez-le en plusieurs calques (RenderLayer)

Rasterisez chaque calque et dessinez-le indépendamment Dans le bitmap,

téléchargez ces bitmaps sous forme de textures sur le GPU

pour combiner plusieurs calques afin de générer l'image d'écran finale (couche ultime).

Comme vous pouvez le voir sur l'image ci-dessus, si vous changez simplement le composite (fusion des calques de rendu), l'efficacité sera grandement améliorée.

Ce qui suit est une liste approximative des styles qui modifieront quel module du processus de rendu.

Comme vous pouvez le voir sur l'image ci-dessus, la transformation et l'opacité ne changeront que le composite (fusion des calques de rendu). Pourquoi ? Parce que l'accélération GPU est activée.

Activer l'accélération GPU

Explication littérale : les textures peuvent être mappées à différents emplacements à un coût très faible, et elles peuvent également être mappées à une transformation très simple en une grille rectangulaire.

[L'interprétation littérale est très alambiquée, mais c'est toujours la même vieille vérité. N'utilisez pas de mots si vous pouvez l'expliquer clairement avec des images. 】

Conseils : Sélectionnez d'abord une image de la timeline, puis sélectionnez l'onglet d'étiquette de calque ci-dessous, vous pouvez faire glisser le module vers la gauche et la droite pour apparaître en 3D

On peut voir que la page est composée des calques suivants :

Bien que ce que l'on finit par voir sur le navigateur ne soit qu'une photocopie, c'est à dire qu'il n'y a qu'un seul calque au final. Semblable au concept de "calque" dans le logiciel PhotoShop, tous les calques de vue disponibles sont finalement fusionnés et une image est affichée à l'écran

Mais en fait, une page sera Étant donné que certaines règles sont divisées en couches correspondantes, une fois indépendantes, elles n'affecteront pas la disposition des autres DOM, car une fois modifiées, elles sont uniquement "collées" sur la page.

Actuellement, les facteurs suivants amèneront Chrome à créer des calques :

Transformation 3D ou perspective (transformation de perspective) Propriétés CSS

Utilisez l'élément

d'éléments avec contexte 3D (WebGL) ou contexte 2D accéléré

Plugins hybrides (tels que Flash)

Faites des animations CSS sur votre propre opacité ou utilisez un élément transformé en webkit d'animation

a un CSS accéléré filtre élément

l'élément a un nœud descendant qui contient une couche composite (en d'autres termes, un élément a un élément enfant, l'élément enfant est dans son propre calque)

L'élément a un élément frère avec un z-index inférieur et contient un calque composite (en d'autres termes, l'élément est rendu au-dessus du calque composite)

Dans les navigateurs basés sur webkit, si la situation ci-dessus se produit, une couche indépendante sera créée.

Veillez à ne pas créer trop de couches de rendu, ce qui signifie une nouvelle allocation de mémoire et une gestion des couches plus complexe. N'abusez pas de l'accélération GPU, faites attention à ce que les mises en page composites dépassent 16 ms

Cela dit tant de principes de rendu par navigateur, il est inutile de mesurer sans règle. Alors choisissons une règle à mesurer : la chronologie des outils de développement de Google.

2. Fonctions communes de l'outil de développement Google Timeline

1. Après avoir cliqué sur Enregistrer dans le coin supérieur gauche, l'enregistrement se termine. Ce qui suit sera généré. La zone rouge est l'image Montez et vous pouvez voir la fréquence de chaque image. Si elle est > 60 ips, elle est relativement fluide.

2. Sous la chronologie, vous pouvez voir la consommation de temps de chaque module, et vous pouvez localiser le temps- ceux qui consomment Au-dessus de la fonction, optimisez la fonction.

3. Suivez les étapes ci-dessous pour sélectionner et vous pourrez voir le calque indépendant et mettre en surbrillance la zone redessinée, qui est. pratique Trouvez les zones de redessinage inutiles et optimisez-les

Après sélection, les 2 bordures de couleurs suivantes apparaîtront sur la page actuelle

bordure jaune : Les éléments avec des transformations 3D animées sont placés dans un nouveau calque composite (calque composé) pour restituer

grille bleue : Ces blocs peuvent être considérés comme des unités à un niveau inférieur au calque, Chrome Prenant ces morceaux comme unités, le le contenu d'un morceau est téléchargé sur le GPU à la fois.

Des outils sont également disponibles, et les principes de rendu du navigateur sont également connus. La prochaine étape consiste à optimiser en fonction de projets réels.

3. projets réels optimisation de 16,6 ms

Combiné avec l'organigramme de rendu ci-dessus, nous pouvons analyser et optimiser certaines des étapes suivantes de manière ciblée

Optimiser l'efficacité d'exécution de JavaScript

Réduisez la portée et la complexité du calcul de style

Évitez les mises en page complexes et à grande échelle

Simplifiez la complexité du dessin et réduisez la zone de dessin

Prioriser l'utilisation des couches de rendu pour fusionner les attributs, Nombre de couches de contrôle

Fonction de traitement anti-rebond pour les événements de saisie utilisateur (appareils mobiles)

1. séparation d'écriture, opérations par lots

Lorsque le script JavaScript est en cours d'exécution, les valeurs d'attribut de style d'élément qu'il peut obtenir proviennent toutes du cadre précédent et ce sont toutes d'anciennes valeurs.

Par conséquent, si vous apportez des modifications au nœud de l'élément avant d'obtenir les attributs dans le cadre actuel, le navigateur appliquera d'abord les modifications d'attribut, puis exécutera le processus de mise en page et enfin exécutera la logique JavaScript.

// 先写后读，触发强制布局
function logBoxHeight() {
    // 更新box样式
    box.classList.add('super-big');
 
    // 为了返回box的offersetHeight值
    // 浏览器必须先应用属性修改，接着执行布局过程
    console.log(box.offsetHeight);
}

Après optimisation :

// 先读后写，避免强制布局
function logBoxHeight() {
    // 获取box.offsetHeight
    console.log(box.offsetHeight);
 
    // 更新box样式
    box.classList.add('super-big');
}

2. Résultats du calcul du cache de fermeture (fonctions qui nécessitent des appels et des calculs fréquents)

getMaxWidth: (function () {
            var cache = {};
            function getwidth() {
                if (maxWidth in cache) {
                    return cache[maxWidth];
                }
                var target = this.node,
                 width = this.width,
                  screen = document.body.clientWidth,
                   num = target.length,
                  maxWidth = num * width + 10 * num + 20 - screen;
                cache[maxWidth] = maxWidth;
                 return maxWidth;
             }
             return getwidth;
})(),

Après avoir changé cette méthode, cela fonctionne tout simplement ~ Cela réduit de plus de 10 ms

Anti-rebond de la fonction de traitement des événements d'entrée utilisateur

Si l'élément touché est lié à une fonction d'entrée de traitement d'événements , telle que touchstart/touchmove/touchend, alors le thread de fusion de la couche de rendu doit attendre que ces fonctions de traitement liées se terminent avant l'exécution. l'opération de défilement de la page de l'utilisateur est bloquée et le comportement affiché est que le défilement est retardé ou bloqué.

En bref, vous devez vous assurer que toute fonction de traitement liée à l'événement d'entrée utilisateur peut être exécutée rapidement afin de libérer du temps pour que le thread de fusion de la couche de rendu termine son travail.

Les fonctions de traitement des événements d'entrée, telles que le traitement des événements de défilement/toucher, seront appelées et exécutées avant requestAnimationFrame. Par conséquent, si vous modifiez les attributs de style dans le gestionnaire d'événements d'entrée ci-dessus, ces opérations seront temporairement stockées par le navigateur.

Ensuite, lors de l'appel de requestAnimationFrame, si vous lisez les attributs de style au début, cela déclenchera l'opération de mise en page de synchronisation forcée du navigateur (c'est-à-dire effectuer la mise en page au stade javascript), donc cela entraînera plusieurs mises en page et une faible efficacité.

L'optimisation est la suivante :

window.requestAnimationFrame(function () {
    context.animateTo(nowPos);  //需要更新位置的交给RAF
});

4. Réduire les redessinages inutiles

En continuant de ce qui précède, après avoir activé la peinture. clignotant, vous pouvez voir quelles zones le navigateur repeint. J'ai constaté que certaines zones de redessinage inutiles étaient également redessinées~ Activer l'optimisation GPU pour celles-ci (mentionnées ci-dessus)

Regardez directement l'effet de timeline, tout est vert~ J'ai enfin laissé tomber mes soucis

Il existe de nombreux conseils pour le développement mobile Aujourd'hui, je vais vous apporter cette astuce de développement haute performance. Plus Pour plus de connaissances, s'il vous plaît. continuez à prêter attention à notre site Web PHP.cn

Lecture connexe :

Le développement de terminaux mobiles gère les écrans horizontaux et verticaux des appareils mobiles

Connaissances essentielles pour le développement de terminaux mobiles (réimprimé)_html/css_WEB-ITnose

Quelques conseils pour le développement mobile_html/css_WEB-ITnose

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!