Next-Gen YSlow alimenté par YUI

18 juillet 2011 à 21h17 par Marcel Duran | En développement , de performance | Les 4 Commentaires

Un couple de semaines, Yahoo! a annoncé YSlow pour mobile à la vitesse 2011 , ce qui porte la puissance de l'analyse des performances YSlow pour le monde mobile.

YSlow pour Mobile fonctionne comme un bookmarklet , ce qui rend possible de faire fonctionner sur les navigateurs autres que Firefox (comme un add-on) ou Chrome (comme une extension) .

L'architecture a été partiellement redessiné YSlow de travailler croix-plate-forme et YUI était le facteur essentiel de faire sandboxing, cross-browser abstraction et un accès simple et YQL possible.

Sandboxing

Afin d'être incorporé dans une page sans interférer avec l'analyse des performances et sans jouer avec la page elle-même, YSlow est un bookmarklet qui injecte JavaScript et CSS dans une page en s'appuyant sur la puissance de YUI sandbox:

URL Bookmarklet: 

 javascript: (function (y, p, o) {p = y.body.appendChild (y.createElement ('iframe')); p.id = 'YSlow-bookmarklet "; affichage p.style.cssText =': aucun »;. o = p.contentWindow.document; o.open () write ('<head> <body onload =" YUI_config = {victoire: window.parent, doc: window.parent.document}; var d = document; d.getElementsByTagName (\ '\' tête) [0]. appendChild (d.createElement (\ 'script \')). src = \ 'http://d.yimg.com/jc/yslow-bookmarklet.js \ »"> '); o.close ()} (document))

Le code ci-dessus:

  • crée un vide iframe;
  • il ajoute à corps de la page;
  • * se cache le iframe;
  • tire son gestionnaire de fenêtre;
  • écrit dans son contenu le corps de l'iframe;
  • ce corps est vide, mais a un onload événement
  • le onload événement définit comment injecter YSlow JS:
    • définit YUI_config , afin win et doc points à la page en cours d'analyse window et document , respectivement
    • injecte dynamiquement URL YSlow en créant un script l'élément en iframe head

* L'iframe est affiché par le temps tous les actifs de présentation YSlow sont chargés

Cela permet de placer une iframe dans la page en cours d'analyse. Cette iframe agira comme un environnement isolé et YSlow va résider en son sein. Depuis l'iframe est créé de façon dynamique sans src attribut, il aura accès à son parent (la page en cours d'analyse) parce qu'il n'ya pas de même origine politique violation passe là-bas.

Le YUI_config objet est utile, car elle définit win et doc au parent de l'iframe (la page en cours d'analyse), de sorte que toute nouvelle instance YUI sera lié au document parent par défaut, le câblage tout appel à Y.all et Y.one par Y.config.win ou Y.config.doc de la YUI use rappel.

Présentation YSlow est gérée par l'iframe window et document de références, permettant le script YSlow principale de rendre le balisage ainsi que chercher la feuille de style externe au sein de cette iframe sans entrer en conflit avec des styles de la page parent. YSlow analyse de la page parent afin d'obtenir tous les éléments (images, scripts, liens, images d'arrière-plan les, flash, etc) requises pour l'analyse des performances plus tard. Ceci est fait en accédant à Y.config.win et Y.config.doc , car ils se réfèrent à la page parent.

Cross-browser abstraction

Être un bookmarklet, YSlow pour Mobile est censé fonctionner sur n'importe quel navigateur *. YUI abstraction cross-browser questions en normalisant différences entre les navigateurs, ce qui entraîne dans un endroit propre, facile à lire et maintenable codebase.

YSlow n'a pas été entièrement porté sur YUI 3 - que la couche contrôleur (à partir de la composante App prochain) pour l'instant - mais toujours, toutes les manipulations du DOM et la gestion des événements sont effectuées par les node et event modules. Dans les versions futures, nous prévoyons de porter caractéristiques YSlow plus de YUI 3.

* Toutes les navigateurs sont actuellement pris en charge

YQL

YSlow analyse les pages en vérifiant les en-têtes HTTP pour les composants trouvés sur la page. En-têtes de réponse HTTP ne sont pas disponibles dans la page, d'où ces composants doivent être demandée à nouveau pour que YSlow obtenir l'information d'en-tête de réponse. Cela pourrait être réalisé en demandant la liste des URL composant à travers XMLHttpRequest (AJAX), mais malheureusement, en raison de la restriction d'origine même politique , ce n'est pas possible à moins que tous les composants sont dans le même domaine que la page qui est très peu probable.

Une solution de contournement pour la restriction commune d'origine en utilisant la même politique est JSONP, où un serveur externe fonctionne comme un proxy demandant la liste des URL des composants et la récupération de leurs en-têtes de réponse HTTP pour le compte de YSlow. En raison de la popularité YSlow et mobiles récents efforts d'analyse des performances, nous nous attendons à la circulation assez lourd pour la YSlow pour bookmarklet Mobile. Afin de soutenir un tel trafic, YQL était la solution évolutive adoptée par YSlow par un tableau de données open nommé data.headers , qui récupère les en-têtes de réponse et le contenu pour une liste donnée d'URL en empruntant l'identité de l'utilisateur-agent pour s'assurer que le contenu attendu est récupérées.

La requête YQL composante fait tout le travail de gestion des requêtes, tout en gérant les demandes YQL JSONP sous le capot, ce qui rend le code du contrôleur YSlow beaucoup plus simple et facile à entretenir.

Les améliorations futures: YSlow Nouvelle interface conviviale mobile

Actuellement, le YSlow pour l'expérience utilisateur mobile est le même que l'expérience du bureau. Faire face à une longue liste de données d'analyse de performance n'est pas la meilleure expérience sur les petites Smart-Phone écrans. Depuis YUI aussi les résumés multi-appareils gestes , YSlow pour Mobile obtiendrez une nouvelle marque mobile une interface conviviale dans les futures versions.

Performance de l'outil de la performance

YSlow pour le déploiement Mobile a été faite avec soin compte tenu de son impact sur les performances sur le temps de chargement de la page en cours d'analyse. Les 3 modules YUI utilisés sur YSlow ont été examinés afin d'inclure uniquement les modules nécessaires pour charger YSlow aussi vite que possible. Le fichier de semences et de YUI Loader n'ont pas été inclus puisque tous les modules nécessaires et sous-modules ont été combinés à la suite de performances Zen Ryan Grove conseils, ce qui rendait possible de charger le tout dans une seule demande unique à petite: YSlow-bookmarklet.js: 204KB, 66KB ( gzip) où:

  • YUI: 75Ko, 27Ko (gzip)
  • YSlow: 129KB, 39KB (gzip)

En savoir plus sur YSlow

Tenez-vous à jour avec les dernières annonces de YSlow par:

Marcel Duran À propos de l'auteur: Marcel Duran est le chef du Front End pour l'équipe de Yahoo! Performance exceptionnelle. Il a été dans l'optimisation des performances Web sur les sites à fort trafic dans la page d'accueil de Yahoo! et les équipes de recherche où il a demandé et étudié les pratiques de performance meilleurs web rendant les pages encore plus vite. Il se consacre maintenant à YSlow et d'autres performances des outils de développement, les recherches et l'évangélisation. Son objectif est de rendre le web plus vite que cela peut être et estime qu'il n'ya pas une telle chose comme "quelques millisecondes ne fera pas mal».

Trouver des conversations: bloglines | technorati

Partagez et étendre: Créer un signet avec del.icio.us | digg it! | reddit!

4 Commentaires »

Flux RSS des commentaires sur ce post. TrackBack URI

  1. Il pourrait certainement utiliser une feuille de style mobile maintenant

    Commentaire par Juan - Juillet 19, 2011 #

  2. Bonnes nouvelles de Marcel. Gardez le bon travail!

    Commentaire par Eduardo Lundgren - 21 Juillet 2011 #

  3. [...] Next-Gen YSlow alimenté par YUI [...]

    Pingback par les meilleures pratiques pour accélérer votre site Web «Chandara - Juillet 25, 2011 #

  4. Je ne suis pas un développeur, mais je suis intéressé par la performance App ove le WAN et Internet. Je l'ai essayé pour la première fois et il a très bien fonctionné pour moi. Merci pour l'effort de mettre en ...

    Commentaire par Cliff Chapman - Juillet 27, 2011 #

Laisser un commentaire

Remarque: Les commentaires sont modérés pour les débutants. Spam supprimé.

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Hébergé par Yahoo!

Copyright © 2006-2012 Yahoo! Inc Tous droits réservés. Politique de confidentialité - Conditions d'utilisation

Propulsé par WordPress sur Yahoo! Hébergement Web .