Εκφράζοντας IT

Συμπεριλάβετε το JavaScript στο κάτω μέρος του εγγράφου HTML

Αν δεν έχετε document.write (ή οποιαδήποτε δυναμική γενιά των περιεχομένων της σελίδας με javascripts) για να εισάγετε μέρος του περιεχομένου της σελίδας στα προγράμματά σας, μετακινήστε το σενάριο περιλαμβάνει δήλωση στο κάτω μέρος της σελίδας, πριν από το τέλος του tag body.
Η HTTP/1.1 προδιαγραφή προτείνει ότι οι browsers κατεβάσετε όχι περισσότερο από δύο συστατικά παράλληλα ανά όνομα. Αν σας εξυπηρετήσουμε τις εικόνες σας από πολλαπλά hostnames, μπορείτε να πάρετε περισσότερες από δύο λήψεις να εκδηλωθούν παράλληλα. Ενώ ένα σενάριο είναι το κατέβασμα, ωστόσο, ο browser δεν θα ξεκινήσει οποιαδήποτε άλλα λήψεις, ακόμη και σε διαφορετικά ονόματα εξυπηρετητών.
Υπάρχουν επίσης τρόποι για να δημιουργήσετε δυναμικά κόμβους SCRIPT και να φορτώσετε απομακρυσμένα σενάρια μετά φορτώνεται η σελίδα χρησιμοποιώντας AJAX.

Εξωτερικούς σας για το JavaScript

Χρήση εξωτερικών αρχεία JavaScript θα οδηγήσει σε ταχύτερη φόρτωση των σελίδων, επειδή τα αρχεία αποθηκεύονται προσωρινά το JavaScript από τον browser. «Inline JavaScript σε HTML έγγραφα πάρει κατεβάσει κάθε φορά που το έγγραφο HTML ζητείται. Αυτό ενδέχεται να μειώσει ουσιαστικά τον αριθμό των αιτήσεων HTTP έκανε, αλλά στη συνέχεια αυξάνει το μέγεθος του εγγράφου HTML. Εξωτερικά το JavaScript είναι αποθηκευτεί προσωρινά από το πρόγραμμα περιήγησης? Το μέγεθος του εγγράφου HTML, χωρίς να μειώνεται η αύξηση του αριθμού των αιτήσεων HTTP.
Σημειώστε ότι, εάν οι χρήστες στο site σας έχει πολλαπλές προβολές σελίδων ανά συνεδρία και πολλές από τις σελίδες σας επαναχρησιμοποιήσει τα ίδια scripts και των stylesheets, υπάρχει μια μεγαλύτερη δυνατότητα να επωφεληθούν από εξωτερικά αρχεία αποθηκεύονται προσωρινά.

Πακέτο JavaScript αρχεία σας

Στην περίπτωση των JavaScripts, σε αντίθεση με CSS, τα αρχεία θα μπορούσε να ανησυχείτε χρησιμοποιώντας κάποια πρότυπο αλγορίθμων που θα έδινε μια μείωση του μεγέθους του αρχείου από την απλή αφαίρεση χώρους ή καρτέλες. Ένα παράδειγμα javascript συσκευαστή μπορεί να βρεθεί εδώ http://dean.edwards.name/packer/

Ξεφορτωθείτε Κάθε αντίγραφο Σενάρια

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

Ελαχιστοποιήστε την πρόσβαση DOM στοιχεία όπου αυτό είναι δυνατό

Πρόσβαση σε στοιχεία DOM με JavaScript είναι τόσο αργή, ώστε να έχουν μια πιο αποτελεσματική τη σελίδα, θα πρέπει:
• Cache αναφορές για πρόσβαση σε στοιχεία
• Ενημέρωση των κόμβων "συνδεδεμένος" και στη συνέχεια προσθέστε τα στο δέντρο
• Αποφύγετε τον καθορισμό διάταξη με JavaScript

Ξεχωριστή Συμπεριφορά Περιεχόμενο και παρουσίαση

Ακριβώς όπως ξεχωριστή παρουσίαση (CSS / XSLT) από Περιεχομένου (XHTML / XML), θα πρέπει επίσης να χωρίσουμε Συμπεριφορά (Javascript). Αυτό ονομάζεται διακριτικό Javascript. Ακριβώς όπως έχουμε συνδεθεί με εξωτερικά αρχεία CSS, θα πρέπει να συνδεθεί με εξωτερικά αρχεία javascript.

Αντί της σκληρής συμπεριφοράς κωδικοποίησης στο περιεχόμενο (π.χ. onmouseover, onclick, κλπ.), η συμπεριφορά θα πρέπει να προστεθεί δυναμικά στοιχεία, κατηγορίες, και μοναδικά στοιχεία (ταυτότητες), χρησιμοποιώντας το DOM. Το θεμελιώδες έγγραφο, το περιεχόμενο, πρέπει να περιέχει μόνο έγκυρο XHTML / XML και δεν javascript.
Η Javascript πρέπει να αυξάνουν το περιεχόμενο με την προσθήκη συμπεριφορά. Το περιεχόμενο θα πρέπει να παραμείνει χρήσιμο και αξιοποιήσιμο χωρίς javascript (ή χωρίς την πλήρη υποστήριξη javascript).

Έχω αποθηκεύσει αυτό το άρθρο ηλικίες πίσω, έτσι Συγνώμη! Ι dont θυμάμαι την πηγή ... αλλά φάνηκε χρήσιμο, για εμάς που πρέπει να γνωρίζουν σχετικά με το κοινό για τους οποίους έχουμε αναπτύξει το site για ... Εδώ, λοιπόν, είναι

Βάρος σελίδων μπορεί να χρησιμοποιηθεί για τον προσδιορισμό του χρόνου λήψης για μια συγκεκριμένη σελίδα σε διάφορες ταχύτητες σύνδεσης στο Internet. Ως παράδειγμα, ο ακόλουθος πίνακας δείχνει τα download φορές για τρεις διαφορετικές σελίδες σε μια σειρά από δημοφιλείς ταχύτητες σύνδεσης.

Οφέλη από τη μείωση του βάρους της σελίδας;

Η θετική επίδραση της μείωσης των παροχών βάρος σελίδα δύο ιδιοκτήτες της ιστοσελίδας και των καταναλωτών. Δυνητικά οφέλη περιλαμβάνουν:

1. Σελίδες φορτώνονται πιο γρήγορα. Η πιο προφανής επίπτωση από τη μείωση του βάρους της σελίδας είναι ότι οι σελίδες της ιστοσελίδας σας θα φορτώσει γρήγορα για τους επισκέπτες, ανεξάρτητα από την ταχύτητα σύνδεσης τους.
2. Κάτω χρόνοι φόρτωσης της σελίδας δημιουργήσουν πιο άνετα οι επισκέπτες. Οι επισκέπτες είναι λιγότερο πιθανό να απογοητευτείτε και να πάνε αλλού εάν οι σελίδες σας φορτώνουν γρήγορα. Από την άλλη πλευρά, αργή φόρτωση σελίδων είναι ένας από τους πιο σίγουρους τρόπους για να χάσετε τους επισκέπτες και τους πιθανούς πελάτες.
3. Ταχύτερη φορτίο φορές θα συμβάλει στην αύξηση της μετατροπής. Περισσότεροι επισκέπτες θα μείνουν στο δικτυακό σας τόπο πλέον. Περισσότερα από αυτά θα καταλήγουν να κάνουν αγορές, να υπογράψει επάνω για το ενημερωτικό δελτίο σας, ή το βιβλίο-σήμανση site σας.
4. Το εμπορικό σήμα σας αντίληψη θα ενισχυθεί. Επιστρέφοντας πελάτες και για πρώτη φορά τους επισκέπτες θα είναι περισσότερο διατεθειμένοι να περιγράψει το site σας (και επιχειρήσεις) ως "επαγγελματίας" εάν οι σελίδες σας φορτώνουν γρήγορα.
5. Σελίδες με καθαρό, στερεά κώδικας θα πρέπει να αναπροσαρμόζονται συχνά πιο αποτελεσματικά από φυσικές μηχανές αναζήτησης.
6. Σελίδες βελτιστοποιημένη για το βάρος μπορεί να σώσει πραγματικά έξοδα εύρος ζώνης υψηλής επισκεψιμότητας ιστοσελίδες. 100.000 σελίδες το καθένα ζυγίζει 150 Kb θα απαιτήσει διπλάσιο εύρος ζώνης από τον ISP σας από 100.000 σελίδες κάθε βάρος, 75 Kb. Για παρόχους που χρεώνουν για το εύρος που χρησιμοποιείται ή συνταξιούχοι, η μείωση αυτή μπορεί να δημιουργήσει σημαντική εξοικονόμηση στις δαπάνες του εύρους ζώνης.

Εξετάστε τα ακόλουθα στοιχεία, που δημοσιεύθηκαν σε μια έκθεση

Βάλτε Stylesheets στο Top

Αν θέλετε μια σελίδα να φορτώσει σταδιακά? Που, θέλουμε το πρόγραμμα περιήγησης να εμφανίζει ό, τι περιεχόμενο έχει το συντομότερο δυνατό, να θέσει το CSS στην κορυφή της σελίδας μέσα στο κεφάλι έγγραφο. Αυτό καθιστά τις σελίδες φαίνεται να φορτώνει πιο γρήγορα, καθώς αυτό διευκολύνει την προοδευτική απεικόνιση της σελίδας. Αυτό είναι ιδιαίτερα σημαντικό για τις σελίδες με πολύ περιεχόμενο και για τους χρήστες με αργές συνδέσεις στο Διαδίκτυο.

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

Οι προδιαγραφές HTML W3 »αναφέρει επίσης ότι το CSS μου πρέπει να περιλαμβάνει στο τμήμα HEAD της σελίδας HTML. at the bottom of the page, so it's best not to use it. Επίσης, σημειώστε ότι, Σε IE @import συμπεριφέρεται το ίδιο με τη χρήση <link> στο κάτω μέρος της σελίδας, έτσι δεν είναι καλύτερο να το χρησιμοποιήσετε.

Αποφύγετε τη χρήση προγράμματος περιήγησης Ιδιαιτερότητες

Φίλτρα: Χρήση του φίλτρου αυξάνει την κατανάλωση μνήμης και εφαρμόζεται ανά στοιχείο, όχι ανά εικόνα, οπότε το πρόβλημα πολλαπλασιάζεται. Επίσης, τα φίλτρα IE ιδιοσκευασμάτων, ως εκ τούτου δεν θα λειτουργήσει όπως προβλέπεται σε άλλα προγράμματα περιήγησης. Αν θέλετε διαφάνεια ή το ντεγκραντέ φόντο, χρησιμοποιήστε 1Pixel με εικόνες.
Εκφράσεις: CSS εκφράσεις είναι ένα καλό χαρακτηριστικό γνώρισμα για να έχουν σε CSS, αλλά εξακολουθεί να είναι IE ιδιαίτερο χαρακτηριστικό. Επίσης, είναι σημαντικό να σημειωθεί ότι, αυτές οι εκφράσεις αξιολογούνται όταν η απόδοση της σελίδας και αλλαγή μεγέθους, κύλιση, ακόμα και όταν ο χρήστης μετακινεί το ποντίκι πάνω στη σελίδα. Περιττό να πούμε ότι αυτό θα μπορούσε να επηρεάσει την απόδοση της σελίδας σας. Ως εκ τούτου, με απλά λόγια, Αποφύγετε τη χρήση CSS εκφράσεις, εκτός εάν αισθάνεστε υπέρ της «ζυγίζει περισσότερα από τα μειονεκτήματά της»

Εξωτερικούς σας CSS

Χρήση εξωτερικών CSS θα οδηγήσει σε ταχύτερη φόρτωση των σελίδες επειδή τα αρχεία JavaScript και CSS είναι αποθηκευτεί προσωρινά από το πρόγραμμα περιήγησης. Inline CSS σε HTML έγγραφα πάρει κατεβάσει κάθε φορά που το έγγραφο HTML ζητείται. Αυτό ενδέχεται να μειώσει ουσιαστικά τον αριθμό των αιτήσεων HTTP έκανε, αλλά στη συνέχεια αυξάνει το μέγεθος του εγγράφου HTML. Εξωτερικό CSS αποθηκεύονται προσωρινά από το πρόγραμμα περιήγησης? Το μέγεθος του εγγράφου HTML, χωρίς να μειώνεται η αύξηση του αριθμού των αιτήσεων HTTP.

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

Πακέτο CSS αρχείου σας

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

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

Για τις ηλικίες, έχω τη σκέψη να ενοποιηθούν όλες οι βέλτιστες πρακτικές, διάβαζα κάθε λίγο και λιγάκι. Τέλος! Είχα πάρει τα κάτω για να τεθεί σε στυλό. Κατάλαβα ότι πρόκειται για τιτάνιο έργο να δημιουργήσει αυτό το έγγραφο μαμούθ, έτσι αποφάσισα να αφιερώσω μια ολόκληρη κατηγορία σε αυτό, γι 'αυτό θα μπορούσε να κρατήσει την προσθήκη πράγματα σχετικά με τις βέλτιστες πρακτικές, όπως και όταν τους συναντούν ...

Καλά! το περιεχόμενο εδώ θα είναι μια συγχώνευση των προσωπικών Πρακτικές ανάπτυξης UI μου Best με εκείνους που γράφτηκε από τους προγραμματιστές, όπως πρότυπο το Yahoo, το Google κλπ.

Παρακολουθήστε αυτό το χώρο και να κρατήσει browing την κατηγορία Best Practices

Απλή ομιλία (για όσους ποτέ ακούσει για DOCTYPE πριν από σήμερα)! DOCTYPE είναι η δήλωση σε ένα έγγραφο HTML που έρχεται πριν από την <HTML> ετικέτα, που μοιάζει κάτι σαν αυτό (επικολληθεί από την πηγή αυτής της πολύ σελίδας)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Συνεπώς, λύση στο πρόβλημα αυτό ήταν να

• επιτρέπει σε web developers οι οποίοι γνώριζαν τα πρότυπα τους, να επιλέξουν ποια λειτουργία να χρησιμοποιήσετε.
• συνεχίσει την εμφάνιση παλιά σελίδες σύμφωνα με το παλιό (παραξενιές) κανόνες.

Και DOCTYPE γεννήθηκε.

Έτσι, με βάση το αν η σελίδα είναι σχεδιασμένη στα πρότυπα ή όχι, μπορείτε να επιλέξετε το κατάλληλο DOCTYPE.

Παλιά σελίδων γραμμένο πριν από αυτά τα πρότυπα εισήχθησαν δεν έχουν DOCTYPE. Συνεπώς, όταν δεν υπάρχει DOCTYPE στο HTML σας τότε ο browser είναι σε λειτουργία παραξενιές.
Αλλά αν το DOCTYPE ορίζεται ως ένα από τα παρακάτω, τότε ο browser λέγεται ότι είναι σε αυστηρή λειτουργία.

<DOCTYPE HTML ΔΗΜΟΣΙΑ! "- / / W3C / / DTD HTML 4.01 Transitional / / EL" "http://www.w3.org/TR/html4/loose.dtd">