با سلام به مشا دوستای عزیزم، حاتون چطوره؟ خوبین که انشاء..با آموزش نحوه ی بهینه سازی کارایی و سرعت اجرای کد در جاوا اسکریپت در خدمت شماهستیم.
فعالیت های داخل حلقه (loop) را به حداقل برسانید.
حلقه ها یا به زبان انگلیسی loops فراوان در برنامه نویسی به کار می روند.
هر دستور داخل ساختار حلقه، که شامل خود دستور for نیز می شود، به ازای هر بار تکرار (گام) حلقه اجرا می شود.
بدنبال آن دسته از دستورات یا انتساب هایی (assignment) که امکان قرار دادن و اجرای آن ها بیرون از حلقه وجود دارد بگردید.
نمونه کدی که بد نوشته شده
for (i = 0; i < arr.length; i++) {
کدی که بهینه نوشته شده است.
l = arr.length;
for (i = 0; i < l; i++) {
نمونه کدی که بد نوشته شده، به ازای هر بار تکرار حلقه، مجبور است به خاصیت length آرایه دسترسی پیدا کند.
در حالی که کد بهینه نوشته شده، خاصیت length را بیرون از حلقه قرار داده (از بیرون به آن دسترسی پیدا می کند) و در نتیجه سرعت اجرای حلقه را به مراتب افزایش می دهد.
DOM Access(دسترسی به مدل شی گرای سند( را تا حد امکان کاهش دهید.
دسترسی به مدل شی گرای سند (HTML DOM) به خصوص در مقایسه با دیگر دستورات جاوا اسکریپت بسیار بسیار کند می باشد.
چنانچه ملزوم به چندین بار استفاده از (دسترسی به) المان DOM هستید، توصیه می کنیم یکبار به آن دسترسی پیدا کرده، سپس برای استفاده های بعدی آن را به صورت متغیر محلی مورد استفاده ی خود قرار دهید.
مثال
obj = document.getElementById("demo");
obj.innerHTML = "Hello";
حجم و اندازه ی DOM را کاهش دهید.
تعداد المان های موجود در HTML DOM را تا جایی که امکان دارد، محدود نگه دارید. این کار همیشه باعث بهینه سازی پروسه ی بارگذاری صفحه و نیز افزایش سرعت اجرا و نمایش (rendering) صفحه به ویژه در دستگاه های کوچک می شود.
هر بار تلاش برای جستجوی DOM (مانند getElementsByTagName) از DOM کوچکتری بهره می گیرد.
از ایجاد متغیرهای غیرلازم خودداری کنید.
چنانچه قصد ذخیره کردن مقادیر جدید ندارید، از ایجاد متغیرهای غیر ضروری خودداری کنید.
می توانید نمونه کد زیر را
var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName;
با کد زیر جایگزین کنید.
document.getElementById("demo").innerHTML = firstName + " " + lastName
بارگذاری کدهای جاوا اسکریپت را به تاخیر بیاندازید.
جای گذاری اسکریپت های خود در قسمت پایینی بدنه ی صفحه (page body)، به مرورگر این اجازه را می دهد که ابتدا صفحه را بارگذاری (load) کند.
هنگامی که یک اسکریپت در حال دانلود شدن می باشد، مرورگر هیچ بارگیری (دانلود) دیگری را آغاز نمی کند، به علاوه ممکن است کلیه ی فعالیت های مربوط به rendering (اجرا و نمایش) و parsing (تجزیه) متوقف (block) شود.
توجه: پروتکل HTTP امکان دانلود بیش از دو کامپوننت به طور موازی (همزمان) را به مرورگرها نمی دهد.
یک روش جایگزین این است که از defer="true" در تگ اسکریپت (script tag) استفاده کنید. خصیصه ی defer تعیین می کند که اسکریپت فقط پس از اتمام فرایند parsing یا تجزیه ی صفحه اجرا شود، اما لازم است توجه داشته باشید که این کار را تنها می توان برای اسکریپت های خارجی (external scripts) انجام داد.
در صورت امکان، می توان اسکریپت خود را به وسیله ی کد و پس از پایان بارگذاری صفحه، به صفحه ی مورد نظر اضافه کرد.
مثال
window.onload = downScripts;
function downScripts() {
var element = document.createElement(“script”);
element.src = “myScript.js”;
document.body.appendChild(element);
}
از بکار بردن کلید واژه ی with خودداری کنید.
واژه ی کلیدی مزبور تاثیر منفی بر روی سرعت داشته و همچنین scope های جاوا اسکریپت را به هم می ریزد.
استفاده از کلیدواژه ی مزبور در strict mode امکان پذیر نمی باشد.
