JavaScriptin suorituskyky


Sisällysluettelo

    Näytä sisällysluettelo


Kuinka nopeuttaa JavaScript-koodiasi.


Vähennä silmukoiden aktiivisuutta

Ohjelmoinnissa käytetään usein silmukoita.

Jokainen silmukan lauseke, mukaan lukien for-lause, suoritetaan jokaiselle iteraatiolle silmukka.

Lausekkeet tai tehtävät, jotka voidaan sijoittaa silmukan ulkopuolelle, tekevät silmukka kulkee nopeammin.

Huono:

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

Parempi koodi:

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

Huono koodi käyttää taulukon pituusominaisuutta joka kerta, kun silmukka on iteroitu.

Parempi koodi käyttää pituusominaisuutta silmukan ulkopuolella ja tekee silmukka kulkee nopeammin.


Vähennä DOM-käyttöä

HTML DOM:n käyttö on erittäin hidasta muihin JavaScript-lauseisiin verrattuna.

Jos aiot käyttää DOM-elementtiä useita kertoja, käytä sitä kerran ja käytä se paikallisena muuttujana:

Esimerkki

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

Kokeile itse →

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Performance</h2>

<p>If you expect to access a DOM element several times, access it once, and the use it as a local variable:</p>

<p id="demo"></p>

<script>
const obj = document.getElementById("demo");
obj.innerHTML = " Hello";
</script>

</body>
</html> 


Pienennä DOM-kokoa

Pidä HTML DOM:n elementtien määrä pienenä.

Tämä tulee aina olemaan parantaa sivujen latautumista ja nopeuttaa renderöintiä (sivun näyttöä), erityisesti pienemmissä laitteissa.

Jokainen yritys etsiä DOM:sta (kuten getElementsByTagName) hyödyttää pienemmästä DOM:sta.


Vältä tarpeettomia muuttujia

Älä luo uusia muuttujia, jos et aio tallentaa arvoja.

Usein voit korvata koodin seuraavasti:

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

Tämän kanssa:

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

Viivästyttää JavaScriptin latausta

Skriptien sijoittaminen sivun rungon alaosaan antaa selaimen ladata sivu ensin.

Skriptin lataamisen aikana selain ei käynnistä muita lataukset. Lisäksi kaikki jäsennys- ja renderöintitoiminnot voidaan estää.

HTTP-määritykset määrittelevät, että selaimet eivät saa ladata enempää kuin kaksi komponenttia rinnakkain.

Vaihtoehtona on käyttää komentosarjatunnisteessa defer="true". The defer-attribuutti määrittää, että komentosarja tulee suorittaa sen jälkeen, kun sivu on jäsennys on valmis, mutta se toimii vain ulkoisille skripteille.

Jos mahdollista, voit lisätä skriptin sivulle koodilla, kun sivu on latautunut:

Esimerkki

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

Vältä käyttöä

Vältä avainsanan ja käyttöä. Sillä on negatiivinen vaikutus nopeus. Se myös sotkee JavaScript-alueita.

with-avainsana ei ole sallittu tiukassa tilassa.