عملکرد جاوااسکریپت

با عملکرد جاوااسکریپت در این مقاله آشنا می شوید . دانستن چگونگی افزایش بارگذاری صفحه یکی از مواردی است که هر توسعه دهنده وب باید بداند. این آموزش به شما کمک می کند درک بهتری از عملکرد جاوا اسکریپت و چگونگی بهبود آن داشته باشید. بهترین روشهای جاوا اسکریپت که به شما امکان می دهد صفحه خود را سریعتر بارگذاری کنید ، با جزئیات توضیح داده خواهد شد.

شما خواهید فهمید که چگونه حلقه ها را به گونه ای بنویسید که سرعت بارگذاری را افزایش دهد ، در مورد دسترسی DOM بیاموزید و نقشی را که در کاهش سرعت صفحه شما بازی می کند ، درک کنید. ما استفاده از متغیرها و بخش آنها را در بهینه سازی های JavaScript پوشش خواهیم داد.

نکات اصلی عملکرد جاوااسکریپت:

• این آموزش به شما کمک می کند تا عملکرد اسکریپت های خود را تسریع کنید.
• به طور کلی ، یک کد ساختاریافته خوب با متغیرها و حلقه هایی که تقریباً مورد استفاده قرار می گیرند ، همیشه به اندازه کافی سریع اجرا می شوند.

کد غیر ضروری را از حلقه ها حذف کنید

حلقه ها در برنامه نویسی بسیار رایج است.

هر دستور در یک حلقه ، از جمله دستور for ، برای هر تکرار حلقه اجرا می شود. به همین دلیل است که فقط کدی که باید حلقه شود باید در کد کد حلقه باشد. بیایید ببینیم که چگونه می توان بهینه سازی JS را در این حالت انجام داد.

for (i = 0; i < myArray.length; i++) {
  // Your code
}

length = myArray.length;
for (i = 0; i < length; i++) {
  // Your code
}

در حالت اول ، ویژگی طول با هر تکرار قابل دسترسی است ، اگرچه نیازی به حلقه زدن در هر بار نیست و می تواند خارج از حلقه قرار گیرد.

بنابراین ، نسخه دوم آن را از بلوک کد حلقه ای خارج می کند ، و به حلقه اجازه می دهد تا سریعتر تکرار شود.

دسترسی DOM را کاهش دهید

دسترسی به DOM بسیار کند است ، اما شما اغلب در JavaScript به آن نیاز دارید.

اگر قصد استفاده مکرر از DOM را دارید ، بهتر است فقط یکبار به آن دسترسی داشته باشید ، و از آن در قالب یک متغیر محلی استفاده کنید.

elem = document.getElementById("myElement");
elem.innerHTML = "I'm in.";

اندازه DOM را کاهش دهید

باید سعی کنید از استفاده زیاد عناصر خودداری کرده و HTML DOM را کوچک نگه دارید.

با استفاده نکردن از عناصر زیاد ، زمان بارگیری وب سایت خود ، رندر ، که به ویژه در دستگاه های کوچک قابل توجه است را بهبود می بخشید. همچنین می تواند به عنوان بهینه سازی JS در نظر گرفته شود.

هر بار که DOM برای جستجوی یک عنصر نیاز دارد ، مقدار کمتری از عناصر به نفع شماست.

از متغیرهای غیرضروری اجتناب کنید

اگر قصد ذخیره مقداری را ندارید ، برای آن متغیری ایجاد نکنید.

به عنوان مثال ، در اینجا ما یک قطعه کد داریم که در آن نیازی به ایجاد یک متغیر نیست:

var name = firstName + " " + lastName;  
document.getElementById("myElement").innerHTML = name;

برای بهبود عملکرد می توانیم آن را به این قسمت تغییر دهیم:

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

تأخیر در بارگیری JavaScript

اگر اسکریپت خود را در پایین صفحه قرار دهید ، این امکان را برای بارگیری صفحه قبل از اعمال کد فراهم می کند.

در حالی که اسکریپت شما ، که معمولاً در پرونده دیگری یافت می شود ، بارگیری می شود ، مرورگر نمی تواند هیچ بارگیری اضافی و روند ارائه را شروع کند. تجزیه ممکن است مسدود شود.

روش دیگر ، شما می توانید از defer = “true” در داخل برچسب اسکریپت استفاده کنید. این ویژگی مشخص خواهد کرد که پس از پایان تجزیه صفحه ، اسکریپت اجرا نمی شود. با این حال ، این فقط برای اسکریپت های خارجی کار می کند.

همچنین ، می توانید اسکریپت را پس از بارگیری صفحه ، با استفاده از کدی مشابه کد موجود در مثال زیر ، به صفحه خود اضافه کنید.

window.onload = scriptsDown();
function scriptsDown() {
  var elem = document.createElement("script");
  elem.src = "javaScript.js";
  document.body.appendChild(elem);
}

توجه: با توجه به مشخصات HTTP ، هیچ دو مولفه نباید همزمان بارگیری شوند.

دوری از استفاده عملکرد جاوااسکریپت

باید از کلمه کلیدی همراه خودداری کنید. دامنه های جاوا اسکریپت را بهم می زند و می تواند سرعت صفحه را کم کند.

با کلمه کلیدی در حالت سخت مجاز نیست.

خلاصه عملکرد جاوااسکریپت:

• چندین روش برای انجام بهینه سازی های JavaScript وجود دارد.
• توجه به نحوه نوشتن حلقه ها مهم است.
• در صورت عدم ضرورت متغیرها را اعلام نکنید.
• سعی کنید از کلمه کلیدی همراه خودداری کنید.