Απόδοση JavaScript

Πώς να επιταχύνετε τον κώδικα JavaScript σας.

Μείωση των δραστηριοτήτων στον κύκλο

Η προγραμματιστική συχνά χρησιμοποιεί κύκλους.

Κάθε επαναληπτική διαδικασία, κάθε πρόταση στον κύκλο, συμπεριλαμβανομένων for Πρόταση, θα εκτελεστεί.

Κάθε πρόταση ή ανάθεση που μπορεί να τοποθετηθεί έξω από τον κύκλο θα κάνει τον κύκλο να τρέχει ταχύτερα.

Κακό κώδικας:

var i;
for (i = 0; i < arr.length; i++) {

Καλύτερος κώδικας:

var i;
var l = arr.length;
for (i = 0; i < l; i++) {

Κάθε επαναληπτική διαδικασία, το κακό κώδικα θα επισκεφτεί την ακολουθία. length Πρόσβαση σε ιδιότητες.

Καλή κώδικας θα επισκεφτεί έξω από τον κύκλο. length Πρόσθεστε, ώστε η επαναληπτική λειτουργία να είναι ταχύτερη.

Μείωση των προσβασμών στο DOM

Συγκριτικά με άλλο JavaScript, η πρόσβαση στο HTML DOM είναι πολύ αργή.

Αν περιμένετε να επισκεφτείτε έναν στοιχεία DOM αρκετές φορές, επισκεφθείτε μόνο μια φορά και χρησιμοποιήστε το ως τοπική μεταβλητή:

Παράδειγμα

var obj;
obj = document.getElementById("demo");
obj.innerHTML = "Hello";

Δοκιμάστε το προσωπικά σας

Μείωση του μεγέθους του DOM

Παρακαλώ προσπαθήστε να διατηρήσετε λιγότερους στοιχείους στο HTML DOM.

Αυτό θα αυξήσει πάντα τη φόρτωση της σελίδας και θα επιταχύνει τη δια渲染 (εμφάνιση της σελίδας), ειδικά σε μικρά εξοπλιστικά.

Κάθε φορά που προσπαθείτε να αναζητήσετε το DOM (π.χ. getElementsByTagNameΘα επωφεληθούν από μικρότερο DOM.

Αποφύγετε απευθείας μεταβλητές

Παρακαλώ μην δημιουργείτε νέες μεταβλητές που δεν σχεδιάζετε να αποθηκεύσετε τιμές.

Γενικά μπορείτε να αντικαταστήσετε τον κώδικα:

var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;

Χρησιμοποιήστε αυτό το κώδικα:

document.getElementById("demo").innerHTML = firstName + " " + lastName

Αναβολή φόρτωσης JavaScript

Παρακαλώ τοποθετήστε το σενάριο στο κάτω μέρος της σελίδας, ώστε ο περιηγητής να φορτώσει πρώτα τη σελίδα.

Κατά τη διάρκεια του κατεβάσματος του σεναρίου, ο περιηγητής δεν ξεκινά οποιεσδήποτε άλλες λήψεις. Επιπλέον, όλες οι δραστηριότητες ανάλυσης και διαμόρφωσης μπορεί να εμποδίσουν.

Η προδιαγραφή HTTP ορίζει ότι ο περιηγητής δεν πρέπει να κατεβάζει παράλληλα περισσότερα από δύο στοιχεία.

Μια επιλογή είναι να χρησιμοποιήσετε την ιδιότητα defer="true"Η ιδιότητα defer καθορίζει ότι το σενάριο θα εκτελεστεί μετά την ολοκλήρωση της ανάλυσης της σελίδας, αλλά εφαρμόζεται μόνο σε εξωτερικά σενάρια.

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

Παράδειγμα

<script>
window.onload = downScripts;
function downScripts() {
    var element = document.createElement("script");
    element.src = "myScript.js";
    document.body.appendChild(element);
}
</script>

Αποφύγετε τη χρήση with

Παρακαλώ αποφύγετε τη χρήση with κλειδί. Αυτό έχει αρνητικό αντίκτυπο στη ταχύτητα. Επίσης, θα μπερδέψει το JavaScript ορίζοντα.

στον σκληρό τρόπο.Δεν επιτρέπεται κλειδί with.