Kuinka nopeuttaa JavaScript-koodiasi.
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.
for (let i = 0; i < arr.length; i++) {
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.
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:
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>
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.
Ä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;
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:
<script>
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
</script>
Vältä avainsanan ja
käyttöä. Sillä on negatiivinen vaikutus nopeus. Se myös sotkee JavaScript-alueita.
with
-avainsana ei ole sallittu tiukassa tilassa.