Yahoo! User Interface Blog (YUIBlog)

Screencast: Yui Bundle Ross Harmes για Textmate

30 Νοέμβρη, 2006 στις 17:27 από τον Eric Miraglia | Σε Ανάπτυξης , Yui Θέατρο | 14 Σχόλια

Συνέχεια ανάγνωση screencast: Yui Bundle Ross Harmes για Textmate ...

Εύρεση συζητήσεις: Bloglines | technorati

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

Έρευνα απόδοσης, Μέρος 1: Ποιος ο κανόνας 80/20 μας λέει σχετικά με τη μείωση αιτήσεις HTTP

28 Νοέμβρη 2006 στις 12:56 μ.μ. από Tenni Theurer | Σε Ανάπτυξης , Performance | 128 Σχόλια

Δεν είναι μυστικό ότι οι χρήστες προτιμούν πιο γρήγορα ιστοσελίδες. Δουλεύω σε μια αφοσιωμένη ομάδα επικεντρώθηκε σε ποσοτικό προσδιορισμό και την βελτίωση της απόδοσης των Yahoo! προϊόντων παγκοσμίως. Ως μέρος της δουλειάς μας, τη διεξαγωγή πειραμάτων που σχετίζονται με την απόδοση της σελίδας web. Μοιραζόμαστε τα ευρήματά μας έτσι ώστε άλλα front-end μηχανικοί μαζί μας για την επιτάχυνση της εμπειρίας του χρήστη στο διαδίκτυο.

Ο κανόνας 80/20 Απόδοση

Vilfredo Pareto, οικονομολόγος στις αρχές του 1900, έκανε μια περίφημη παρατήρηση όπου το 80% του πλούτου της χώρας ανήκει στο 20% του πληθυσμού. Αυτό ήταν αργότερα γενικευμένη σε αυτό που είναι συνήθως αναφέρεται ως η αρχή του Pareto (επίσης γνωστή ως ο κανόνας 80-20), το οποίο ορίζει για κάθε φαινόμενο, το 80% των συνεπειών προέρχονται από το 20% από τις αιτίες. Το βλέπουμε αυτό το φαινόμενο στην τεχνολογία λογισμικού, όπου το 80% του χρόνου που δαπανάται σε μόνο το 20% του κώδικα. Όταν θα βελτιστοποιήσει τις εφαρμογές μας, ξέρουμε να επικεντρωθεί σε αυτό το 20% του κώδικα. Αυτή η ίδια τεχνική θα πρέπει επίσης να εφαρμόζονται κατά τη βελτιστοποίηση των ιστοσελίδων. Οι περισσότεροι βελτιστοποίηση των επιδόσεων σήμερα γίνονται σχετικά με τα τμήματα που δημιουργούν το έγγραφο HTML (apache, C + +, βάσεις δεδομένων κλπ.), ενώ τα σημεία εκείνα μόνο συμβάλλουν σε περίπου 20% του χρόνου απόκρισης του χρήστη. Είναι καλύτερα να επικεντρωθεί στη βελτιστοποίηση των μερών που συμβάλλουν στην άλλη 80%.

Χρησιμοποιώντας ένα packet sniffer, ανακαλύπτουμε αυτό που γίνεται σε αυτό το άλλο 80%. Σχήμα 1 είναι μια γραφική προβολή της, όπου ο χρόνος δαπανάται φόρτωση http://www.yahoo.com με ένα κενό μνήμης cache. Κάθε γραμμή αντιπροσωπεύει ένα συγκεκριμένο συστατικό στοιχείο και εμφανίζεται με τη σειρά που ξεκίνησε από το πρόγραμμα περιήγησης. Η πρώτη γραμμή είναι ο χρόνος που δαπανάται για το πρόγραμμα περιήγησης για να ανακτήσετε μόνο το HTML έγγραφο. Ανακοίνωση μόνο το 10% του χρόνου ξοδεύεται εδώ για το πρόγραμμα περιήγησης στο αίτημα της HTML σελίδας, και για apache για να βελονιά μαζί του HTML και να επιστρέψει την απάντηση πίσω στον browser. Το υπόλοιπο 90% του χρόνου που δαπανάται γοητευτικός άλλα στοιχεία στη σελίδα, συμπεριλαμβανομένων εικόνων, scripts και των stylesheets.

Ο πίνακας 1 δείχνει δημοφιλείς δικτυακούς τόπους δαπάνες μεταξύ 5% και 38% του χρόνου λήψης του εγγράφου HTML. Το άλλο 62% έως 95% του χρόνου που δαπανάται κάνει αιτήσεις HTTP για να προσκομίσει όλα τα στοιχεία σε αυτό το έγγραφο HTML (π.χ. εικόνες, χειρόγραφα, και stylesheets). Οι επιπτώσεις της έχουν πολλά στοιχεία στην σελίδα επιδεινώνεται από το γεγονός ότι οι browsers κατεβάσετε μόνο δύο ή τέσσερις συνιστώσες παράλληλα ανά όνομα, ανάλογα με την έκδοση HTTP της απόκρισης και πρόγραμμα περιήγησης του χρήστη. Η εμπειρία μας δείχνει ότι η μείωση του αριθμού των αιτήσεων HTTP έχει τη μεγαλύτερη επίδραση στη μείωση του χρόνου απόκρισης και είναι συχνά ο ευκολότερος βελτίωση της απόδοσης να κάνει.

Δεν θα έπρεπε πάντα να αποθηκευτεί στη μνήμη cache του browser έτσι κι αλλιώς;

Το συμπέρασμα είναι το ίδιο: Η μείωση του αριθμού των αιτήσεων HTTP έχει τη μεγαλύτερη επίδραση στη μείωση του χρόνου απόκρισης και είναι συχνά ο ευκολότερος βελτίωση της απόδοσης να κάνει. Στο επόμενο άρθρο θα εξετάσουμε τις επιπτώσεις της προσωρινής αποθήκευσης, καθώς και μερικά εκπληκτικά πραγματικές διαπιστώσεις.

Αποποίηση: επιταγές Σχεδιασμός υπαγορεύει οπτικό πλούτο πρέπει να σταθμιστούν σε σχέση με το στόχο αυτό αίτημα μείωσης. Όταν χρειάζεστε οπτικό πλούτο, πρόσθετα μέτρα μπορούν να ληφθούν - συγκεντρώνει αρχεία JS, χρησιμοποιώντας CSS sprites, κλπ. - αλλά οπτικό πλούτο έχει την τάση να έρχεται σε αντίθεση με ένα λεπτό αγωγό αίτημα HTTP.

Εύρεση συζητήσεις: Bloglines | technorati

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

Βίντεο: Douglas Crockford, "Advanced JavaScript"

27 Νοεμβρίου του 2006 στις 10.59 π.μ. από τον Eric Miraglia | Σε Ανάπτυξης , Yui Θέατρο | 34 σχόλια

Τον περασμένο μήνα, έχω δημοσιεύτηκε κάποια βίντεο που ελήφθησαν από ένα από Douglas Crockford για παρουσιάσεις σχετικά με την τεχνολογία frontend ( Βίντεο: Douglas Crockford, «Μια άβολη API: Η Θεωρία της Dom" ). Εκείνοι που απολαμβάνουν βαθιά βουτιά Douglas του στο DOM μπορεί να ενδιαφέρονται, επίσης, στο έργο του "Advanced JavaScript" παρουσίαση, τώρα διαθέσιμη στο κοινό μέσω βίντεο Yahoo!. Σε αυτή την παρουσίαση - το τρίτο σε τρία μέρος σειράς διδάσκει στο Yahoo! - Douglas εξετάζει προσεκτικά τα πρότυπα κώδικα JavaScript από το οποίο οι προγραμματιστές μπορούν να επιλέξουν στην δημιουργία εφαρμογών τους. Συγκρίνει την οικεία κατασκευάσματα, όπως το Pseudoclassical Pattern με πιο μοναδικά σχέδια όπως το παρασιτικό πρότυπο που (ο ίδιος ισχυρίζεται) λειτουργούν πιο "με τα νερά" της JavaScript. Όταν Brendan Eich μίλησε στο Yahoo το καλοκαίρι περιέγραψε Ντάγκλας ως "Yoda λ προγραμματισμού και JavaScript"? Μετά βλέποντας "Advanced JavaScript," μπορεί να έχετε μια σαφή αίσθηση για το πού αυτό το συναίσθημα προέρχεται.

Φέρει επαναλαμβάνοντας ότι οι ιδέες και προοπτικές Douglas είναι δική του και ότι τα πολλά ελαττώματα videographic δεξιοτεχνία είναι δικά μου.

• Μέρος 1: 31 λεπτά
• Μέρος 2: 25 λεπτά
• Μέρος 3: 11 λεπτά
• Λήψη διαφανειών (συμπιεσμένο αρχείο του PowerPoint)
• Σημείωση: Αυτό το βίντεο είναι επίσης διαθέσιμο σε μια downloadable, μορφή συμβατή με iPod από το Θέατρο Yui.

Μπορείτε να ελέγξετε έξω Μέρος πρώτο παρακάτω:

Περισσότερα βίντεο

Το Θέατρο Yui τμήμα της ιστοσελίδας Yui περιέχει συνδέσεις με βίντεο από το συγγραφέα Firebug Joe Hewitt, Oddpost συνιδρυτής Iain Lamb, Yui μηχανικός Matt Sweeney, και πολλά άλλα.

Μια σημείωση σχετικά με τις μορφές βίντεο

Αυτό το βίντεο είναι επίσης διαθέσιμο σε μια downloadable, μορφή συμβατή με iPod από το Θέατρο Yui.

Εύρεση συζητήσεις: Bloglines | technorati

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

Graded Υποστήριξη Browser: Q4 Ενημέρωση

15 Νοέμβρη 2006 στις 1:42 π.μ. από τον Nate Koechley | Σε Ανάπτυξης | 17 Σχόλια

Περίπου κάθε τρεις μήνες ενημερώνουμε το διάγραμμα αναλυτικά προγράμματα περιήγησης που λαμβάνουν κατηγορίας Α υποστήριξη σύμφωνα με Graded Υποστήριξη Browser . Σε συνδυασμό με τη χθεσινή ενημέρωση Yui απελευθέρωση , εδώ είναι η ενημέρωση του προγράμματος περιήγησης μας υποστήριξη για Q4 2006.

Με λίγα λόγια: Μια βαθμού υποστήριξης ξεκινάει για τον Firefox 2.0, και επαναλαμβάνεται για IE7. Κατηγορίας Α υποστήριξη διακοπεί για IE 5.5 και Firefox 1.0. Σπάνια-χρησιμοποιείται Gecko παραγώγων (π.χ., Netscape και Mozilla Εφαρμογή Suite) λαμβάνουν πλέον X-βαθμού, αντί του βαθμού Α υποστήριξη. Opera 9 λαμβάνει τώρα κατηγορίας Α υποστήριξη για τις πρόσθετες εξέδρες.

Σε μορφή σφαίρα, είναι εδώ όλες τις αλλαγές σε αυτήν την ενημερωμένη έκδοση:

1. Επανάληψη της κατηγορίας Α υποστήριξη, IE 7, Win (XP)
2. Καταγγελία της κατηγορίας Α Υποστήριξη, IE5.5, Win
3. Έναρξη της κατηγορίας Α Υποστήριξη, Firefox 2.x, Win / Mac.
4. Καταγγελία της κατηγορίας Α Υποστήριξη, Firefox 1.0.x, Win / Mac.
5. Επέκταση της κατηγορίας Α υποστήριξη, Opera 9.x, Win / Mac
6. Καταγγελία της κατηγορίας Α υποστήριξη, Mozilla App Suite, Win / Mac
7. Καταγγελία της κατηγορίας Α υποστήριξη, Netscape, Win / Mac

Αν και θα πρέπει αναφοράς πάντα το επίσημο chart GBS που φιλοξενούνται στο δίκτυο προγραμματιστών Yahoo! , έχω συμπεριληφθεί ένα στιγμιότυπο του διαγράμματος αυτού του τριμήνου για χάρη υστεροφημία:

	Win 98	Win 2000	Win XP	Mac 10.3.x	Mac 10,4
IE 7.0			Κατηγορίας Α
IE 6.0	Κατηγορίας Α	Κατηγορίας Α	Κατηγορίας Α
Firefox 2.0 .*	Κατηγορίας Α	Κατηγορίας Α	Κατηγορίας Α	Κατηγορίας Α	Κατηγορίας Α
Firefox 1.5 .*	Κατηγορίας Α	Κατηγορίας Α	Κατηγορίας Α	Κατηγορίας Α	Κατηγορίας Α
Opera 9 .*	Κατηγορίας Α	Κατηγορίας Α	Κατηγορίας Α	Κατηγορίας Α	Κατηγορίας Α
Safari 2.0 *					Κατηγορίας Α

Κοιτώντας προς το μέλλον στο επόμενο τρίμηνο (2007Q1), θα εξετάσουμε σταδιακή απελευθέρωση υποστηριζόμενα προγράμματα περιήγησης, αλλά δεν αναμένονται σημαντικές αλλαγές.

Ευχαριστώ,
Nate

Εύρεση συζητήσεις: Bloglines | technorati

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

Yui έκδοση 0.12.0: TabView ελέγχου, βελτιωμένη τεκμηρίωση API, και Περισσότερα

13 του Νοεμβρίου του 2006 στις 6:35 pm από τον Eric Miraglia | Σε Ανάπτυξης | 23 σχόλια

Σήμερα ανακοίνωσε την έκδοση 0.12 της Βιβλιοθήκης Yui. Εδώ είναι τα κυριότερα σημεία:

• Η TabView Ελέγχου : Γράφει ο Yui Animation και Dom συγγραφέα Matt Sweeney , αυτή η δυναμική λύση καρτέλα είναι η νεώτερη προσθήκη Yui και διαθέτει ισχυρή υποστήριξη τόσο για την προοδευτική ενίσχυση και για το γυαλιστερό πλούτο. Αναχώρηση ρόστερ Matt της TabView παραδείγματα για μια ιδέα του τι το νέο στοιχείο ελέγχου μπορεί να κάνει? Εμφάνιση κώδικα σχετικά με τα παραδείγματα για να δείτε πως υλοποιείται.
• Βελτιωμένη Τεκμηρίωση: Yui προγραμματιστής Adam Moore ( Event , μεταφοράς και απόθεσης , Slider , TreeView ) έχει δημιουργήσει ένα νέο εργαλείο για τη δημιουργία τεκμηρίωσης API , που μας επιτρέπει να δημιουργήσει ενιαίο, διασταυρώνεται με API docs αναπόσπαστο AutoComplete -powered ελέγχου αναζήτησης . Η νέα έγγραφα API παρέχει στους προγραμματιστές μια σαφέστερη εικόνα των ταξικές δομές και να καταρτίζουν χωριστούς κατηγοριοποίηση για τις ιδιότητες και τις επιλογές διαμόρφωσης. Δεν μπορείτε ποτέ να πάτε πίσω στο Cheat Sheets πάλι ...
• ... Αλλά σε περίπτωση που ακόμα όπως εξαπατούν τα φύλλα: Τα Cheat Sheets ενημερώθηκε για την έκδοση 0,12 και περιλαμβάνει τα νέα έντυπα για TabView και για CSS Nate Koechley της επαναφοράς , Γραμματοσειρές και πλέγματα θεμέλια. Μπορείτε να κατεβάσετε όλες τις Yui εξαπατούν τα φύλλα από την ιστοσελίδα της Βιβλιοθήκης Yui.
• Μιλώντας για CSS πλέγματα: Nate έχει rev'd το πακέτο πλέγματα με ψητά υποστήριξη για 750px, 950px, και με πλήρη viewport («υγρή») διατάξεις. Πλέγματα 0,12 τριπλασιάζει τον αριθμό των υποστηριζόμενων διατάξεις και εξακολουθούν να βάρη στο πλαίσιο 3KB πριν gzipping. Έχουμε καταφέρει να διαμορφώσουμε την ιστοσελίδα Yui στο Reset / Γραμματοσειρές / Grids θεμέλιο τώρα και είμαστε αξιοποιώντας τη χρήση των νέων με πλήρη υποστήριξη viewport.
• Βελτιώσεις Καθ 'όλη τη Βιβλιοθήκη: Υπάρχουν βελτιώσεις που θα βρίσκονται σε όλη τη βιβλιοθήκη, από το Event 's νέα onContentReady μέθοδο σε ένα σημαντικά βελτιωμένο Ελέγχου Ημερολόγιο με ένα απλοποιημένο περιβάλλον για τη δημιουργία πολλών μηνών, εμφανίζει το ημερολόγιο (αν κάνετε αναβάθμιση από προηγούμενη έκδοση του Ημερολόγιο, δείτε το βήμα-προς-βήμα οδηγό αναβάθμισης ). Για τον πλήρη κατάλογο των αλλαγών, ανατρέξτε στην τεκμηρίωση απελευθέρωση σημειώσεις που συνοδεύει τη διανομή.

Θα δοθεί συνέχεια με περισσότερες πληροφορίες σχετικά με μερικά από τα θέματα αυτά αργότερα στην εβδομάδα. Για την ώρα, παρακαλώ να το δρόμο σας για να SourceForge για να κατεβάσετε την τελευταία διανομή Yui? δείτε τις σημειώσεις έκδοσης στην κατανομή για την πλήρη πρόδηλο αλλαγών σε ολόκληρη την βιβλιοθήκη. Όπως πάντα, η ιστοσελίδα Yui στο Δίκτυο Developer Yahoo! έχει όλες τις τελευταίες τεκμηρίωση.

Εύρεση συζητήσεις: Bloglines | technorati

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

JavaScript, Εμείς Σχεδόν new Ya

13 του Νοεμβρίου του 2006 στις 09:21 π.μ. από τον Douglas Crockford | Σε Ανάπτυξης | 54 σχόλια

JavaScript είναι μια πρωτότυπη γλώσσα, αλλά έχει ένα new φορέα που προσπαθεί να κάνει το βλέμμα περίπου όπως μια κλασική γλώσσα. Αυτό έχει την τάση να μπερδεύουν προγραμματιστές, που οδηγούν σε προβληματικά πρότυπα προγραμματισμού.

Ποτέ δεν πρέπει να χρησιμοποιήσετε new Object() σε JavaScript. Χρησιμοποιήστε το αντικείμενο κυριολεκτική {} αντ 'αυτού. Ομοίως, δεν χρησιμοποιούν new Array() , η χρήση του πίνακα κυριολεκτική [] αντ 'αυτού. Πίνακες σε τίποτα το έργο JavaScript όπως το συστοιχιών σε Java, και τη χρήση του Java-όπως σύνταξη θα σας μπερδέψει.

Μην χρησιμοποιείτε new Number , new String , ή new Boolean . Οι μορφές αυτές παράγουν περιττό περιτυλίγματα αντικείμενο. Απλά χρησιμοποιήστε απλά literals αντ 'αυτού.

Μην χρησιμοποιείτε new Function για τη δημιουργία αξιών λειτουργία. Η χρήση εκφράσεων λειτουργία αντ 'αυτού. Για παράδειγμα,

  κουφώματα [0]. onFocus = νέα λειτουργία ("document.bgColor = 'antiquewhite") 

Είναι καλύτερα γραφτεί ως

  κουφώματα [0] onFocus = λειτουργία () {document.bgColor = "antiquewhite»?}.? 

Η δεύτερη μορφή επιτρέπει ο compiler για να δείτε το σώμα λειτουργεί πιο γρήγορα, έτσι ώστε τυχόν λάθη σε αυτό θα ανιχνευθεί νωρίτερα. Μερικές φορές new Function χρησιμοποιείται από ανθρώπους που δεν καταλαβαίνουν πώς εσωτερική εργασία λειτουργίες.

  selObj.onchange = new Function ("dynamicOptionListObjects [" +
         dol.index + "] αλλαγή (αυτή).")? 

Εάν συνεχίσουμε να οργανισμοί λειτουργούν με χορδές, ο compiler δεν μπορεί να τους δει. Αν διατηρήσουμε φορείς λειτουργούν ως εκφράσεις string, δεν μπορούμε να τους δούμε ούτε. Είναι καλύτερα να μην το πρόγραμμα στην άγνοια. Κάνοντας μια συνάρτηση που επιστρέφει μια συνάρτηση, μπορούμε σαφώς να περάσει τις αξίες που θέλουμε να δεσμεύσει. Αυτό μας επιτρέπει να προετοιμάσει μια σειρά από selObj σε ένα βρόχο.

  selObj.onchange λειτουργία = (i) {
     λειτουργία return () {
         . dynamicOptionListObjects [i] αλλαγή (αυτή)?

     }?
 } (Dol.index)? 

Δεν είναι ποτέ μια καλή ιδέα να θέσει new , ακριβώς μπροστά από function . Για παράδειγμα, η new function παρέχει κανένα πλεονέκτημα στην κατασκευή νέων αντικειμένων.

  myObj = νέα λειτουργία () {
     this.type = «πυρήνα»?
 }? 

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

  myObj = {
     Τύπος: «πυρήνα»
 }? 

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

  var foo = λειτουργία νέων () {
     processMessages λειτουργία (μήνυμα) {
         alert ("Μήνυμα:" + message.content)?
     }
     this.init = λειτουργία () {
         εγγραφείτε ("/ mytopic", αυτό, processMessages)?
     }
 } 

Με τη χρήση new να κινήσει τη λειτουργία, το αντικείμενο κατέχει πάνω σε ένα άνευ αξίας prototype αντικείμενο. Ότι τα απόβλητα μνήμης χωρίς συμψηφισμό πλεονέκτημα. Αν δεν χρησιμοποιήσετε το new , δεν κρατήσει το χαμένο prototype αντικείμενο της αλυσίδας. Έτσι, αντί εμείς θα επικαλεστεί τη λειτουργία εργοστασίου με το σωστό τρόπο, χρησιμοποιώντας () .

  var foo = λειτουργία () {
     processMessages λειτουργία (μήνυμα) {
         alert ("Μήνυμα:" + message.content)?
     }
     επιστροφή {
         init: λειτουργία () {
             εγγραφείτε ("/ mytopic", αυτό, processMessages)?
         }
     }?
 } ()?

Έτσι, ο κανόνας είναι απλός: Η μόνη φορά που θα πρέπει να χρησιμοποιήσουμε το new φορέα εκμετάλλευσης να επικαλεστούν pseudoclassical λειτουργία Κατασκευαστής. Όταν καλείτε μια λειτουργία Κατασκευαστή, η χρήση των new είναι υποχρεωτική.

Υπάρχει χρόνος για new , και ένα χρόνο για να μην.

Εύρεση συζητήσεις: Bloglines | technorati

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