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

جمعه, ۱۵ام مرداد , ۱۳۸۹ | ۱۲ دیدگاه

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

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


منظورم از “منسوخ” این است که شاید روش های بهتری برای دستیابی به کدی که شما همیشه می نویسید باشد. راحت ترین روش برای فهم این موضوع این است که این سوال را از خودتان بپرسید: آیا شما تفاوت 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

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

۱٫۴٫۱ features: http://api.jquery.com/category/version/1.4.1/
۱٫۴٫۲core features: http://api.jquery.com/category/version/1.4.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');
});

HTML:

<div>Time:</div>
<div>Content:</div>

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

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

http://jscompress.com/ (for any sites)
http://www.halmatferello.com/lab/wp-js/ (for WordPress users)

۶٫ 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();

۷٫ 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

http://addyosmani.com/blog/8-jquery-performance-tips/

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

http://twitter.com/abdollah2

Be Sociable, Share!


۱۲ دیدگاه


  1. مسعود
    ۱۵ مرداد ۱۳۸۹

    مطلب خوبی بود ولی چیزی که باعث شد من کامنت بزارم ذکر منبع بود که در وبلاگ های ایرانی کمتر دیده میشه.

    ممنون از ترجمه خوبتون.




  2. سارا
    ۱۶ مرداد ۱۳۸۹

    خیلی خوب و لازم بود مرسی




  3. مرتضی
    ۱۶ مرداد ۱۳۸۹

    سلام،
    از اینکه منبع رو ذکر کردید لذت بردم! البته مطلب هم عالی بود. موفق باشید.




  4. mehrdad
    ۱۸ مرداد ۱۳۸۹

    مرسی واقعا مفید بود!




  5. کاوه
    ۲۱ مرداد ۱۳۸۹

    عالی بود، دسست درد نکنه




  6. مهرداد
    ۱۱ آبان ۱۳۸۹

    جالب بود
    البته لازم به ذکر هست که خود jquery موقع اتچ شدن نسخه های منعدد داری
    از jquery.min.js گرفته که تا اونجا که من میدونم کوچکترین کتابخونه هست تا کتابخونه های دیگه

    باید بسته به نوع نیازی که داریم از کتابخونه مربوطه استفاده کنیم.

    نمیدونم اگه اشتباه میکنم لطفا دوستان متذکر بشن.




  7. 4future » HTML5 و آینده وب
    ۱۳ آبان ۱۳۸۹

    […] در ITT یک پست مهمان نوشتم! ولی از این به بعد به همراه دوست […]




  8. محمد
    ۶ بهمن ۱۳۸۹

    سلام.من یه سوال درباره جی کوئری دارم و اون اینه که چه جوری میتونم یه چیزی مثل سایت igoogle درست کنم.یعنی کاربر بتونه منو ها رو جابه جا بکنه؟؟




  9. ali
    ۹ فروردین ۱۳۹۰

    مطالب مفیدی بود.
    تشکر




  10. آرش
    ۱۵ تیر ۱۳۹۰

    عــــــــــــــــــالی بـــــــــــــــــــــود




  11. رضا
    ۲۸ مرداد ۱۳۹۰

    سلام
    اگه کتابخانه ها رو بروز کنیم مثلا الان فایل jquery1.2.3.js رو داریم با jquery1.3.5.js عوض کنیم.آیا لازم هست بعضی توابع مربوط به کدهایی که در سند اچ تی ام ال یا پی اچ پی استفاده کردیم هم تغییر کند یا نه؟؟




  12. meysam
    ۲۳ دی ۱۳۹۰

    خیلی مطالب خوبی بود



دیدگاه خود را بنویسید