Résumé des pratiques d'optimisation de la fluidité des fluides

sum des pratiques optimisation la

d25b97a6e82171fda0b3d98d583c5029.gif

Le contenu de cet article provient deArchSummitPartage des réunions

Présentation de l'auteur:

Zhang Yunlong(Des nuages),Free Fish client expert.A Netease successivement、Octets、Alibaba R & D mobile end.Actuellement au Département technique des poissons libres d'Alibaba,Actuellement responsable du poisson de loisir app Taille du paquet、Fluidité、Démarrer le contenu de l'expérience de bout en bout.

“Autour de Flutter Optimisation de la sensation corporelle de fluidité,Partager les défis、Construction d'outils de surveillance en ligne et hors ligne、Optimisation des moyens de précipitation dans les conteneurs de composants,Enfin, des suggestions d'optimisation sont présentées.."

Aperçu général

9466c2cfb21cdcc76ad348ca4befd709.png

Ce partage tourne autour de flutter Fluidité,Dis - le séparément.:1.Flutter Défis d'optimisation de la fluidité;2.Liste des conteneurs et FlutterDx Optimisation des composants;3.Mesure du rendement et devtool Extension;4.Flutter Optimisation de la courbe de glissement;5.Recommandations d'optimisation des performances.

Flutter Défis d'optimisation de la fluidité

  Défis liés à la complexité des opérations

61619f0133ead6acc9d1a12faaa7577f.png

Flutter A été reconnu pour sa haute performance,Flutter Gallery(La figure de gauche montre)Contrôles de liste affichés,Et très fluide.Mais le scénario d'affaires réel(La figure de droite montre)Que Gallery Liste demo C'est beaucoup plus compliqué:

  1. Même carte,Plus et plus complexe(Comme un filet)Contrôles de vue pour;

  2. Lorsque la liste défile,Il y a plus de logique de vue,Comme le contrôle de défilement d'autres commandes pour ramper et disparaître;

  3. Contrôle des cartes,Il y a aussi plus de logique d'entreprise,Si différentes étiquettes sont contrôlées en fonction des données de fond、Prix de l'événement, etc,Il y a aussi une logique d'entreprise commune comme le point d'enfouissement;

  4. Parce que le poisson libre est le commerce électronique App,Nous avons donc besoin d'une capacité dynamique pour faire face à des activités fréquentes et changeantes..Ici, nous utilisons l'auto - étude d'Ali Flutter DynamicX Les composants permettent nos capacités dynamiques.

  Défis liés à la mise en oeuvre du cadre

17a10fa69cf9e7ebfc385eabb0824bdd.png

Revenons à l'ensemble du processus de défilement de la liste,Il ne s'agit que de la phase de défilement libre après le relâchement du doigt..

  1. Quand le doigt est desserré,Basé sur ScrollDragController.end Calculer la vitesse initiale;

  2. UI Thread Vers Platform Thread Demande requestFrame,In Platform Thread Bien reçu. Vsync Information,Alors UI Thread Appelez beginFrame;

  3. UI Thread Animate La liste des déclencheurs de phase glisse un peu plus loin,Simultanément Platform Thread Enregistrer le prochain rappel de cadre;

  4. UI Thread Build Widget,Encore une fois. Flutter Trois arbres Diff Génération d'algorithmes/Mise à jour RenderObject Arbre;

  5. UI Thread RenderObject Arbre Layout、Paint Générer Scene Objet,Enfin transmis à Raster Thread Pour dessiner l'écran supérieur;

Processus ci - dessus,Il faut 16.6 ms Terminé à l'intérieur,Pour s'assurer que le cadre ne tombe pas.La plupart du temps,Aucune nouvelle carte n'a besoin d'être construite,Mais lorsque la nouvelle carte entre dans la zone de liste,Tout le calcul devient énorme.,Surtout dans des scénarios d'affaires complexes,Comment s'assurer que dans un cadre 16.6ms Tous les calculs sont effectués à l'intérieur,Ce n'est pas un petit défi.

a1b15255076d2df68e47e0d23f64419b.png

L'image ci - dessus est un glissement devtool Exemple,La phase de carton se produit lorsque de nouvelles cartes sont affichées à l'écran,Les autres étapes sont très fluides,Parce que la vitesse de roulement diminue,Donc l'espacement entre les cartons augmente aussi..Parce que la plupart du temps c'est fluide,Donc la moyenne FPS Pas bas.Mais l'écran de génération de la nouvelle carte s'arrête pendant la construction,Ce qui nous donne une sensation de corps cartonné est évident.

  Le défi de la capacité dynamique - Flutter DynamicX

28214f535d6804780c8ec6341582e0b9.png

Poissons oisifs App Auto - étude de l'utilisation des cartes Flutter DynamicX Pour soutenir nos capacités dynamiques.Justification:Modifier la mise en page en ligne DSL,Générer dx Document et distribution.Analyse du passage latéral dx Documentation,Et combiner les données de la carte de fond,Générer DXComponentWidget,Enfin généré Widget Tree.Flutter DynamicX La capacité de la technologie à apporter des mises à jour dynamiques aux poissons oisifs,Capacité de surveillance unifiée(Comme dans DXComponentWidget Surveiller la création de cartes),Bon sens du corps(En ligne DSL Et Android Layout Essentiellement cohérent,C'est exact. Android Optimisation du développement),Capacité d'édition en ligne;

Mais en termes de performance,Nous avons aussi payé un certain prix:DX Augmentation des frais généraux de chargement des modèles et de liaison des données par rapport aux cartes,Widget Pour passer WidgetNode Itération récursive création dynamique,Les niveaux de nidification de la vue sont plus profonds(Suite de l'histoire).

Description:Flutter DynamicX Référence Groupe Ali DSL Mise en œuvre des règles

  Le défi du sens du corps de l'utilisateur

bdf812ffa0779373fb4cf471231197ec.png

Comme nous l'avons déjà dit,Même chose. FPS En bas.,Flutter La liste est plus cationique;

In Android RecycleView Il y a eu un petit katon.(16.6*2ms)Heure,La somatosensorie n'est pas évidente.,Et Flutter La liste s'affiche au moment où la carte se produit,Non seulement le temps s'arrête,Glissez Offset Il y a eu un saut aussi,C'est pour ça que le corps de Little catton est devenu évident.;

Supposons que le contenu de la liste soit assez simple,Il n'y aura pas de blocage,On a aussi trouvé Flutter Liste et Android RecycleView Et c'est différent:

  1. Utiliser ClampingScrollPhysics,Quand la liste s'arrête,Vous sentirez la sensation d'un aimant.

  2. Utiliser BouncingScrollPhysics,Au début du défilement de la liste,La vitesse diminue plus rapidement;

In 90hz Sur la machine,Début Flutter La liste n'est pas fluide,La raison en est que sur certaines machines,Le taux d'échantillonnage tactile est 120hz,Le taux de rafraîchissement de l'écran est 90hz,Ce qui fait que certaines parties de l'image sont 2 Événements tactiles secondaires,En partie 1 Événements tactiles secondaires,Et finalement faire défiler offset Un saut s'est produit.In Flutter 1.22 Version,Peut être utilisé resamplingEnabled Rééchantillonnage des événements tactiles.

Liste des conteneurs etFlutterDxOptimisation des composants

f3efc7c890ab87c7564829ad8c20087e.png

Ça raconte Flutter Le défi de l'optimisation de la fluidité,Maintenant, partagez comment les poissons libres peuvent optimiser la fluidité,Et précipité dans PowerScrollView Et Flutter Dynamic Components.

▐  PowerScrollView Conception et optimisation des performances

bd1653950b75c52a42c046dd58c0e55f.png

PowerScrollView C'est l'équipe des poissons libres qui étudie Flutter Éléments de la Liste,In Sliver Le Protocole est mieux encapsulé et complété:Ajout, suppression et modification de données,Rafraîchissement partiel complété;En termes de mise en page,Compléter le flux de chute d'eau;En termes d'événements,Ajout d'un écran sur la carte、Hors écran、Faire défiler les événements;Contrôle,Ajout d'un défilement vers index Capacité de.

En termes de performance,Compléter l'optimisation de la disposition des chutes d'eau、Optimisation locale de rafraîchissement、Optimisation du cadre de la carte et optimisation de la courbe de glissement.

▐  PowerScrollView Disposition des chutes d'eau

95953b2377a18a722f9f9937b0494fb0.png

PowerScrollView La disposition des chutes d'eau offre une disposition longitudinale、Disposition transversale、Disposition mixte(Mélange de cartes horizontales et de cartes ordinaires).La plupart des pages de la liste des poissons libres sont maintenant PowerScrollView Disposition des chutes d'eau,Comme la page d'accueil de la ville、Page des résultats de recherche, etc.

▐  PowerScrollView Optimisation de la disposition des cascades

96155e9a476cf14847de92be05383b8a.png

D'abord par l'optimisation régulière du cache,Cache le coin supérieur gauche de chaque carte x La valeur et à quelle colonne appartient.


Comparé à SliverGrid Les cartes sont entrées côte à côte dans la zone de liste,Et la disposition des chutes d'eau,Nous devons définir Page,La création de cartes d'entrée et la destruction hors site nécessitent: Page En unités.Avant optimisation,Page Calculer la carte dans la zone visible de l'écran,Et pour être sûr Page Point de départ Y Valeur,La disposition primaire doit être calculée Page N Et N+1 2 pages,Il y a donc plus de cartes impliquées dans le calcul de la mise en page,Baisse des performances.Après optimisation,Calculé à l'aide d'une approximation de la moyenne de toutes les hauteurs de carte Page,Réduire considérablement le nombre de cartes de mise en page participantes,En même temps Page Le nombre de cartes détruites hors site a également diminué.

ccdf437392f542ee81925ea36c0820b8.png

Mise en cache des colonnes et optimisation de la pagination,Utiliser des poissons libres pour l'auto - étude benchmark Outils(Présentation ultérieure)Comparer les chutes d'eau avec GridView,Temps nécessaire pour voir le nombre de cadres manquants et le pire,Les performances sont essentiellement cohérentes.

▐  PowerScrollView Optimisation locale de rafraîchissement

54da386f112f18f52d2f18367c1036ac.png

Les produits de poisson libre s'attendent à ce que les utilisateurs naviguent plus facilement sur les produits,Ne sera pas loadmore Chargement des ruptures,Donc la liste doit être déclenchée pendant le défilement loadmore.Flutter SliverList In loadmore Lorsque vous Complétez les données de la carte,Oui. List Le contrôle est sale,Et après que la marque soit sale SliverList build Toutes les cartes sont détruites et recréées,En ce moment, les données sur le rendement sont très mauvaises..PowerScrollView Optimisation de la mise en page fournie:Cache toutes les cartes à l'écran,Ne Recréez plus,UI Thread Ça prend du temps. 34ms Optimisé pour 6ms(Voir en bas à gauche),Vue à droite Timeline,La profondeur et la complexité de la construction de la vue sont évidemment optimisées.

▐  PowerScrollView Optimisation du cadre de carte

52c2f3026b3a2125f3742992c13e8e77.png

A gauche2Les cartes sont la page des résultats des premières recherches de poissons libres,Ce n'était pas une chute d'eau.Voir quand la carte a été créée Timeline Fig.(Ajouté Dx Widget Création Et PerformLayout Dépenses),Vous pouvez trouver que la création de cartes est extrêmement complexe à la fois,Sur les machines moyennes ordinaires,UI Thread Le temps presse 30ms,Pour optimiser à 16.6ms À l'intérieur,Il est difficile d'utiliser des méthodes d'optimisation conventionnelles.Imagine ça 2 Si les cartes peuvent être démontées,Utiliser séparément 1 L'heure du cadre à rendre.

9e708e78a20d69ee8ed9a79a4b1790c8.png

Regardez directement le code source,L'idée de base est:Sur la carte Widget Marquer,Lorsque la carte de gauche est réellement créée,La carte de droite d'abord. _buildPlaceholderCell Construire une place Widget(Vide Container),Et s'inscrire pour écouter le prochain cadre.Au cadre suivant,Modifier la carte de droite needShowRealCell Pour true,Et se salir.,Construire le contenu réel après.

Retarder la construction du contenu réel de la carte,Affecte - t - il le contenu de l'affichage??Parce que Flutter La liste est également disponible en haut et en bas de la zone de visualisation CacheExtends Région,Les utilisateurs de cette zone ne sont pas visibles.Pour cela, dans la plupart des scénarios,,L'utilisateur ne voit pas la scène d'une carte vierge.

Même chose. Flutter BenchMark Outils pour les tests de performance,Vous pouvez voir la carte avant et après le cadrage 90Sous - position,99Il y a une dégradation significative du temps de décapage du cadre,Le nombre de cadres perdus est également passé de 39 Réduit à 27

Attention ici,En écoutant le cadre suivant,Besoin WidgetsBinding.instance.scheduleFrame() Déclencheur requestFrame.Parce que lorsque le premier écran de la liste est affiché,Probablement parce qu'il n'y a pas de rappel pour le cadre suivant,La tâche qui a causé le retard de la file d'attente d'affichage n'a pas été exécutée,Finalement, le contenu du premier écran n'est pas affiché correctement.

▐  Retard Idées et suggestions d'optimisation des cadres

b5a417f9a3ebc0faae70aae8e61d0c46.png

Comparer Flutter Et H5 La conception est assez proche:

  1. dart Et js Ce sont des modèles monothreadés,La communication entre Threads nécessite une sérialisation et une désrialisation;

  2. Flutter Widget Et H5 vDom Similaire,Il y en a un Diff Processus.

Début FaceBook In React Lors de l'optimisation,J'ai proposé Fiber Architecture:Basé sur vDom tree Parent de→Sous - noeud→Noeud frère→Comment les noeuds enfants,Oui. vDom tree Convertir en fiber Structure des données(Structure de la chaîne),Et ainsi de suite reconcile Phase interruptible récupérable;Basé sur fiber Structure des données,Section du contrôle fiber Le noeud continue au cadre suivant.

Basé sur React Fiber Idées,Nous proposons notre propre optimisation de la segmentation des délais,Pas seulement la taille des cartes à gauche et à droite,Aller plus loin,Démonter le contenu rendu en tant que tâche de cadre courante、Tâches à haut délai et tâches à faible délai,La priorité de l'écran supérieur diminue à son tour.Où la tâche actuelle du cadre,Oui, à gauche et à droite. 2 Un blanc Container;Un cadre exclusif pour les tâches de retard de haute qualité,La section image est également utilisée Container Place;Dans une scène de poisson libre,On a tout DX Image Widget Démonter de la carte,Comme une tâche à faible latence,Et de ne pas consommer plus de 10 - Oui..

Par 1 Tâche d'affichage du cadre démontée à 4 Frame time,Haut de gamme UI Temps écoulé depuis 18ms Optimisé pour 8ms.

Description1:Dans différents scénarios d'affaires,Les tâches de haut niveau et de bas niveau sont définies différemment Description2:Dans le bas de gamme(Par exemple: vivo Y67)Glissez sur la liste rapide ci - dessus,Le schéma de cadrage permet à l'utilisateur de voir comment la liste devient blanche et le contenu est affiché à l'écran.


▐  Flutter-DynamicXOptimisation des composants-Explication détaillée du principe

2156a70459af03c9fc2b17609d2f41dc.png

Édition en ligne“Catégorie Android Layout DSL”,Compiler pour générer des binaires dx Documentation.Téléchargement final par fichier、Chargement et résolution,Générer WidgetNode Tree,Voir à droite.

3bbd2f87ac161d71d7ac0d9584b9a8c7.png

Plus tard, en combinaison avec les données d'affaires distribuées en arrière - plan,Traversée récursive WidgetNode Tree Génération dynamique Widget Tree,Affichage final de l'écran supérieur.

Description:Flutter DynamicX Référence Groupe Ali DSL Mise en œuvre des règles

▐  Flutter-DynamicXOptimisation des composants-Optimisation du cache

77e55a272ae5a13618f270361d7dcae8.png

J'ai compris le principe.,Il est facile de trouver le flux dans la boîte rouge ci - dessus:Binaire(Modèle)Montage de résolution de fichiers、Liaison des données、Widget Il y a des frais généraux pour la création dynamique.Pour éviter les dépenses répétées,Nous sommes d'accord avec DxWidgetNode Et DxWidget Tous mis en cache,Le Code bleu montre Widget Cache.

▐  Flutter-DynamicXOptimisation des composants-Indépendance isolate Optimisation

60fe7184b640c3654554fdeb40975774.png

En outre,Placer la logique ci - dessus sur une base autonome isolate Moyenne,Réduire au minimum les frais généraux.En passant par les niveaux de gris techniques en ligne AB L'expérience,L'échelle moyenne des mauvais cadres de capture est de 2.21% Réduit à 1.79%.

▐  Flutter-DynamicXOptimisation des composants-Optimisation hiérarchique

5b1dbcd5fd60633fd115c544691624ce.png

Flutter DynamicX Classe fournie Android Layout DSL,Pour réaliser chaque contrôle padding、margin、corner Propriétés égales,Ajouté Decoration Couche;Pour la classe d'implémentation Android FrameLayout、LinearLayout Capacité de mise en page,Ajouté DXContainerRender Couche.Chaque niveau a ses propres responsabilités claires,La hiérarchie des codes est claire.Mais aussi à cause de l'augmentation 2 La couche provoque Widget Tree La hiérarchie s'approfondit,3Un arbre Diff La logique devient compliquée,Baisse des performances.À cette fin,,On va Decoration Couche et DXContainerRender Les couches sont fusionnées,Voir le milieu Timeline Fig.,On constate que le niveau et la complexité de la couche de flamme optimisée diminuent..En passant par les niveaux de gris techniques en ligne AB L'expérience,L'échelle moyenne des mauvais cadres de capture est de 2.11% Réduit à 1.93%.

Mesure du rendement etdevtoolExtension

Les moyens d'optimisation,Voici comment mesurer notre performance de fluidité,Et la construction d'outils/Extension.

bb98e79c6304ebbf9707ebd226e51be7.png

▐  Ligne Scène inférieure -flutter benchmark

3faf4482d27ee5e126361a04a06acde3.png

ff71b0261d891c62e49dda3b1b4bfbac.png

Détection Flutter Chaque image prend du temps,Statistiques requises UI Thread Et Raster Thread Le calcul sur prend du temps.Alors... Flutter Comparaison avant et après optimisation,Utiliser SchedulerBinding.instance.addTimingsCallback Obtenir chaque image UI Thread Et Raster Thread Données sur le temps écoulé.


En outre,Les valeurs de performance de fluidité sont soumises à des gestes de fonctionnement、Influence de la vitesse de roulement,Il y a donc des erreurs dans les résultats de mesure basés sur le fonctionnement manuel..Utilisez ici WidgetController Contrôle de la liste de contrôle fling.

Fourniture d'outils pour définir la vitesse de défilement、Nombre de rouleaux、Intervalle entre les rouleaux, etc..Une fois le test de roulis terminé,Afficher UI Et Raster Thread Nombre de cadres perdus,50Sous - position、90Sous - position、99Données telles que le temps de trame fractionné,Les données de performance sont présentées à partir de plusieurs dimensions.

▐  Ligne Scène inférieure -Détection de la fluidité basée sur l'enregistrement de l'écran

0b8f5b1587df99512b437e62e215d105.png

flutter benchmark In flutter La page présente les mesures multidimensionnelles,Mais parfois, nous avons besoin d'une comparaison horizontale App,Nous avons donc besoin d'outils pour comparer horizontalement la fluidité des pages des différentes piles technologiques..Le poisson libre est là. Android Détection de fluidité basée sur les données d'enregistrement de l'écran.Imaginez l'interface Mobile comme plusieurs images,Par le Service d'enregistrement du système MediaProjection Inscrivez - vous pour obtenir VirtualDisplay,Intervalle 16.6 msLire les données de l'image(Tableau d'octets),Voici le tableau des octets hash La valeur représente l'image courante,Après le courant 2 Lecture secondaire hash Valeur constante,On pense qu'il y a eu un katon.

Pour garantir l'outil de contrôle de la fluidité appIl n'y a pas de blocage en soi,Les données de l'image compressée sont lues ici,Le rapport de compression sur le bas de gamme est plus élevé

495e02bf5b8484901a825d082734bdea.png

Passer l'inspection sans intrusion de l'outil,Un test de roulis peut être détecté,Moyenne FPS Valeur(Dans la figure 57),Variance carrée moyenne de la distribution des cadres(7.28),1s Nombre moyen de grands cartons dans le temps(0.306),Grand temps accumulé(27.919).Le tableau intermédiaire montre la distribution des cadres:371 Représente le nombre normal de cadres,6 Représentant 16.62ms Nombre de petits cartons,1 Représentant 16.63ms Le nombre de cartons.

La définition du grand katon ici est:Plus grand que 16.6*2 ms Katon.

▐  Hors ligneScénario-Basé surdevtoolTest de performance pour

3e228cbfc6dc3e7601cee321a611ab64.png

En outre,La scène hors ligne a également été élargie. devtool.Une fois Timeline Le graphique prolonge le temps consacré à chaque phase,Plus grand que 16.6ms Mise en évidence rouge,Facile à développer et à utiliser.


▐   Hors ligne. Vue-FlutterTests à haute disponibilitéFPSPrincipe de réalisation

704edf35c0f0da33616ecd23e2864820.png


Scénario en ligne,Les poissons oisifs ont fait leurs propres recherches Flutter Haute disponibilité.La raison d'être est basée sur2Événements:

  • ui.window.onBeginFrame Événements

    • engine Notification Vysnc Le signal arrive,Notification UI Thread Commencez à préparer la prochaine construction d'image  

    • Déclencheur SchedulerBinding.handleBeginFrame Rappel

  • ui.window.onDrawFrame Événements

    • engine Notification UI Thread Commencez à dessiner l'image suivante

    • DéclencheurSchedulerBinding.handleDrawFrame Rappel

Ici, on est handleBeginFrame Avant le traitement,Enregistrer un événement de démarrage de cadre,In handleDrawFrame Enregistrer ensuite la fin d'un cadre.Le contrôle de la liste de calcul est nécessaire pour chaque image ici offset Valeur,Voir la figure de droite pour la mise en œuvre spécifique du Code.Sur l'ensemble de l'accumulation au - delà de 1s Heure,Effectuer un calcul,Utiliser offset Filtrer les scènes sans défilement,Calcul du temps à l'aide de chaque cadre fps Valeur.

▐  En ligneScénario-FlutterBlockCanaryDétection de la pile de serrage en ligne

11818579d612cdb6242e6ad151a331e5.png

Utiliser Flutter Calcul très disponible en ligne FPS Après la valeur,Comment localiser le problème de blocage,Besoin de recueillir des informations sur la pile.Les poissons oisifs utilisent l'auto - étude FlutterBlockCanary Collecte de la pile de carton.La raison d'être est,In C Signal de transmission du scrutin de couche,Par exemple, 5ms Une fois.,Chaque fois que la réception du signal est déclenchée dart UI Thread Collection Stack,Agrégation d'une série de piles résultantes,Plusieurs fois de suite, la même pile est considérée comme un blocage,Cette pile est la pile de carton que nous voulons.


L'image ci - dessus est FlutterBlockCanary Informations collectées sur la pile,Au milieu FrameFpsRecorder.getScrollOffset C'est l'appel de Carlton..

▐  Ligne Scène supérieure -FlutterBlockCanaryDétecter le rendu excessif

2566ccd392cf3ce2f7d3974e06803613.png

En outre,FlutterBlockCanary La capacité de détection de rendu excessif est également intégrée.Par réplication WidgetsFlutterBinding De buildOwner Remplacement des méthodes BuildOwner Objet,Et réécrire scheduleBuildFor Méthodes,Intercepter la saleté element.Basé sur la saleté element Noeud,Profondeur d'extraction des noeuds sales、Nombre de noeuds enfants directs、Nombre de tous les noeuds enfants.

Basé sur le nombre total de noeuds enfants,Sur la page détails du poisson libre,Nous avons localisé“Vue rapide des questions”Pendant le défilement,Taches fréquentes marquées et nombre excessif de tous les noeuds enfants.Voir le Code,Localiser le niveau de vue trop élevé,En abaissant la vue au noeud de la feuille,Un standard sale build Nombre de noeuds de 255 Optimisé pour 43.

Flutter Optimisation de la courbe de glissement

Les outils et les normes d'optimisation et de mesure de la cartouche ont été décrits précédemment.,Principalement autour de FPS.Mais à partir du sens de l'utilisateur,Nous avons découvert Flutter Il y a aussi beaucoup de points à optimiser.

a0d98561b201309e65bb309984e085e6.png

  Flutter Liste des courbes de glissement et des courbes natives


fa88ffed08382a64861a9ffcb5aff233.png

Comparer séparément offset/time Courbe de défilement de,On peut le découvrir. Flutter BouncingScrollSimulation EtiOS Courbe de roulement proche,ClampingScrollSimulation Et RecyclerView Approche.Voir Flutter Commentaires sur le code source,Et c'est vrai.

Parce que BouncingScrollSimulation Capable de rebondir,Donc beaucoup de rafraîchissements déroulants et plus de chargement,Tout est basé sur BouncingScrollSimulation Mise en œuvre de l'encapsulation,Et cela crée Flutter Lorsque la page glisse,Somatosensory and Primary Android Raisons de l'incohérence des pages.

  Flutter Représentation et optimisation de la liste sous glissement rapide

23bb12bf68f1a8b1368aae67e904d516.png

Bien que ClampingScrollSimulation Courbe de glissement et Android RecyclerView Approche,Mais dans une scène de diapositives rapides,On peut le découvrir. Flutter La liste s'arrête presque comme un aimant.,Glissez rapidement pour arrêter.Pourquoi?,Vous pouvez voir le moment où la courbe de glissement s'arrête,La vitesse ne diminue pas,Et ça va accélérer,Enfin à la fin,Arrêt rapide.Basé sur la formule source,Tracer une courbe,On peut le découvrir.,Flutter ClampingScrollSimulation Par ajustement de formule,Pour approcher Android RecyclerView Courbe(BSpline).En cas de glissement rapide,Le point central de la courbe de formule n'est pas 1 La valeur correspondante,Mais l'emplacement de la ligne pointillée à droite,La vitesse va augmenter.

C'est compréhensible. Flutter Le résultat de l'ajustement de la formule n'est pas idéal,Pour cela, il y a eu récemment PR Utilisation proposée dart C'est fait. RecyclerView Courbe.

  Flutter Performance et optimisation de la liste dans le cas de carton

da6d2de0254d3681a8de63ed465f9234.png

La même chose est mentionnée au chapitre 1 FPS Dans les circonstances,Par exemple: FPS 55,La liste Native se sent bien,Et Flutter La liste est plus cationique.Une des raisons en est que les listes natives ont généralement des opérations multithreadées,La probabilité d'un grand katon est plus faible;Une autre raison est,La même Sensation corporelle du petit carton,Flutter Il y a un sentiment évident de saisie,Et la liste Native est à peine perceptible.Alors pourquoi??

Nous construisons des cartes,Créer délibérément le petit carton,Comparaison avant et arrière Flutter Liste et RecyclerView,On peut le découvrir. RecyclerView offset Il n'y a pas de saut,Et Flutter La courbe a beaucoup de bavures,Parce que Flutter Le défilement est basé sur d/t Calcul de la courbe,Quand c'est arrivé à katon,△t Ça a doublé,offset Il y a eu un saut..C'est précisément parce que le temps s'est arrêté et Offset Saut,Laissez l'utilisateur sentir clairement Flutter La liste n'est pas fluide dans Little catton.

82d8614124f6e19f4210c9896a80a19c.png

Adoption de modifications y=d(t) Formule,Dans le cas de katon,Oui.△t-16.6ms,Avec un petit carton garanti,offset Pas de saut.Et dans le cas du grand carton,Il n'est pas nécessaire de △t Réinitialiser à 16.6ms C'est,Parce que pendant la pause,Il est devenu évident que l'utilisateur se sentait comme un katon,offset Ne pas sauter ne fait que raccourcir la Liste.

Recommandations d'optimisation des performances

35f3a0cf293f4fe81a654c66996f3442.pngea7af0d66f7d6f3018d9b641ec11fd25.png

Enfin, partagez quelques suggestions d'optimisation des performances.

  1. Lors de l'optimisation,Nous devrions nous concentrer davantage sur le sens de l'utilisateur,Au lieu de simplement regarder les valeurs de performance.Visible en haut à droite,Même si FPS Même valeur,Mais... offset Un saut s'est produit,Il y aura une différence significative dans le sens du corps.;En bas à droite.2Jeux vidéo,Moyenne à gauche 40 FPS,Moyenne à droite 30 FPS,Mais le côté droit est plus lisse..

  2. Ne pas se concentrer uniquement sur UI Thread Performance,Attention aussi Raster Thread Dépenses,Comme le filet de vue、save layer Caractéristiques équivalentes/Fonctionnement,Ça pourrait aussi causer un katon

  3. En termes d'outils,Il est recommandé d'utiliser différents outils dans différents scénarios.Il est important de noter que,Problèmes de détection des outils,Est - ce un problème de récurrence stable ou un problème de récurrence causé par le Jitter de données?.En outre,Considérez également les frais généraux de performance de l'outil lui - même,L'outil lui - même CPU L'occupation et l'occupation du fil principal doivent être réduites au minimum..

  4. En termes d'optimisation des idées,On va élargir la direction,Flutter La plupart des idées d'optimisation sont des tâches de calcul d'optimisation;Et la direction multithreadée n'est pas non plus impossible,Voir avant Flutter DynamicX Indépendance isolate Optimisation;En outre,Une tâche difficile à digérer dans un cadre de temps,Possibilité de démonter plusieurs cadres,Essayez d'éviter le blocage à chaque image,Réponse prioritaire aux utilisateurs.

  5. Enfin,Préoccupations recommandées Flutter Communauté.Flutter La communauté continue d'avoir une variété d'optimisations,Mise à jour périodique Flutter Ou la version propre de la dimension,cherry-pick Optimiser la soumission,C'est un bon choix..

  Recommandations pour l'utilisation des outils d'analyse du rendement

25f6e486ec93af7b2fea2f187399d56f.png

Flutter Outils,C'est officiel DevTools Outils,À l'intérieur. Timeline Et CPU Les diagrammes de flamme peuvent nous aider à trouver des problèmes;En outre,Flutter Aussi disponible en abondance Debug Flags Aidez - nous à localiser le problème,Familiarisez - vous avec chaque debug Action de commutation,Je crois que cela nous aidera aussi dans notre recherche et développement quotidiens.;En plus des outils officiels,Les journaux de performance sont également de bonnes informations auxiliaires,Comme indiqué dans le coin inférieur droit,Poissons oisifs fish-redux Component Output Task Overhead time in Rolling,Il est facile de voir ce qui s'est passé à ce moment - là..

  Frais généraux propres à l'outil d'analyse du rendement

0c6178e4a274c0ed48ad5839ed3d5bd8.png

Les outils de mesure du rendement ont inévitablement des frais généraux,Mais assurez - vous d'être dans les limites acceptables,Surtout en ligne.Précédemment partagé FlutterBlockCanary Un cas d'outil de détection,J'ai trouvé. FrameFpsRecorder.getScrollOffset Ça prend du temps,Et cette logique est exactement Flutter Rouleau de calcul haute disponibilité Offset.Voir le code source pré - optimisé à droite,Chaque cadre nécessite une collection récursive de traversées RenderViewPortBase,Ce n'est pas une petite dépense.Enfin,La façon dont nous optimisons le cache,Éviter les calculs répétés pendant le laminage.

  Conseils d'optimisation de katon

966fcbd46c10a1c29cfdef54e6eea65c.png

Consultez les documents officiels et les excellents articles de performance,In UI Et GPU De nombreux moyens classiques d'optimisation sont déposés sur les côtés,Si le rafraîchissement est minimal Widget,Utiliser itemExtent,Recommandé Selector Et Consumer Attendez.,Évitez les inutiles Diff Calcul、Calcul de la disposition, etc.;Si elle est réduite saveLayer、L'utilisation d'images pour remplacer la translucidité, etc., est atténuée Raster Les frais généraux du thread.

Pour des raisons d'espace,Il n'y a qu'une partie de,D'autres suggestions d'optimisation communes sont disponibles dans la documentation officielle.

  Utiliser les derniers flutter engine

5410b3e414cd63fff17d478e9290d04a.png

Je l'ai déjà dit.,Flutter La communauté est toujours active.,Framework Et Engine Les couches sont continuellement optimisées PR Fermeture,La plupart de ces optimisations peuvent rendre l'entreprise insensible,Et une meilleure optimisation des performances du point de vue du bas.

Voici un schéma d'optimisation typique:Existant Flutter Programme:À chaque fois VSync Quand le signal arrive,Déclencheur Build Fonctionnement,In Build Fin,Commencez à vous inscrire pour la prochaine VSync Rappel.Sans qu'il y ait eu un accident,Voir fig. Normal.Mais dans le cas de katon,,Voir fig. Actual results,Ici.2 BuildÇa a pris plus de temps que 16.6ms,Parce que c'est un enregistrement pour écouter le prochain VSync La prochaine fois que le rappel est déclenché Build,Il y a beaucoup de temps entre les deux..C'est évident.,Ce que nous attendions,2 BuildFin,Exécution immédiate3 Build,Hypothèses3 BuildExécution assez rapide,À ce moment - là, l'image que l'utilisateur voit est lisse..

Si l'équipe le permet,Mise à jour périodique recommandée Flutter Version;Ou de maintenir sa propre Flutter Les branches indépendantes sont également un bon choix,De la communauté Cherry-Pick Optimiser la soumission,Assurer la stabilité de l'entreprise et profiter de la contribution communautaire.En dernier analyse,Il est recommandé de se concentrer sur la communauté.

Résumé

En résumé.,Partagé Flutter Le défi de l'optimisation de la fluidité、Outils de surveillance、Optimiser les moyens et les recommandations.L'optimisation des performances doit être centrée sur l'homme,Développer l'indice de surveillance et le point d'optimisation à partir du sens du Corps réel;L'optimisation de la fluidité ne se fait pas du jour au lendemain,Ce n'est pas tout.,Il existe de nombreux autres moyens d'optimisation pour:Comment mieux réutiliser Element,Comment éviter Platform Thread Occupé Vsync L'absence de signal, etc., est un sujet de préoccupation,Seule une passion technique soutenue et un esprit d'ingéniosité peuvent mettre App Performance optimisée au maximum;L'équipe technique doit également travailler avec la communauté open source、Autres équipes/L'entreprise établit une connexion,Pierre d'autres montagnes,On peut attaquer jade..

Présentation de l'équipe

L'équipe de clients de la technologie des poissons libres et Google Flutter L'équipe travaille en étroite collaboration, Poursuite du travail profond sur les technologies de pointe et les solutions transversales , Plus d'une contribution élevée à la communauté star Et beaucoup de projets PR.Poissons oisifs APP Est la plus grande plate - forme commerciale inactive de Chine , C'est la troisième plateforme trillion qu'Alibaba crée. , Il y a beaucoup de place et de possibilités pour l'innovation . Ceux qui ont l'intention de rejoindre notre équipe ,Bienvenue.,Boîte aux lettres:[email protected](Lors de l'envoi du courrier,S'il vous plaît.#Remplacer [email protected]

*  Élargir la lecture

215434506136d614add91bd442661a23.png

adfd113dff5111dacf782661dd78eabc.png

Auteur|Des nuages

Édition|Orange Jun

Produit|La nouvelle technologie de vente au détail d'Alibaba

fa2a6724847ab90260c810f8fb9aef54.png

06708d1c7ef6ea34cfb43575a10c0824.png

Copyright:Cet article est[Alibaba Tao Department technical team official website Blog]Établi,Veuillez apporter le lien original pour réimprimer,remercier。 https://fra.fheadline.com/2021/12/202112312255075356.html