JavaScript-suorituskyky

Miten nopeutat JavaScript-koodiasi.

Vähennä silmukan toimintaa

Silmukat ovat usein käytettyjä ohjelmoinnissa.

Silmukan joka iterointi, silmukan kaikki lauseet, mukaan lukien for kaikki suoritetaan.

Silmukan ulkopuolella olevat lauseet tai asetukset voivat nopeuttaa silmukan suorittamista.

Huono koodi:

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

Paras koodi:

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

Huono koodi käy läpi aina silmukan length ominaisuuksia.

Hyvä koodi käyttää ominaisuuksia silmukan ulkopuolella length ominaisuuksia, jotta silmukka nopeutuu.

Vähennä DOM-kutsuja

JavaScriptin DOM-käsittely on paljon hitaampaa kuin muiden JavaScriptin osien kanssa.

Jos odotat käyttäväsi tiettyä DOM-elementtiä useita kertoja, käytä sitä vain kerran ja tallenna se paikalliseksi muuttujaksi:

Esimerkki

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

Kokeile itse

Pienennä DOM:n kokoa

Pyrkikää pitämään HTML DOM:n elementtien määrä mahdollisimman pienenä.

Tämä nostaa aina sivun latausta ja nopeuttaa renderöintiä (sivun näyttämistä), erityisesti pienemmillä laitteilla.

Jokainen DOM-hakukerta (esim. getElementsByTagName）hyötyvät pienemmästä DOM:sta.

Vältä tarpeettomia muuttujia

Älä luo uusia muuttujia, joita et aio tallentaa.

Yleensä voit korvata koodin:

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

Käytä tätä koodia:

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

Viivytä JavaScriptin lataamista

Laita skripti sivun alaan, jotta selain lataa sivun ensin.

Skriptejä ladataessa selain ei käynnistä muita latauksia. Lisäksi kaikki analysointi- ja renderöintitoiminnot voivat estää toisiaan.

HTTP-standardit määrittelevät, että selaimen ei pitäisi ladata yli kaksi elementtiä rinnakkain.

Yksi vaihtoehto on käyttää script-merkinnässä defer="true".defer-ominaisuus määrittää, että skripti tulisi suorittaa, kun sivu on käsitelty, mutta se pätee vain ulkoisiin skripteihin.

Jos mahdollista, voit lisätä koodia sivulle sen jälkeen, kun sivu on ladataan:

Esimerkki

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

Vältä käyttämistä with

Vältä käyttämistä with Käsitteellä. Se vaikuttaa nopeuteen kielteisesti. Se myös hämmentää JavaScript-ala-alueita.

Tiukassa moodissaEi sallittu with-käsitteellä.