web-dev-qa-db-fra.com

Erreur d'affichage - "Blink a reporté une tâche pour rendre le défilement plus fluide"

J'essaie de construire une application ionique (1) en utilisant angular. Je ne comprends pas pourquoi je reçois cet avertissement

"Blink a différé une tâche afin de rendre le défilement plus aisé. Votre minuterie et les tâches réseau devraient prendre moins de 50 ms pour éviter cela. Veuillez consulter https://developers.google.com/web/tools/chrome-devtools/. profile/assessment-performance/rail et https://crbug.com/574343#c40 pour plus d'informations. "

Et des avertissements supplémentaires lorsque j'utilise les curseurs de page est 

"Tentative ignorée d’annuler un événement touchmove avec cancelable = false, par exemple parce que le défilement est en cours et ne peut pas être interrompu."

"Le traitement de l'événement d'entrée" touchstart "a été retardé de 835 ms en raison de l'occupation du thread principal. Envisagez de marquer le gestionnaire d'événements comme" passif "pour rendre la page plus réactive"

angularjscordovaionic-framework
7
saikrishna

Ces avertissements sont des "normales". La vue Web indique en gros que certains événements sont liés à l'événement de défilement ou même à l'événement tactile et que cela pourrait ralentir l'application. Google docs recommande par exemple d'utiliser des intervalles plutôt que d'exécuter des calculs ou des fonctions directement sur les événements touchmove/drag, ce qui n'est pas toujours possible avec une application mobile avec Webview en fonction de ce que vous essayez d'accomplir avec UX. 

De plus, si vous utilisez un setInterval, vous devrez utiliser des timings agressifs fous comme 10ms et votre défilement/glissement sera vraiment mauvais . N'oubliez pas ces avertissements, ils sont très génériques et très vraisemblables, mais la plupart du temps ne peut être évité.

Si vous souhaitez toujours éviter l'avertissement, voici un exemple jQuery. L'idée est d'attraper les valeurs de l'événement, puis d'exécuter des calculs sur un thread séparé.

 var int, x, y;

 $('#mydiv').on('touchstart', function(event){
      int = setInterval(work, 20);
 });

 $('#mydiv').on('touchend', function(event){
      clearInterval(int);
 });

 $('#mydiv').on('touchmove', function(event){
      x = event.touches[0].pageX;
      y = event.touches[0].pageY;
 });  

 function work(){
      //how you can do whatever with x y without getting a warning 
 }
4
Eric

Cela pourrait ne pas être apparenté, mais d’après mon expérience, vous l’obtenez parce que votre page angulaire est toujours en cours de traitement. J'avais l'habitude de recevoir ces avertissements si j'essayais de faire défiler trop rapidement après être passé dans un nouvel état - si j'attendais une seconde, ce serait ok. Ma solution a été de désactiver le js scroll pour libérer plus de puissance là où il était plus pertinent. Vérifiez scrolling.jsScrolling(value) sur http://ionicframework.com/docs/api/provider/$ionicConfigProvider/

1
joe

Ce sont en fait des avertissements sérieux. J'ai passé trop de temps sur cet avertissement. Si les tâches javascript comme le minuteur ou les tâches réseau sont longues, elles seront arrêtées jusqu'à ce que vous fassiez défiler. Ces tâches reprennent ensuite lorsque le défilement est terminé.

0
Muneem Habib