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

بهینه سازی عملکرد های جاوا اسکریپت یک امر مهم و ضروری است.

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

جاوا اسکریپت (JS) یکی از رایج ترین و محبوب ترین زبان های برنامه نویسی است که از آن معمولا برای توسعه برنامه های تحت وب و موبایل استفاده میشود. محبوبیت این زبان در بین زبان های برنامه نویسی، باعث شده که کار بهینه سازی و توسعه عملکرد آن یک امر ضروری و مهم محسوب شود.

مواردی که باعث عملکرد نامناسب جاوا اسکریپت میشوند:

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

1. استفاده از Event Handler های کم کیفیت

استفاده از رویدادهای مناسبی مثل Event Handler می تواند عملکرد و سرعت جاوا اسکریپت را تقویت کند و عمق call stack را کاهش دهد.

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

2. کد نویسی نامنظم

به طور در کدنویسی با هر زبانی، یک سری قواعد برای خوانای و عملکرد بهتر پروژه وجود دارد که باید رعایت شود. داشتن کدها و دستورات منظم باعث میشود که توسعه دهندگان وقت خیلی کمی بر روی خواندن و بررسی کد ها بگذارند و به سرعت قطعه کد مورد نظر خود را پیدا کنند و تقریبا تمام وقت خود را بر روی توسعه آن بگذارند که این یک دستاورد بزرگ برای آنها محسوب میشود.

نامنظم و ناخوانا بودن کدها تا حد زیادی می تواند در عملکرد جاوا اسکریپت اختلال ایجاد کند. این می تواند عملکرد JavaScript را تا حدود زیادی مختل کند. بنابراین برای یادگیری و درک بهتر جاوا اسکریپت باید اکما اسکریپت (ECMAScript) را یاد بگیرید و هنگام کد نویسی از آن پیروی کنید.

اکما جاوا اسکریپت (ECMAScript) چیست؟ ECMA International سازمانی است که استاندارد های کلی و جزئی در حوزه ی فناوری را تعریف و مشخص میکند. برای مثال یکی از قواعد و استانداردهای رایجی که مطمئنا از آن آگاه هستید، چیدمان دکمه ها بر روی کیبورد کامپیوتر، لپ تاپ و گوش همراه است.

اگر توجه کنید متوجه میشوید که معمولا در تمام کیبورد ها، عدد ها در قسمت بالا، حروف لاتین و فارسی در پایین، کلید space در وسط و… قرار دارد. که به این نوع چیدمان، استاندارد QWERTY میگویند که توسط سازمان ECMA تعریف و تعیین شده است.

با توجه به تعریف و مثال بالا میتوان نتیجه گرفت که اکما اسکریپت شامل قوانین و دستورالعمل هایی است که سازمان اکما برا زبان برنامه نویسی جاوا اسکریپت تعیین کرده و برنامه نویسان برای داشتن پروژه های سازگار و استاندارد باید از آنها پیروی کنند.

3. استفاده زیاد از Dependency ها

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

4. استفاده از Iteration های ناکارآمد

در جاوا اسکریپت Iteration به معنی تکرار یک فرایند برای تولید دنباله ایی از نتایج است. که پروسه انجام آن، زمان بر است. با این حال برای عملکرد پروژه و برنامه مفید است. زیرا پروسه هایی که مدت زمان اجرای آنها طولانی است، یک نقطه شروع کامل و مناسب برای بهینه سازی جاوا اسکریپت، ایجاد می کنند.

مواردی که باعث عملکرد بهینه و مناسب جاوا اسکریپت میشوند:

1. اصلاح و مختصر سازی HTML

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

با نصف کردن کدهای برنامه HTML می توان سرعت DOM را دو برابر کرد. که یک کار چالش برانگیز محسوب میشود، اما به صورت کلی میتوان با کنار گذاشتن برچسب هایی مانند <div> و <span> این کار را انجام داد.

2. تغییر و دسته بندی DOM

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

برای جلوگیری از ایجاد و نمایش رندرهای تکراری در خروجی، DOM ها را به صورت کلی و یکجا دسته بندی کنید.

3. یادگیری متد های برنامه نویسی asynchronous

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

با توجه اینکه جاوا اسکریپت به صورت تک رشته ایی عمل میکند، برای هر عملکرد به یک میان افزار (Middleware) نیاز است. همچنین جاوا اسکریپت برای مدیریت asynchronous های برنامه از توابع async.js استفاده میکند.

با استفاده از ویژگی های توابع async در جاوا اسکریپت ، می توان به صورت همزمان از یک کتابخانه خارجی برای فراخوانی همه asynchronous ها استفاده کرد.

4. استفاده از فشرده ساز gzip

بعضی از فایل های جاوا اسکریپت، حجم زیادی دارند که باید فشرده یا Zip شوند. برای زیپ کردن و فشرده سازی فایل ها میتوانید از فشرده ساز GZip استفاده کنید. GZip زمان با کاهش lag time، عملکرد برنامه را افزایش می دهد و سپس پهنای باند را ذخیره می کند.

5. بکارگیری HTTP / 2

آخرین نسخه از HTTP که منتشر شده، HTTP / 2 است که در بهبود عملکرد جاوا اسکریپت و سرعت بخشیدن به عملکرد وب سایت بسیار موثر و تاثیرگذار است.

HTTP / 2 با استفاده از multiplexing، امکان ارسال همزمان چندین درخواست (request ) و پاسخ (respons ) را فراهم میکند مانند بافر کردن DOM.

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

6. محدود کردن dependency های کتابخانه

Loading time ها میتوانند dependency کتابخانه ها را affect کنند و یا تحت تاثیر قرار دهند پس مهم است که اندازه کمی از آنها را نگه دارید. بهترین راه برای به دست آوردن و مسلط شدن بر روی dependency های کتابخانه خارجی، به مرورگر فناوری بستگی دارد.

7. کدنویسی مختصر و واضح

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

آیا واقعا به این ماژول نیاز است؟
دلیل استفاده از این فریم ورک چیست؟
آیا ارزش هزینه اضافی دارد؟
آیا روش ساده تری برای انجام این کار وجود دارد؟

سپس با یکی کردن و یکپارچه سازی تمام فایل های JS، عملکرد جاوا اسکریپت را بهینه کنید.

8. پیاده سازی ابزارهای مدیریتی مخصوص بهینه سازی عملکرد JS

برای بهینه سازی عملکرد جاوا اسکریپت، حتما باید از یک ابزار مدیریت عملکرد استفاده شود. ابزارهای مدیریت عملکرد برنامه زیادی ارائه شده است که یکی از آنها ابزار Retrace است که همراه با RUM ارائه می شود. RUM سرعت عملکرد وب را بیشتر میکند و به شما امکان کنترل کامل کدهای جلوی و انتهای پشت را به طور همزمان می دهد و کار شناسایی و ردیابی گلوگاه ها را آسان تر میکند و راه حل های بهتری برای آن ارائه میدهد. وب سایت و برنامه هایی که بهتر بهینه سازی شوند نیز تعامل بسیار بهتری خواهند داشت. کاربرانی که به آنها مراجعه میکنند از سرعت و عملکرد آن راضی تر هستند و ترجیح میدهند که در محیط های بهینه شده فعالیت و خرید کنند.