Next-Gen YSlow κινούνται με YUI

18, Ιουλ 2011 στις 21:17 από τον Marcel Duran | Σε Ανάπτυξης , Performance | 4 Σχόλια

Μια-δυο εβδομάδες πριν, η Yahoo! ανακοίνωσε το YSlow για κινητά σε ταχύτητα 2011 , φέρνοντας τη δύναμη της ανάλυσης των επιδόσεων YSlow στο κινητό κόσμο.

YSlow για κινητά έργα ως bookmarklet , καθιστώντας δυνατό για να τρέξει σε προγράμματα περιήγησης, εκτός από τον Firefox (ως add-on) ή Χρώμιο (ως επέκταση) .

Η αρχιτεκτονική YSlow εν μέρει επανασχεδιαστεί ώστε να λειτουργήσει cross-platform και YUI ήταν ο ουσιαστικός παράγοντας για να Sandboxing, cross-browser και απλή αφαίρεση YQL δυνατή πρόσβαση.

Sandboxing

Προκειμένου να ενταχθεί σε μια σελίδα χωρίς να παρεμβαίνει με την ανάλυση των επιδόσεων και χωρίς να παίζει με την ίδια τη σελίδα, YSlow είναι ένα bookmarklet που εγχέει JavaScript και CSS σε κάθε σελίδα με τη μόχλευση τη δύναμη του YUI Sandboxing:

URL bookmarklet: 

 javascript: (λειτουργία (y, p, o) {p = y.body.appendChild (y.createElement («iframe '))? p.id =" YSlow-bookmarklet »? οθόνη p.style.cssText =': κανένα »?. o = p.contentWindow.document? o.open () γράφουν (« <head> <onload σώματος = "YUI_config = {νίκη: window.parent, doc: window.parent.document}? var d = έγγραφο? d.getElementsByTagName (\ 'το κεφάλι \') [0]. appendChild (d.createElement (\ "σενάριο \")). src = \ "http://d.yimg.com/jc/yslow-bookmarklet.js \ "> ')? o.close ()} (έγγραφο))

Η παραπάνω κωδικό:

  • δημιουργεί ένα κενό iframe?
  • προσθέτει ότι στο σώμα της σελίδας?
  • * κρύβει το iframe?
  • παίρνει παράθυρο του χειριστή?
  • γράφει στο περιεχόμενό του το σώμα του iframe?
  • Το όργανο αυτό είναι άδειο, αλλά έχει ένα onload εκδήλωση
  • το onload εκδήλωση καθορίζει το πώς να κάνετε την ένεση YSlow JS:
    • θέτει YUI_config , ώστε win και doc σημεία στην σελίδα αναλύονται window και document αντίστοιχα
    • διοχετεύει δυναμικά URL YSlow με τη δημιουργία ενός script στοιχείο σε iframe του head

* Η iframe εμφανίζεται από τη στιγμή που φορτώνονται όλα τα περιουσιακά στοιχεία παρουσίαση YSlow

Αυτό θα τοποθετήσει ένα IFRAME μέσα η σελίδα που αναλύονται. Αυτό το iframe θα λειτουργήσει ως sandboxed περιβάλλον και YSlow θα διαμένουν εντός αυτού. Δεδομένου ότι η iframe δυναμικά δημιουργείται χωρίς την src ιδιότητα, θα έχουν πρόσβαση στη μητρική της εταιρεία (η σελίδα που αναλύονται), επειδή δεν υπάρχει ίδια πολιτική προέλευση παραβίαση συμβαίνει εκεί.

Η YUI_config αντικείμενο είναι βολικό, επειδή θέτει win και doc στη μητρική του iframe (η σελίδα που αναλύονται), έτσι κάθε νέο παράδειγμα YUI θα είναι υποχρεωμένη να το γονικό έγγραφο από προεπιλογή, καλωδίωση για κάθε κλήση Y.all και Y.one μέσω Y.config.win ή Y.config.doc από το YUI use επανάκλησης.

YSlow παρουσίαση της γίνεται από το iframe window και document αναφοράς, που επιτρέπει το YSlow κύρια δέσμη ενεργειών για να καταστήσει τη σήμανση καθώς και φέρω ως το εξωτερικό CSS σε αυτό το iframe δεν θα συγκρούεται με το στυλ της σελίδας γονέα. YSlow σαρώνει τη γονική σελίδα για να πάρετε όλα τα στοιχεία (εικόνες, χειρόγραφα, συνδέσεις, φόντο-εικόνες, φλας, κτλ.) που απαιτούνται για την περαιτέρω ανάλυση των επιδόσεων. Αυτό γίνεται με την πρόσβαση Y.config.win και Y.config.doc , αφού αναφέρονται στη γονική σελίδα.

Cross-browser αφαίρεση

Όντας ένα bookmarklet, το YSlow για κινητά υποτίθεται ότι θα λειτουργήσει σε οποιοδήποτε * στον browser. YUI αφαιρεί cross-browser θέματα από την ομαλοποίηση των διαφορών πρόγραμμα, με αποτέλεσμα ένα καθαρό, εύκολο στην ανάγνωση και στη συντήρηση κώδικα.

YSlow δεν είχε πλήρως μεταφερθεί στο YUI 3 - μόνο το στρώμα του ελεγκτή (από το επερχόμενο συστατικό App) για τώρα - αλλά και πάλι, όλα χειραγώγηση DOM και το χειρισμό περίπτωση γίνονται από τους node και event ενότητες. Σε μελλοντικές εκδόσεις σχεδιάζουμε να μεταφέρουν περισσότερα χαρακτηριστικά YSlow για να YUI 3.

* Τα προγράμματα περιήγησης δεν είναι όλα υποστηρίζονται αυτή τη στιγμή

YQL

YSlow αναλύει τις σελίδες με τον έλεγχο των κεφαλίδων HTTP για τα συστατικά που βρίσκονται στη σελίδα. Κεφαλίδες HTTP απάντηση δεν είναι διαθέσιμα στη σελίδα, ως εκ τούτου, αυτά τα στοιχεία θα πρέπει να ζητηθεί και πάλι για το YSlow για να πάρετε τις πληροφορίες κεφαλίδας απόκρισης. Αυτό θα μπορούσε να επιτευχθεί ζητώντας από τον κατάλογο των συστατικών με τις διευθύνσεις URL XmlHttpRequest (AJAX) αλλά δυστυχώς, λόγω της πολιτικής περιορισμού ίδια προέλευση , δεν είναι δυνατή μόνον αν όλα τα στοιχεία είναι στον ίδιο τομέα με τη σελίδα που είναι πολύ απίθανο.

Μια κοινή λύση για την ίδια πολιτική περιορισμού προέλευσης χρησιμοποιεί JSONP, όπου ένας εξωτερικός διακομιστής λειτουργεί ως μεσολαβητής ζητά τον κατάλογο των συστατικών και την ανάκτηση διευθύνσεων URL HTTP κεφαλίδες απάντησή τους για λογαριασμό του YSlow. Λόγω της δημοτικότητας YSlow και το πρόσφατο κινητό προσπάθειες ανάλυσης των επιδόσεων, είμαστε αναμένουμε πολύ μεγάλη κίνηση για το YSlow για κινητά bookmarklet. Για να υποστηρίξει αυτή την κίνηση, YQL ήταν η επεκτάσιμη λύση που υιοθετήθηκε από το YSlow μέσω ενός ανοικτού πίνακα δεδομένων που ονομάζεται data.headers , η οποία ανακτά τις κεφαλίδες απόκρισης και το περιεχόμενο για ένα κατάλογο των διευθύνσεων URL, ενώ υποδύονται τον χρήστη-πράκτορα για να διασφαλιστεί η αναμενόμενη περιεκτικότητα είναι ανακτηθεί.

Η YQL Ερώτημα συστατικό κάνει όλη τη δουλειά της διαχείρισης YQL ερωτήματα, ενώ τη διαχείριση JSONP αιτήματα κάτω από την κουκούλα, καθιστώντας τον κωδικό ελεγκτή YSlow πολύ απλούστερο και εύκολο στη συντήρηση.

Μελλοντικές βελτιώσεις: Νέα YSlow για κινητά φιλικό περιβάλλον

Σήμερα το YSlow για κινητά εμπειρία του χρήστη είναι η ίδια με την επιφάνεια εργασίας εμπειρία. Η ενασχόληση με έναν μακρύ κατάλογο της ανάλυσης των δεδομένων απόδοσης δεν είναι η καλύτερη εμπειρία για μικρούς έξυπνο τηλέφωνο-οθόνες. Από YUI αφαιρεί επίσης πολλαπλή συσκευή χειρονομίες , το YSlow για κινητά θα πάρει ένα ολοκαίνουργιο κινητό φιλικό περιβάλλον σε μελλοντικές εκδόσεις.

Επιδόσεις του εργαλείου απόδοσης

YSlow για την ανάπτυξη κινητών έγινε με προσοχή λόγω του αντίκτυπου των επιδόσεων της σχετικά με το χρόνο φόρτωσης της σελίδας που αναλύονται. Οι YUI 3 ενότητες που χρησιμοποιούνται για το YSlow εξετάστηκαν ώστε να περιλαμβάνει μόνο τις ενότητες που απαιτείται για να φορτώσει το YSlow όσο το δυνατόν γρηγορότερα. Το αρχείο σπόρων και YUI Loader δεν είχαν συμπεριληφθεί από όλα τα απαραίτητα ενότητες και υποενότητες ενώθηκαν μαζί μετά απόδοσης Ζεν Ράιαν Grove για συμβουλές, οι οποίες επέτρεψαν να φορτώσει όλα μαζί σε ένα ενιαίο μικρό μόνο αίτημα: YSlow-bookmarklet.js: 204KB, 66KB ( gzip), όπου:

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

Περισσότερα για το YSlow

Μείνετε ενημερωμένοι με τις τελευταίες ανακοινώσεις από το YSlow:

Marcel Duran Σχετικά με τον συγγραφέα: Marcel Duran είναι το Μέτωπο οδήγησε τελικά για το Yahoo! τις εξαιρετικές επιδόσεις της ομάδας. Έχει διατελέσει σε βελτιστοποίηση της απόδοσης στον ιστό σε υψηλές περιοχές κυκλοφορίας στη πρώτη σελίδα του Yahoo! Search και ομάδες όπου ζήτησε και ερεύνησαν ιστοσελίδα απόδοση των βέλτιστων πρακτικών σελίδες κάνοντας ακόμα πιο γρήγορα. Τώρα είναι αφιερωμένο στην YSlow και άλλα εργαλεία ανάπτυξης των επιδόσεων, ερευνών και ευαγγελισμό. Στόχος του είναι να καταστήσει το διαδίκτυο ακόμη πιο γρήγορα από ό, τι μπορεί να είναι και πιστεύει ότι δεν υπάρχει τέτοιο πράγμα όπως «λίγα μόλις χιλιοστά του δευτερολέπτου δεν θα βλάψει».

Βρείτε συζητήσεις: Bloglines | Technorati

Μοιραστείτε και κατ 'επέκταση: Del.icio.us Σελιδοδείκτης με | Digg it! | Reddit!

4 Σχόλια »

RSS feed για σχόλια σχετικά με αυτό το post. TrackBack URI

  1. Θα μπορούσε να χρησιμοποιήσει σίγουρα ένα κινητό στυλ τώρα

    Σχόλιο από Juan - 19 Ιουλίου του 2011 #

  2. Καλά νέα Μαρσέλ. Κρατήστε την καλή δουλειά!

    Σχόλιο από τον Eduardo Lundgren - 21, Ιουλίου 2011 #

  3. [...] Next-Gen YSlow κινούνται με YUI [...]

    Pingback από Βέλτιστες Πρακτικές για την επιτάχυνση της ιστοσελίδας σας «Chandara - 25 Ιουλίου, 2011 #

  4. Δεν είμαι προγραμματιστής, αλλά ενδιαφέρομαι για την απόδοση App κανονισμό ΦVE τη WAN και Internet. Το δοκίμασα για πρώτη φορά και δούλεψε πολύ για μένα. Ευχαριστούμε για την τοποθέτηση του στην προσπάθεια ...

    Σχόλιο από Cliff Chapman - 27 του Ιουλίου, 2011 #

Αφήστε ένα σχόλιο

Σημείωση: Σχόλια εποπτεύονται για την πρώτη-χρονόμετρα. Spam διαγράφεται.

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

Φιλοξενείται από το Yahoo!

Πνευματικά δικαιώματα © 2006-2012 Yahoo! Με επιφύλαξη παντός δικαιώματος. Πολιτική απορρήτου - Όροι Υπηρεσίας

Κινούμενο από WordPress για το Yahoo! Web Hosting .