Ce ne sont que des avertissements comme tout le monde l'a mentionné. Cependant, si vous souhaitez les résoudre (ce que vous devriez faire), vous devez d'abord identifier la cause de l'avertissement. Il n'y a pas de raison unique pour laquelle vous pouvez obtenir un avertissement de refusion de force.
Quelqu'un a créé une liste pour certaines options possibles. Vous pouvez suivre la discussion pour plus d'informations.
Voici l'essentiel des raisons possibles -

Ce qui force la mise en page / refusion

Tous les ci-dessous les propriétés ou les méthodes, lorsque demandé / appelé JavaScript, déclenchera le navigateur pour calculer de manière synchrone le style et mise en page*. Ceci est également appelé refusion ou mise en page raclée , et est un goulot d'étranglement de performance commun.

Élément

Boîte métriques

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

Faites défiler les choses

• elem.scrollBy(), elem.scrollTo()
• elem.scrollIntoView(), elem.scrollIntoViewIfNeeded()
• elem.scrollWidth, elem.scrollHeight
• elem.scrollLeft, elem.scrollTop en outre, en les définissant

Concentrer

• elem.focus() peut déclencher unedouble Mise en page forcée (source )

Également…

• elem.computedRole, elem.computedName
• elem.innerText (source)

GetComputedStyle

window.getComputedStyle() forcera généralement le style recalc (source)

window.getComputedStyle() forcera la mise en page, ainsi, si l'un des ce qui suit est vrai:

1. L'élément est dans un arbre d'ombre
2. Il existe des requêtes multimédia (liées à la fenêtre d'affichage). Plus précisément, l'une des opérations suivantes: (source) * min-width, min-height, max-width, max-height, width, height * aspect-ratio, min-aspect-ratio, max-aspect-ratio
   • device-pixel-ratio, resolution, orientation
3. la propriété demandée est l'une des suivantes: (source )
   • height, width * top, right, bottom, left * margin [-top, -right, -bottom, -left, ou abréviation] seulement si le la marge est fixée. * padding [-top, -right, -bottom, -left, ou raccourci ] seulement si le remplissage est fixe. * transform, transform-origin, perspective-origin * translate, rotate, scale * webkit-filter, backdrop-filter * motion-path, motion-offset, motion-rotation * x, y, rx, ry

Fenêtre

• window.scrollX, window.scrollY
• window.innerHeight, window.innerWidth
• {[72] } force uniquement le style

Formulaires

• inputElem.focus()
• inputElem.select(), textareaElem.select() (source)

Événements de la Souris

• mouseEvt.layerX, mouseEvt.layerY, mouseEvt.offsetX, mouseEvt.offsetY (source)

Document

• {[80] } force uniquement le style

Plage

• range.getClientRects(), range.getBoundingClientRect()

SVG

• beaucoup; n'ont pas fait une liste exhaustive , mais la mise en page 2011 de Tony Gentilcore déclenche Liste a souligné quelques-uns.

Contenteditable

• Beaucoup et beaucoup de choses, ...y compris la copie d'une image dans le presse-papiers (source)

Vérifiez plus ici .

Mise à Jour:

Robocat à partir d'observations

Plus de fond: Le chrome le code source du problème original et une discussion sur une API de performance pour les Avertissements.

Quelques idées:

• Supprimez la moitié de votre code (peut - être en le commentant).

  • Le problème Est toujours là? SUPER, vous avez réduit les possibilités! Répéter.

  • Le problème n'est-il pas là? OK, regardez la moitié que vous avez commentée!

• Utilisez-vous un système de contrôle de version (par exemple, Git)? Si c'est le cas, {[0] } certains de vos commits les plus récents. Quand le problème introduit? Regardez le commit pour voir exactement quel code a changé lorsque le problème est arrivé.

Regardez dans la console Chrome sous L'onglet Réseau et trouvez les scripts qui prennent le plus de temps à charger.

Dans mon cas, il y avait un jeu Angulaire ajouter les scripts que j'avais compris, mais pas encore utilisé dans l'application :

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.8/angular-ui-router.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-utils/0.1.1/angular-ui-utils.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-animate.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular-aria.min.js"></script>

Ce sont les seuls fichiers JavaScript qui ont pris plus de temps à charger que le temps spécifié par l'erreur "tâche longue durée".

Tous ces fichiers s'exécutent sur mes autres sites Web sans aucune erreur générée mais je recevais cette erreur" tâche longue durée" sur une nouvelle application web qui avait à peine toutes les fonctionnalités. L'erreur s'est arrêtée immédiatement après la suppression.

Ma meilleure supposition est que ces add-ons angulaires cherchaient récursivement dans des sections de plus en plus profondes du DOM pour leurs balises de départ-n'en trouvant aucune, ils ont dû traverser L'ensemble du DOM avant de quitter, ce qui a pris plus de temps que Chrome attend-donc l'avertissement.

Cela pourrait provenir de Chrome 56 beta si vous l'utilisez.

, Mais il n'est pas sur le changelog: https://blog.chromium.org/2016/12/chrome-56-beta-not-secure-warning-web.html

Vous pouvez le masquer dans la barre de filtre de la console avec la case à cocherMasquer les violations .

1 est arrivé à la Console

2 Cliquez sur l'icône de filtre près (case à cocher" Journal de conservation")

3 Cochez La Case "Masquer La Violation"

Modifier

Cette fonctionnalité est supprimée de Chrome 58

Modifiez la liste déroulante du niveau de journalisation sur Verbose pour voir les violations.

Dans mon cas, j'ai découvert que c'était en fait causé par Adblock.

J'ai exécuté mon application et l'ai enregistrée dans onglet Performance {[2] } dans Chrome.

Là, vous pouvez vérifier diverses fonctions qui ont pris beaucoup de temps à exécuter. Celui qui corelated avec des avertissements dans la console provenait d'un fichier qui a été chargé par l'extension Adblock.

Vérifiez ces fichiers et essayez d'identifier s'il s'agit d'un code d'extensions ou du vôtre

Si vous utilisez le canary chrome, il suffit de cocher l'option' Masquer les violations'.voir ici

J'ai trouvé une solution dans le code source D'Apache Cordova. Ils implémentent comme ceci:

var resolvedPromise = typeof Promise == 'undefined' ? null : Promise.resolve();
var nextTick = resolvedPromise ? function(fn) { resolvedPromise.then(fn); } : function(fn) { setTimeout(fn); };

Implémentation Simple, mais de manière intelligente.

Sur Android 4.4, utilisez Promise. Pour les navigateurs plus anciens, utilisez setTimeout()

Utilisation:

nextTick(function() {
  // your code
});

Après avoir inséré ce code d'astuce, tous les messages d'avertissement ont disparu.

J'ai trouvé la racine de ce message dans mon code. Fonctionnalité: recherche qui masquent / afficher les nœuds (hors ligne). Était:

search.addEventListener('keyup', function() {
    for (const node of nodes)
        if (node.innerText.toLowerCase().includes(this.value.toLowerCase()))
            node.classList.remove('hidden');
        else
            node.classList.add('hidden');
});

Dans l'onglet Performances (profileur):

Maintenant:

search.addEventListener('keyup', function() {
    const nodesToHide = [];
    const nodesToShow = [];
    for (const node of nodes)
        if (node.innerText.toLowerCase().includes(this.value.toLowerCase()))
            nodesToShow.push(node);
        else
            nodesToHide.push(node);

    nodesToHide.forEach(node => node.classList.add('hidden'));
    nodesToShow.forEach(node => node.classList.remove('hidden'));
});

Dans l'onglet Performances (profileur):

Et je pense que maintenant la recherche fonctionne plus rapidement (229 nœuds).

Vous devez avoir un sélecteur de classe répété qui est recherché repeteatedly par javascript. Si quelque chose doit utiliser un id, utilisez - le comme id, pas comme une classe. Qui s'est vraiment passé pour moi.