Performance ng JavaScript

Paano pabilisin ang iyong JavaScript kodigo.

Iwasan ang aktibidad sa loob ng loop

Ang paggamit ng loop ay madalas na ginagamit sa pamamahala ng kodigo.

Bawat iterasyon ng loop, ang bawat statement sa loob ng loop, kasama ang for Mga statement, ay papasasakop at ipapakita.

Ang mga statement o assignment na maaaring ilagay sa labas ng loop ay magiging mas mabilis ang pagliliko ng loop.

Mas masamang kodigo:

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

Mas mabuting kodigo:

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

Bawat iterasyon ng loop, ang mas masamang kodigo ay aksessihin ang array length Attribute.

Magandang kodigo ay aksessihin sa labas ng loop length Attribute, upang maging mas mabilis ang pagliko.

Iwasan ang pag-access ng DOM

Kumpara sa iba pang JavaScript, ang pag-access ng HTML DOM ay napakagalit.

Kung umaasahan mong aksessihin ang isang DOM elemento ng ilang beses, aksessihin ito isang beses lamang at gamitin ito bilang lokal na variable:

Example

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

Subukan nang personal

Iwasan ang paglaki ng DOM

Huwag masyadong magkaroon ng maraming elemento sa HTML DOM.

Ginagawa ito ng palaging pagtaas ng pagkakarga ng pahina, at pag-agilang ng paglilisay (pagpapakita ng pahina), lalo na sa mas maliit na aparato.

Bawat pagsubok na maghahanap ng DOM (katulad ng getElementsByTagNameLahat ng ito ay makikinabang sa isang mas maliit na DOM.

Iwasan ang hindi kinakailangang variable

Huwag lumikha ng bagong variable na hindi sa pananatili ng halaga.

Karaniwan, maaaring palitan ang kodigo:

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

Ginamit ang kodigo na ito:

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

Pagkahuli ng pagkakarga ng JavaScript

Ilang kailangan mong ilagay ang script sa ibaba ng pahina upang unang mag-load ang browser ng pahina.

When scripts are being downloaded, the browser will not start any other downloads. In addition, all parsing and rendering activities may be blocked.

HTTP specification defines that the browser should not download more than two elements in parallel.

One option is to use defer="true".defer attribute specifies that the script should be executed after the page is fully parsed, but it only applies to external scripts.

If possible, you can add scripts to the page through code after the page is fully loaded:

Example

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

Avoid Using with

Please Avoid Using with Keyword. It has a negative impact on speed. It will also confuse the JavaScript scope.

In Strict ModeNot Allowed with Keyword.