آموزش ۸ نکته برای بهینه سازی و افزایش کارایی کدهای JQuery

[هادی ناصح 18854]

در هر پروژه بهینه کردن و افزایش کارایی یکی از مهمترین اهداف در کدنویسی خواهد بود. JQuery هم از این قاعده مستثنی نیست. در این مقاله قصد دارم شما را با چند نکته مفید در این زمینه آشنا کنم که به نظر، هر توسعه دهندهء JavaScript ای که از فریم ورک JQuery استفاده می کند باید آنها را رعایت کند. این سوال را از خودتان بپرسید که آیا اسکریپت هایتان به اندازه ای که ممکن است سریع اجرا می شوند؟ آیا می توان با خطوط کدهای کمتر به همین نتیجه رسید؟ در اغلب حالات جواب این سوالات “نه” خواهد بود. در برنامه نویسی تحت وب ما اغلب تنها به فکر اتمام کار در موعد مقرر هستیم و در این شرایط برایمان فقط اجرای بی خطای اسکریپت در تمامی مرورگرها اهمیت دارد. حقیقت این است که با کمی تلاش بیشتر می توانیم برنامه ها و اسکریپت هایمان را موثرتر و با کارایی بیشتر تولید کنیم.

در این مقاله قصد دارم تا ۸ نکته را برایتان مطرح کنم که به شما کمک خواهد کرد تا مطمئن شوید پروژه های JQuery تان بهینه تولید شده اند.

[هادی ناصح 18854]

۱٫ بروز باشید! آیا از متدها و تکنیکهایی استفاده می کنید که منسوخ شده اند؟

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

 

منظورم از “منسوخ” این است که شاید روش های بهتری برای دستیابی به کدی که شما همیشه می نویسید باشد. راحت ترین روش برای فهم این موضوع این است که این سوال را از خودتان بپرسید: آیا شما تفاوت jQuery 1.3.2 و jQuery 1.4.2 را می دانید؟ اگر نه به خواندن ادامه بدهید!

تیم JQuery هر سال صدها ساعت را صرف پیدا کردن توابع جدید و بهینه سازی توابع فعلی کتابخانه JQuery می کنند.گاهی از خودم می پرسم آیا John Resig (سازنده کتابخانه JQuery) که برای افزایش کارایی کتابخانه اش بی وقفه تلاش می کند هم در طول شبانه روز می خوابد؟

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

 

Delegate/Undelegate

nextUntil

Chaining event handlers

Controlling a functions context

Does a element have something? (.has)

Element Unwrapping

Determining an object’s type

[هادی ناصح 18854]

اگر نه حتما مستندات آخرین نسخه های این کتابخانه را مطالعه کنید.

۱٫۴٫۱ features:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

1.4.2core features:

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

2. آیا تنها کدهایی را که برای اجرا نیاز هست بارگزاری می کنید؟

برخی توسعه دهنده ها تمام کدهای JQuery یک سایت را در تمام صفحات بارگزاری می کنند.(صرف نظر از اینکه آیا از آن کدها در آنجا استفاده می کنند یا خیر). اگر شما این کار را تا به حال انجام می دادید نگران نباشید! همیشه می توان عادت ها را ترک کرد.

چیزی که شما باید به خاطر بسپارید این است که JQuery برای اجرای تمام کدها وقت صرف خواهد کرد حتی اگر اجرای قسمتی از کدها لزومی نداشته باشد. شما می توانید با بررسی اینکه اجرای آن کد در این صفحه لزومی دارد یا خیر کارایی را افزایش دهید. به این منظور می توانید هر محتوای صفحه را با یک کلاس یا ID منحصر به فردی مشخص کنید و قبل از اجرای کد وجودش را بررسی کنید.

۳٫ تست واحد (Unit Testing)

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

کدام یک از شما برای کدهای JavaScript یا JQuery تست واحد می نویسید. من فکر می کنم ما توسعه دهنده های وب تمایل داریم فراموش کنیم که JavaScript هم مانند Java ،C++ یا .NET یک زبان برنامه نویسی هست که ممکن است باگ داشته باشد. کمی زمان بیشتری برای پروژه تان وقت بگذارید و برای کدهایتان تست واحد بنویسید. این کار واقعا ساده علاوه بر اینکه یک تمرین عالی برای مهندسی نرم افزار است هنگامی که قرار است کدتان بخشی از یک محصول زنده با کاربران زیاد باشد جزء لاینفک کارتان خواهد بود. در چنین پروژه هایی شما باید دقیقا بدانید رفتار کدتان چه خواهد بود.

حالتی را فرض کنید که از AJAX‌ برای بارگزاری قسمتی از محتوای صفحه استفاده می کنید. اگر زمان انتظار برای پاسخگویی سرور به درخواست از حد معمول بیشتر شد مطلوب است که به جای هنگ صفحه برای یک مدت طولانی با پیامی از کاربر بخواهیم صفحه را Refresh کند. من اعتقاد دارم کاربران قدردان توجه شما به جزئیات خواهند بود.

اگر به دنبال ابزارهای تست واحد JavaScript می گردید من به شما QUnit و FireUnit‌ را توصیه می کنم.

۴٫ کدهای JQuery تان را محک بزنید.

 

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

 

 

کدتان چقدر سریع است؟ اگر شما دنبال راهی برای افزایش کارایی کدهایتان هستید به سادگی زمانی را که هر تابع برای اجرا می گیرد را ثبت کنید. کنسول Firebug ثبت اطلاعات دیباگ کدها را برای توسعه دهنده های JavaScript خیلی راحت می کند. اما اگر به دنبال نتایج دقیق تری هستید Firebug‌ را ببندید و خودتان یک ابزار ساده برای این کار ایجاد کنید. (به خاطر داشته باشید که Firebug یک افزونه فایرفاکس است و خودش برای بروزرسانی GUI اش سرباری را به صفحه اعمال می کند) دقت کنید این یک مثال بسیار ساده است و شما نیاز خواهید داشت تا کد را بر حسب نیاز ویرایش کنید.

JavaScript:

 

function t() {
var time = new Date();
return time.getTime();
}

$(window).load(function() {
var s = t();
for (var i=0; i<10000; i=i+1) {
$('#content').html("hello");
}
$('#out').append( (t()-s) +'ms');
;((

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

محک زدن Benchmarking)) شما را از سرعت اجرای کدتان در تمامی مرورگرها آگاه می کند و وقتی درباره برنامه های JQuery بزرگ مبتنی بر AJAX یا انیمیشن های مبتنی بر JavaScript صحبت می کنیم اهمیت زیادی دارد.

[هادی ناصح 18854]

۵٫ با فشرده سازی فایل JS زمان بارگزاری را کمینه کنید.

 

 

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

 

 

 

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

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

(for any sites)

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

(for WordPress users)

 

 

6. Context در برابر Find

این موضوع که هر جا که امکان دارد باید در Selector از Context استفاده کنید صحت دارد اما باید این نکته را بدانید که موقعی که شما یک context به سازنده JQuery ارسال می کنید موجب یک فراخوانی تابع بی مورد می شود. JQuery به هر حال content.find(selector) را اجرا می کند. بنابر این در صورتی که صفحه تان واقعا از مزایای context بهره نمی برد از این گام اضافه صرف نظر کنید. برای مثال به کد زیر دقت کنید:

 

 

//This is context is typically used.
$('div', context ).doSomethingOrOther();

//But here, you can do the same thing minus the extra
//instance and the additional function call
context.find('div').doSomethingOrOther
;()

[هادی ناصح 18854]

7. Window.load

Document.ready چیز ترسناکی نیست. من و بسیاری از توسعه دهنده ها گاه و بیگاه کدهایمان را در این رویداد قرار می دهیم. اینکه $(function(){}); یا نسخه کاملترش را کجا استفاده می کنیم مهم نیست اما حقیقت این است که برنامه با استفاده از Window.load بهینه تر می شود. علت این است که document.ready در طول زمان رندر صفحه (در حالی که اشیاء هنوز در حال بارگزاری هستند) اجرا می شود و این موجب کمی واماندگی در صفحه می شود. شما می توانید با قرار دادن توابع در رویداد load (این رویداد وقتی تمام اشیاء فراخوانی شده در HTML بارگزاری شدند اتفاق می افتد) میزان مصرف CPU‌ را در زمان بارگزاری صفحه کاهش دهید.

۸٫ استفاده از JavaScript در کنار JQuery

JQuery یک راه خارق العاده برای افزایش سرعت طراحی صفحات وب می باشد اما موقعیت هایی وجود دارد که استفاده از JavaScript نسبت به فراخوانی توابع JQuery کارایی بیشتری را برای ما فراهم می کند.(برای مثال توابع کار با CSS)

برخی متدها مانند () Show و () hide سربار خود را بر سرعت اجرای کدها اعمال می کنند. همیشه سعی کنید با ترکیب کدهای JavaScript و JQuery توازنی بین پیچیدگی کدها و کارآمدی آنها بر قرار کنید.

همچنین در مواقعی که تمام چیزی که نیاز دارید چند خط JavaScript می باشد نیازی نیست از JQuery‌ استفاده کنید. (حتی نسخه فشردهء آن موجب حدود ۳۰Kb سربار اضافی موقع بارگزاری صفحه می شود). در مقابل اگر شما برنامه بزرگ و پیچیده ای می نویسید حتما از JQuery به جای JavaScript‌ استفاده کنید. بهترین تصمیم این است که با ترکیب JavaScript و JQuery از مزایای هر دو بر خوردار شویم.

نویسنده: Addy Osmani

برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید.

• ورود
• یا
• ثبت نام

مترجم: عبدالله میرزابیکی