efficacité framework jQuery / Javascript

Question

Mon dernier projet utilise un framework javascript (jQuery), ainsi que certains plugins (validation, jquery-ui, datepicker, FaceBox, ...) pour aider à faire une application web moderne.

Je suis maintenant chargement des pages plus lent que de trouver que je suis habitué. Après un certain profilage js (merci VS2010!), Il semble que beaucoup de temps est pris dans le traitement du cadre.

Je comprends maintenant les outils ui plus complexes, plus le traitement doit être fait. Le projet n'est pas encore à une grande scène et je pense que serait les fonctions moyennes. A ce stade, je vois qu'il ne va pas à l'échelle bien.

J'ai remarqué des choses comme la commande « chaque » dans jQuery prend beaucoup de temps de traitement.

Avoir d'autres ont connu une certaine latence en utilisant des cadres JS? Comment puis-je réduire leurs effets sur les performances de la page? Sont les meilleures pratiques sur la mise en œuvre à l'aide-t-il des cadres JS?

Merci

Answer 1

Mon opinion personnelle est d'utiliser les méthodes et les outils cadre où ils ont du sens et rendre la vie plus facile, par exemple, les sélecteurs et la résolution de bizarreries multi-navigateur et d'utiliser le bon vieux JavaScript vanille où il n'y a pas besoin d'utiliser les méthodes cadres , par exemple, dans des boucles simples.

Je voudrais vérifier et vérifier le code que vous avez qui utilise le cadre pour faire en sorte que cette dernière fonctionnera aussi bien que possible; il est trop facile d'utiliser un cadre dans une mauvaise exécution de la mode et parfois on ne découvre pas jusqu'à ce que l'un profiling:)

Frameworks introduisent une latence supplémentaire car il y a généralement un certain nombre de fonctions qui sont exécutées à la suite de l'utilisation de la fonction de point d'entrée en les utilisant.

EDIT:

Quelques points généraux en ce qui concerne l'utilisation jQuery:

1.cache vos objets jQuery dans les variables locales si vous allez les utiliser plus d'une fois. Interrogation DOM est une opération relativement coûteuse et doit être fait donc aussi peu que nécessaire. Si vous avez des sélecteurs liés, jetez un oeil à l'exécution d'une large sélection, puis en utilisant les méthodes telles que find(), filter() next(), prev() etc pour filtrer la collection pour obtenir les éléments pertinents que vous auriez usedanother fonction de sélection pour obtenir.

2.inside des fonctions, ne pas envelopper des objets dans les objets jQuery inutilement. S'il y a un moyen croix navigateur d'accéder à une valeur de propriété d'objet qui est fiable, utilisez cela. Par exemple, HTMLElement la propriété de la valeur d'une entrée de texte

$('input:text').each(function() {
    // use
    this.value

    // don't worry about this
    $(this).val();
 }); 

3.Essayez pour éviter d'ajouter des fichiers volumineux de script où vous utilisez seulement un petit morceau de la fonctionnalité. Il peut y avoir beaucoup de temps passé et l'exécution, le code de la charge de page que vous ne réussirez jamais à utiliser! Si possible, extraire uniquement le code approprié qui est nécessaire. Je sais que cela peut être difficile et n'est pas toujours possible, notamment en matière de versioning, mais il est intéressant de souligner néanmoins.