Pourquoi Chrome utilise-t-il davantage de CPU lorsqu'un élément Knockout de grande taille est masqué ?

Question

J'ai une application web à page unique qui utilise Knockout.j. foreach les liaisons. (Le tableau est grand, mais pas énorme : 20 colonnes et 200 lignes environ).

Comme le tableau est grand, il peut être ouvert/fermé par l'utilisateur en cliquant sur des boutons. Les données <table> est placé à l'intérieur d'un <div> que je peux masquer/afficher à l'aide de l'outil jQuery .hide() y .show() (qui fonctionnent essentiellement par l'activation et la désactivation de CSS display: none sur le <div> ).

Toutes ces fonctionnalités fonctionnent. Cependant, je remarque qu'après avoir "fermé" (masqué) le tableau de données volumineuses, l'utilisation du processeur de Chrome fait un bond - jusqu'à 100 % si le tableau généré par Knockout est suffisamment grand. Ce qui est plus intéressant, c'est que cette sólo se produit après que l'utilisateur ait cliqué quelque part dans l'écran. <div> qui contient le tableau lorsqu'il est affiché. Lorsque le tableau est masqué (et que l'utilisation du CPU est élevée), le fait de cliquer ailleurs sur la page ramène l'utilisation du CPU à la normale. Le processus se répète à volonté.

Une autre remarque utile : si j'arrête le streaming des données du serveur, ce problème ne se produit pas (ou, il n'est pas perceptible dans l'utilisation du CPU). Il y a un seul modèle de vue Knockout sur cette page, qui gère à la fois le flux de données du serveur et la création de ce tableau de données à partir d'un objet JSON. Les deux ensembles de données sont par ailleurs complètement séparés : aucune des données changeantes n'est affichée dans le tableau, et le tableau ne contient aucune liaison d'événement vers le modèle de vue. C'est comme si la mise à jour des données en continu du modèle Knockout entraînait un travail sur la table de données, même si aucune des données en continu n'est liée à la table. Et il ne le fait que lorsque la table est no affichée !

Résumé rapide :

• Une application Web utilise Knockout pour rendre un grand tableau de données lorsque la page est chargée.
• Ce tableau est caché par .hide() au démarrage dans $(document).ready mais est affiché en utilisant .show() après avoir cliqué sur un bouton, et peut être caché à nouveau.
• Si l'on clique sur la souris à l'intérieur du tableau de données, l'utilisation du processeur dans Chrome passera à 100 % après que le tableau soit à nouveau masqué.
• Si vous cliquez sur n'importe quel autre élément de la page, l'utilisation du processeur revient à la normale.

Autres informations pertinentes :

• Le profileur JavaScript de Chrome montre l'utilisation élevée du CPU, mais elle est catégorisée simplement comme temps (de programme).
• Ni IE10 ni Firefox 20 sous Windows ne présentent ce problème.

Avez-vous une idée de ce qui se passe ici, ou des suggestions pour un dépannage supplémentaire ?

jsFiddle :

Exemple ici : http://jsfiddle.net/CTYMv/6/

Regardez l'utilisation du CPU après avoir chargé le violon, elle devrait être faible. Cliquez sur "Show Table", puis cliquez quelque part dans la division qui apparaît (fond gris). Cliquez ensuite sur "Hide Table" - l'utilisation du CPU augmentera de manière significative. Cliquez ensuite n'importe où ailleurs (fond blanc), et l'utilisation du processeur redeviendra normale.

Answer 1

Je pense que nous pouvons maintenant affirmer qu'il s'agit d'un bug du moteur webkit. Ce bug n'apparaît que lorsque l'on utilise la propriété css display:none; . Est-ce dû à la façon dont les GPU utilisant webkit rendent les éléments cachés ? Eh bien, je ne sais toujours pas...

VOIR LA DÉMO

C'est la solution la plus simple à laquelle je peux penser, cela ne devrait pas interférer avec votre autre code : {e.g knockout observable}

CSS : {ajouté des événements de pointeurs comme suggéré par Brandon}

.hidden{opacity:0;pointer-events:none} //don't use display:none here

JS :

//don't use hide/show jq methods as internally it set display none (fadeOut() methods too)
$('#btn_show').click(function(){
    $('#bigdatadiv').removeClass('hidden');
});
$('#btn_hide').on('click',function(){    
   $('#bigdatadiv').addClass('hidden')
});

Je suis conscient que ce n'est qu'une solution de rechange et que cela ne répond toujours pas à votre question : pourquoi cela se produit-il ?

Answer 2

Merci pour ce fil de discussion ; on pourrait penser que le bug aurait été corrigé deux ans plus tard.

window.getSelection().removeAllRanges() a résolu le problème pour moi et était le plus simple à intégrer dans mon code.

Answer 3

Il suffit d'utiliser window.getSelection().removeAllRanges() avant .hide(); pour un gros bloc. Ça marche bien pour moi. C'est stupide mais c'est vrai.