defer='defer' σε scripts σε blogger

[foutzos]

Καλησπέρα σε όλους!

 

Αν έχω τον παρακάτω κώδικα ο οποίος παίρνει από αλλού ένα script και το φωρτόνει στην σελίδα πως μπορώ να βάλω και την εντολή defer='defer' μέσα και να δουλέψει;

υποτίθεται ότι έτσι φορτώνει πιο γρήγορα η σελίδα;

 

<script src='edwosyndesmostoujavascript' type='text/javascript' />

 

προσπαθώ να κάνω αυτό:

http://www.w3schools.com/tags/att_script_defer.asp

 

όταν βάζω την εντολή defer το script δεν δουλεύει καθόλου.

[sougiasdj]

Definition and Usage
The defer attribute is a boolean attribute.

When present, it specifies that the script is executed when the page has finished parsing.

Απλά περιμένει να φορτωθεί η σελίδα και μετά εκτελείτε ο js code.

[defacer]

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

 

Το πιθανότερο είναι πως κάπου παρακάτω έχεις κώδικα που εξαρτάται από το συγκεκριμένο script και γι' αυτό με defer δε δουλεύει.

[cyclo]

Το defer δεν είναι μαγική σκόνη που τη βάζεις και απλά φορτώνει πιο γρήγορα η σελίδα.

 

Το async τότε; ^^

[παπι]

Τι κανει αυτο; Ανοιγει αλλο script context?

[defacer]

Το async τότε; ^^

 

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

 

Όταν έχεις αυτοτελή scripts που δεν είναι inline τότε ναι, βάζεις async και απλά πάει γρηγορότερα.

[cyclo]

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

 

Όταν έχεις αυτοτελή scripts που δεν είναι inline τότε ναι, βάζεις async και απλά πάει γρηγορότερα.

 

Ακόμα και όταν δεν έχεις αυτοτελή scripts, μπορείς να τα φτιάξεις να είναι αυτοτελή, βάζοντας όλα τα js αρχεία σου σε 1 js.

 

Είναι μαγική σκόνη στην περίπτωση που τα script σου δεν είναι js dependant για κάθε σελίδα ξεχωριστά.

 

δηλαδή...

αν φτιάξεις 1 js αρχείο στο οποίο φορτώνεις όλα τα scripts σου για όλο το site...

 

(πράγμα που παλιά δεν κάναμε γιατί δεν υπήρχε το async)

 

δηλαδή απλά έχεις 1 js για όλο το site.

το βάζεις στο head και όχι πριν τελειώσει το dom.

 

θα δεις την ταχύτητα του site σου να βελτιώνεται ασύλληπτα πολύ.

 

Εκμεταλλεύεσαι το ασύγχρονο load, και το cache του browser.

 

Σταματάς να ανησυχείς για το performance του js μια για πάντα όσο μεγάλο για είναι το js σου.

[cyclo]

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

 

Όταν έχεις αυτοτελή scripts που δεν είναι inline τότε ναι, βάζεις async και απλά πάει γρηγορότερα.

 

Για παράδειγμα το 

http://www.esolutions.gr

 

 

Φορτώνω τις javascript στο head async

 

dom load uncached: 1.44s

dom load cached: .5s

 

με όλη τη javascript που χρειάζεται το site και όχι η συγκεκριμένη σελίδα να ανέρχεται στα 186kb

[defacer]

Ακόμα και όταν δεν έχεις αυτοτελή scripts, μπορείς να τα φτιάξεις να είναι αυτοτελή, βάζοντας όλα τα js αρχεία σου σε 1 js.

Βέβαια. Απλά αυτό δεν είναι πάντα εφικτό.

 

Για παράδειγμα βλέπω στο esolutions.gr ότι (σωστά) έχεις βάλει κάτι jquery onload μαζί με το ίδιο το jquery. Το πρόβλημα στη γενική περίπτωση είναι πως μπορεί να μην έχεις αυτή τη δυνατότητα. Π.χ. αν χρησιμοποιείς κάποιο framework που παράγει JS για διάφορα widgets που βάζεις στη σελίδα, αυτά είναι generated dynamically και άρα δε μπορείς να τα ενσωματώσεις όπως έκανες εσύ που έχεις την "πολυτέλεια" να είναι στατικά. Άρα μετά το jquery το ίδιο δε μπορεί να γίνει async κλπ κλπ.

[cyclo]

Βέβαια. Απλά αυτό δεν είναι πάντα εφικτό.

 

Για παράδειγμα βλέπω στο esolutions.gr ότι (σωστά) έχεις βάλει κάτι jquery onload μαζί με το ίδιο το jquery. Το πρόβλημα στη γενική περίπτωση είναι πως μπορεί να μην έχεις αυτή τη δυνατότητα. Π.χ. αν χρησιμοποιείς κάποιο framework που παράγει JS για διάφορα widgets που βάζεις στη σελίδα, αυτά είναι generated dynamically και άρα δε μπορείς να τα ενσωματώσεις όπως έκανες εσύ που έχεις την "πολυτέλεια" να είναι στατικά. Άρα μετά το jquery το ίδιο δε μπορεί να γίνει async κλπ κλπ.

 

Καμία διαφωνία, εδώ αν θες μπορούμε να πιάσουμε και την κουβέντα του "Κατασκευάζω ιστοσελίδα ή κάνω install ιστοσελίδα" :Ρ

 

Φυσικά αυτό ισχύει σε κάθε είδους development, όχι μόνο σε frameworks που παράγει js.

 

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

 

Όταν χρησιμοποιείς έτοιμα widgets ή (γενικότερα) έτοιμο κώδικα, αναγκαστικά παντρεύεσαι και τις παθογένειες ή τους περιορισμούς τους. Πράγμα που ισχύει σε όλα τα μήκη και πλάτη του προγραμματισμού.

 

 

Όταν όμως λες ότι το framework παράγει js τι εννοείς;;

ότι φτύνει το κατάλληλο js στο κατάλληλο σημείο του dom;

 

ή ότι γράφει μόνο του js π.χ χρησιμοποιώντας backend;

 

πάντως θα χαρώ να ανταλλάξουμε ιδέες σχετικά με το θέμα, είμαι λίγο performance freak

[aghahowa]

Αυτο το άρθρο του Craig Buckler ξεκαθαρίζει ολες σας τις διαφωνίες.

Εγώ χρησιμοποιώ require.js και κάνω concatenate τα scripts η οποία είναι και η πιο σωστή λύση.

[defacer]

Καμία διαφωνία, εδώ αν θες μπορούμε να πιάσουμε και την κουβέντα του "Κατασκευάζω ιστοσελίδα ή κάνω install ιστοσελίδα" :Ρ

 

Φυσικά αυτό ισχύει σε κάθε είδους development, όχι μόνο σε frameworks που παράγει js.

 

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

 

Όταν χρησιμοποιείς έτοιμα widgets ή (γενικότερα) έτοιμο κώδικα, αναγκαστικά παντρεύεσαι και τις παθογένειες ή τους περιορισμούς τους. Πράγμα που ισχύει σε όλα τα μήκη και πλάτη του προγραμματισμού.

 

 

Όταν όμως λες ότι το framework παράγει js τι εννοείς;;

ότι φτύνει το κατάλληλο js στο κατάλληλο σημείο του dom;

 

ή ότι γράφει μόνο του js π.χ χρησιμοποιώντας backend;

 

πάντως θα χαρώ να ανταλλάξουμε ιδέες σχετικά με το θέμα, είμαι λίγο performance freak

 

Εννοώ ότι όπως λες φτύνει js στο κατάλληλο σημείο.

 

Φαίνεται πως έχεις μια απόλυτη άποψη ότι το να παράγεται js από κάποιου είδους framework (δεν έγινα συγκεκριμένος είναι η αλήθεια) είναι κακό, περιοριστικό, δείγμα ετοιματζίδικης δουλειάς κλπ. Σ' αυτό διαφωνώ. Τώρα που ξεκαθάρισα πως μιλάμε για φτύσιμο JS θα πρέπει να καταλαβαίνεις πως τα πράγματα δεν είναι τόσο απλά όταν έχεις να κάνεις με nontrivial εφαρμογές.

 

Για παράδειγμα, και χωρίς να μπαίνω σε πιο περίπλοκες καταστάσεις ("framework"), έχεις ένα blog app το οποίο περιλαμβάνει διαχειριστική επιλογή για το άνοιγμα/κλείσιμο των comments συνολικά σε όλα τα άρθρα. Όταν τα comments είναι ανοιχτά χρειάζεται να τρέξεις έξτρα JS (ondomready) στις σελίδες προβολής άρθρων.

 

Πώς ακριβώς θα το υλοποιήσεις αυτό;

• Ο διαχειριστής μπορεί ανα πάσα στιγμή να αλλάξει το setting.
• Το να φορτώνεις πάντα την ανάλογη JS και απλά να είναι no-op αν τα σχόλια είναι απενεργοποιημένα είναι καγκουριά, γιατί συνεχίζοντας μ' αυτή τη λογική θα πρέπει να φορτώνεις την Άρτα και τα Γιάννενα ακόμα κι αν όλα είναι disabled από τη διαχείριση.
• Να έχεις έτοιμες διαφορετικές concat + minified εκδόσεις της όλα-σε-ένα JS όπως στο παράδειγμά σου δε μπορείς γιατί με Ν optional features πρέπει να συντηρείς 2^N διαφορετικές εκδόσεις.
• Να έχεις ένα στάνταρ αρχείο και να το κάνεις rewrite δυναμικά όποτε αλλάζουν οι ρυθμίσεις πέραν του ότι είναι ανεπιθύμητο (πολύ complexity χωρίς λόγο) είναι και πολύ επίφοβο στην πράξη γιατί έχεις μια δυσάρεστη επιλογή: είτε ξεχνάς το caching (τραγικό) είτε κάνεις το σταυρό σου ότι όλοι οι τυχόν downstream proxies (τους οποίους δεν ελέγχεις) θα σερβίρουν σωστό content. Αυτό στην πράξη δεν υπάρχει περίπτωση να γίνει, και όταν πάει στραβά οι χρήστες σου δε θα κατηγορήσουν τους downstream proxies αλλά "το ηλίθιο site".

Θα μπορούσα να το κάνω ακόμα πιο δύσκολο, σε σημείο που το να κάνεις έτσι concat + min τα πάντα βασικά να σε καταδικάζει στο γράψιμο κώδικα δομημένου ειδικά για να γίνει τελείως unmaintainable (π.χ. σχετικά μεταξύ τους πράγματα σκόρπια σε άσχετα μεταξύ τους αρχεία). Επίσης σκέψου ότι έτσι χάνεις σε κάθε περίπτωση και τη δυνατότητα να κάνεις abstraction, π.χ. έχω συνδυασμούς HTML + JS που κάνουν "rating control". Εφόσον αυτά έχουν κοινό interface όσον αφορά τη server-side γλώσσα μου τότε απλά αλλάζω ένα όνομα κάπου και όλη μου η εφαρμογή γυρνάει από το ένα είδος (π.χ. αστεράκια) στο άλλο (π.χ. slider). Αν τα έχεις όλα χύμα όπως προτείνεις αυτό απλά δεν υπάρχει περίπτωση να γίνει.

 

Νομίζω καταλαβαίνεις το point μου.

 

Αυτο το άρθρο του Craig Buckler ξεκαθαρίζει ολες σας τις διαφωνίες.

Εγώ χρησιμοποιώ require.js και κάνω concatenate τα scripts η οποία είναι και η πιο σωστή λύση.

 

Δε νομίζω ότι έχουμε διαφωνίες.

 

Με το require πάλι έχεις το ίδιο πρόβλημα που υπάρχει πάντα όταν έχεις race conditions, οπότε για να το λύσεις έχεις το ίδιο πρόβλημα που λέω παραπάνω (είσαι αναγκασμένος να διατηρείς προσεκτικά και χωρίς περιθώριο λάθους άσχετα μεταξύ τους αρχεία τα οποία καταλήγουν να "συνεργάζονται", abstraction μηδέν).

 

Το όλο ζουμί είναι στην έννοια του "αυτοτελούς" που λέω παραπάνω. Το jQuery μόνο του είναι αυτοτελές, αλλά τη στιγμή που θα γράψεις $(function το σύνολο του κώδικα σταματάει να είναι.

[cyclo]

• Το να φορτώνεις πάντα την ανάλογη JS και απλά να είναι no-op αν τα σχόλια είναι απενεργοποιημένα είναι καγκουριά, γιατί συνεχίζοντας μ' αυτή τη λογική θα πρέπει να φορτώνεις την Άρτα και τα Γιάννενα ακόμα κι αν όλα είναι disabled από τη διαχείριση.

 

 

  Δεν είναι καγκουριά :Ρ είναι τρόπος ζωής^^

 

 

 

Φαίνεται πως έχεις μια απόλυτη άποψη ότι το να παράγεται js από κάποιου είδους framework (δεν έγινα συγκεκριμένος είναι η αλήθεια) είναι κακό, περιοριστικό, δείγμα ετοιματζίδικης δουλειάς κλπ. Σ' αυτό διαφωνώ.

 

θα μου επιτρέψεις να έχω μία προκατάληψη για τα έτοιμα λόγω υπεροψίας:Ρ

όχι εντάξει, ίσως να ήμουν όντως απόλυτος... απλά σκεπτόμενος μονάχα τα milisecond που χρειάζεται για να φορτώσει το dom. Τίποτα παραπάνω.

 

 

 

Νομίζω καταλαβαίνεις το point μου.

 

 

Φυσικά, και έχω περάσει από το στάδιο και έχω προβληματιστεί πολύ.

 

Ως τόσο, εκμεταλλευόμενος τα async/cache, θεωρώ,

 

και είναι πέραν πάσας αμφιβολίας ταχύτερο, τουλάχιστον στα συμβατικά site, δε μιλάμε για εκατομμύρια js κώδικα...

 

ακόμα και στην περίπτωση που έχεις μεγάλο ποσοστό javascript που δεν χρησιμοποιείται σε κάθε σελίδα.

 

Από τη στιγμή που θα τα υλοποιήσεις έτσι και αλλιώς, και από τη στιγμή που τα cachareis.... και από τη στιγμή που το request γίνεται ασύγχρονα με το dom και το document load... 

 

 

 

 

Να έχεις έτοιμες διαφορετικές concat + minified εκδόσεις της όλα-σε-ένα JS όπως στο παράδειγμά σου δε μπορείς γιατί με Ν optional features πρέπει να συντηρείς 2^N διαφορετικές εκδόσεις

Δεν διαφωνώ, απλά επιλέγω άλλο δρόμο..

 

 

. Όταν τα comments είναι ανοιχτά χρειάζεται να τρέξεις έξτρα JS (ondomready) στις σελίδες προβολής άρθρων.

 

και εδώ είναι η διαφορά μας... Εγώ επιλέγω να τρέξω το js, ακόμα και όταν στο παράδειγμά σου δεν υπάρχουν comments η είναι απενεργοποιημένα. Πάλι στο ίδιο js αρχείο, φορτώνω τον κώδικα που απαιτείται για το "comment widget" για δύο λόγους μόνο... async, και cached

 

And they still run faster^^

 

αλλά σου ξαναλέω...

μιλάω για συμβατικά ή και μεγάλα αν θέλεις sites για τα ελληνικά δεδομένα.

 

αν μου πεις ότι έχεις 10 mb js.... σηκώνω τα χέρια ψηλά.

Επεξ/σία 24 Φεβρουαρίου 2014 από cyclo

[defacer]

  Δεν είναι καγκουριά :Ρ είναι τρόπος ζωής^^

 

ακόμα και στην περίπτωση που έχεις μεγάλο ποσοστό javascript που δεν χρησιμοποιείται σε κάθε σελίδα.

 

Από τη στιγμή που θα τα υλοποιήσεις έτσι και αλλιώς, και από τη στιγμή που τα cachareis.... και από τη στιγμή που το request γίνεται ασύγχρονα με το dom και το document load...

Το θέμα είναι πως θα πήξεις στο ψάξιμο του DOM, τη μία για να βρεις το Α, την άλλη για το Β κλπ και δε θα βρίσκεις τίποτα, οπότε αν παρατραβήξει το πράγμα μετά αρχίζει να καθυστερεί η μετατροπή της HTML σε κάτι interactive.

 

Τέλος πάντων δεν είναι ότι δε λύνεται κι αυτό το πρόβλημα (μπορείς να κάνεις dynamically create JS μέσα σε μια function και να βάλεις στο τέλος του minified script σου να καλείται αυτή), το point μου είναι ότι στην πράξη δε μπορείς έτσι απλά να πετάξεις ένα async και όλα καλά. Όπως και να το κάνεις για να γίνει σωστά θέλει προετοιμασία και one solution to rule them all δεν υπάρχει.

 

Επίσης επειδή πάει πολύ σε θέματα optimization η κουβέντα, σε τέτοιες περιπτώσεις δε μου αρέσει να ξεκινάω στα τυφλά. Πολλά είναι τα πράγματα που μπαίνουν στο perceived load time της σελίδας (αυτό είναι που μετράει τελικά), μπορεί κάλλιστα κάποια άλλα από αυτά να προσφέρουν τις ίδιες βελτιώσεις στο bottom line σου με λιγότερο "κόστος".