بهبود سرعت در جاوا اسکریپت (قسمت پایانی)

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

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

کارهایی در جاوا اسکریپت وجود دارد که شما با انجام آن ها می توانید به برنامه ی خود سرعت ببخشید و از کند شدن آن جلوگیری کنید. بیایید با آن ها آشنا شویم:

کاهش فعالیت حلقه ها

همانطور که می دانید ما از حلقه ها در تمام زبان های برنامه نویسی استفاده می کنیم و در واقع یکی از شایع ترین عناصر زبان های برنامه نویسی هستند. نکته ی جالب این است که هر Statement و دستوری که در یک حلقه وجود داشته باشد با اجرای حلقه یک بار اجرا می شود، بنابراین اگر قرار است حلقه 3 بار گردش کند تمام کدهای داخل آن نیز 3 بار اجرا می شوند. بر این اساس می توان گفت کد زیر به صورت بسیار بدی کد نویسی شده است:

var i;
for (i = 0; i < arr.length; i++) {
// کدها در این قسمت
}

روش صحیح نوشتن این کد به شکل زیر است:

var i;
var l = arr.length;
for (i = 0; i < l; i++) {
// کدها در این قسمت
}

با اینکه کد اول به شما خطایی نمی دهد و از نظر فنی و اجرایی صحیح است اما با هر بار اجرای حلقه دستور var l = arr.length نیز اجرا می شود و متغیری به نام l مقدار دهی می شود. آیا متوجه اشکال می شوید؟ ما نیازی نداریم هر بار متغیر را مقدار دهی کنیم و سرعت برنامه ی خود را پایین بیاوریم. روش صحیح را در کد دوم می بینید که یک بار طول آرایه را خارج از حلقه گرفته ایم، آن را در متغیر l قرار داده ایم و سپس متغیر را به حلقه داده ایم تا هر بار مقدار دهی نشود.

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

در مقایسه با statement های جاوا اسکریپت، دسترسی به عناصر DOM بسیار کند تر است. اگر فکر می کنید نیاز خواهید داشت چندین بار به یک عنصر HTML دسترسی پیدا کنید، یک بار آن را گرفته و درون یک متغیر قرار دهید. مثال:

<!DOCTYPE html>
<html>
<body>

<p id="demo"></p>

<script>
var obj;
obj = document.getElementById("demo");
obj.innerHTML = " Hello";
</script>

</body>
</html>

DOM را بهینه کنید

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

دوری از متغیرهای غیرضروری

اگر قصد ذخیره کردن مقداری را ندارید، بیهوده برای آن متغیر تعریف نکنید. به طور مثال به کد زیر نگاه کنید:

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

اگر بعدا در برنامه ی خود قصد استفاده ی چند باره از متغیر fullName را ندارید این کد را به شکل زیر بنویسید:

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

و برای استفاده ی یک باره، متغیر تعریف نکنید تا سرعت برنامه تان پایین نیاید.

به تاخیر انداختن اجرای جاوا اسکریپت

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

اگر دوست ندارید کدهایتان را به پایین صفحه انتقال دهید، روش دیگری نیز وجود دارد؛ شما می توانید از defer="true" در تگ script استفاده کنید. این دستور به مرورگر می گوید اسکریپت باید زمانی اجرا شود که صفحه ی وب ما کاملا بارگذاری (لود) شده باشد. البته یادتان باشد که این روش تنها برای اسکریپت های خارجی کار می کند، یعنی اسکریپت هایی که در فایل جداگانه نوشته شده باشند و نه در صفحه ی HTML.

همچنین شما می توانید از تابع زیر استفاده کنید که پس از بارگذاری صفحه، اسکریپت تان را به صورت خودکار به HTML اضافه می کند:

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

از with استفاده نکنید

هیچ وقت از کلیدواژه ی with استفاده نکنید چرا که تاثیر بدی در سرعت برنامه ی شما دارد و همچنین scope جاوا اسکریپت را شلوغ کرده و بهم می ریزد. جالب است بدانید که استفاده از with در حالت strict mode غیر مجاز است.

از Gzip و Minification استفاده کنید

تمام قوانینی که برای white space ها به شما گفته بودیم (مانند فرورفتگی کدها، فاصله گذاشتن بین علامت = و نام متغیر و ...) مربوط به مرحله کدنویسی است که مرحله ی development (به معنی توسعه) نام دارد. زمانی که می خواهید وب سایت خود را روی سرور قرار دهید تا مردم از آن استفاده کنند (مرحله ی production یا تولید) باید آن را minify و Gzip کنید.

به طور مثال بیایید این کد را minify کنیم:

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

پس از minify کردن، شکل کد به این صورت در می آید:

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

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

وب سایت های بسیاری برای minify کردن کدهایتان (چه CSS و چه JS یا هر کد دیگری) وجود دارد که یکی از آن ها minifier.org است.

قبل از پایان این دوره دوست دارم چند سوال را جواب بدهم:

1- آیا این تمام جاوا اسکریپت است؟

- خیر! این دوره شما را با دستورات، کدها و همچنین مسائل بدیهی جاوا اسکریپت آشنا کرد.

2- بقیه ی مسائل جاوا اسکریپت را از کجا یاد بگیریم؟

- دوره ی دسترسی به DOM از طریق جاوا اسکریپت را می توانید از این طریق این لینک شروع کنید.

3- چرا این دوره را از قسمت های دیگر جاوا اسکریپت جدا کردید؟

- به دلیل اینکه ممکن است برخی از افراد دستورات جاوا اسکریپت را بلد باشند و نیازی به گذراندن این دوره نداشته باشند. ممکن است مشکل آن ها دسترسی به DOM یا هر چیز دیگری باشد. با جدا کردن این دوره ها از هم، اطلاعات نظم بیشتری پیدا می کند و به نفع خود شماست. مطمئن باشید هیچ کم و کاستی در مجموع این دوره ها نخواهد بود و شما کاملا با جاوا اسکریپت آشنا خواهید شد.

4- تمرکز این دوره و دوره های آینده روی چه محوری است؟

- تمرکز من روی Front-end و طراحی وب است بنابراین مسائل node.js را پشتیبانی نمی کند. البته این بدین معنی نیست که این دوره به درد شما نمی خورد، بلکه از پیش نیاز ها و بدیهیات کار با جاوا اسکریپت در قسمت های دیگر وب است. اگر دوست دارید node.js و دیگر استفاده های جاوا اسکریپت را یاد بگیرید به دوره های زیر مراجعه کنید:

آموزش ویدیویی Node.js به صورت پروژه محور و کامل

آموزش Node.js به صورت متنی و رایگان

دوره آموزش جاوا اسکریپت پیشرفته به صورت متنی و رایگان

از همراهی شما سپاسگذارم و امیدوارم این دوره برایتان مفید بوده باشد.

در پناه حق.