15
تشکر

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

جاوا اسکریپت - JavaScript

جاوا اسکریپت – JavaScript

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

متاسفانه تمام دولوپرها به این قانون توجه نمیکنند و ممکن است صفحه اصلی بعضی از سایت ها از یک مگابایت بیشتر شود، که این حجم (بیشتر از 1MB) برای کاربران Dial-Up واقعا سخت است.

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

خوشبختانه در زبان جاوا اسکریپت میتوان فهمید که کد نوشته شده در چه مدت زمانی اجرا میشود.

در ادامه همراه ما باشید…

Console Timing

فایرباگ، Webkit Inspector، Opera Dragonfly و IE11 از دستورات console.time و console.timeEnd پشتیبانی میکنند.

اگر مطالب “چگونه در مروگر لاغر شویم!!” را در آپارنت خوانده باشید، یکی از نکته های آن دستکاری نکردن DOM در موارد غیر ضروری بود. حال میخواهیم با استفاده از دستورات console، آزمایشی برای صحت این نکته انجام دهیم.

برای مثال در کد زیر ما ابتدا تگی با آی دی result را گرفته و متن درون آن را به صورت افزایشی از 1 تا 2999 تغییر میدهیم. یعنی در هر بار اجرای حلقه DOM را دستکاری میکنیم.


// start timer
console.time(“DOM update”);
// update
var p = document.getElementById(“result”);
for (var i = 0; i < 3000; i++) { p.innerHTML += i + " "; } // end timer console.timeEnd("DOM update"); [/javascript]

نتیجه زمان اجرا دستور بالا توسط دستور console.time، برابر زیر شد:

Console

Console

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


// start timer
console.time(“DOM update”);
// update
var p = document.getElementById(“result”),
j = 0;
for (var i = 0; i < 3000; i++) { j++; } p.innerHTML = j; // end timer console.timeEnd("DOM update"); [/javascript]

نتیجه زمان اجرای دستور بالا برابر زیر شد:

Console

Console

خودتان اختلاف زمانی بین دو کد را میبینید.

به این صورت توسط دستور console.time میتوانید زمان اجرای دستورات JavaScript خودتان را ببینید و آنها را بهینه سازی کنید.

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

 

  • علی می‌گه:

    عالی و کاربردی!


  • نظرات این مطلب بسته است.