کارایی (Performance)
می خواهیم کد جاوااسکریپت را تندتر کنیم. «کارایی (Performance)» یعنی انجام کار مشابه با زمان کمتر و فشار کمتر روی مرورگر. با چند عادت ساده، صفحه سبک تر می شود و سریع تر واکنش می دهد.
حلقه ها را خلوت کن
هر دور حلقه، همه دستورها اجرا می شوند. پس، کارهای اضافی را بیرون حلقه ببر.
// بد: هر دور، length را دوباره می خواند
for (let i = 0; i < arr.length; i++) {
// do work
}
// بهتر: length را یک بار بخوان
let l = arr.length;
for (let i = 0; i < l; i++) {
// do work
}
دسترسی به DOM را کم کن
DOM کندتر از کد عادی است. پس، عنصر را یک بار بگیر و نگه دار.
const obj = document.getElementById("demo");
obj.innerHTML = "Hello";
DOM را کوچک نگه دار
هرچه عناصر صفحه کمتر باشد، بارگذاری و رندر سریع تر می شود. جستجوی DOM هم سبک تر می شود.
متغیر اضافی نساز
وقتی نیاز به نگهداری نیست، متغیر وسطی نساز. مستقیم مقدار بده.
// قبل
let fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
// بعد
document.getElementById("demo").innerHTML = firstName + " " + lastName;
لود اسکریپت ها را عقب بینداز
وقتی اسکریپت دانلود می شود، مرورگر بقیه کارها را کند می کند. پس بعد لود صفحه، اسکریپت را اضافه کن یا از defer استفاده کن.
window.onload = function() {
const element = document.createElement("script");
element.src = "myScript.js";
document.body.appendChild(element);
};
نکته: ویژگی defer باعث اجرای اسکریپت بعد از پارس HTML می شود.
از with استفاده نکن
کلمه with فضاهای نام را به هم می ریزد و کند می کند. در حالت strict هم مجاز نیست.
گام های عملی
- طول آرایه را بیرون حلقه ذخیره کن.
- مرجع عنصر DOM را کش کن.
- متغیر اضافی نساز و مستقیم مقدار بده.
- اسکریپت ها را با defer یا بعد از onload لود کن.
جمع بندی سریع
- حلقه سبک، صفحه سریع تر.
- DOM کمتر، رندر تندتر.
- متغیر کمتر، حافظه کمتر.
- لود دیرتر، تجربه بهتر.
ادامه بده با اشتباهات رایج و از راهنمای نگارش برای کد خوانا استفاده کن.