در هر پروژه بهینه کردن و افزایش کارایی یکی از مهمترین اهداف در کدنویسی خواهد بود. 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...;1.4.2core features: http://api.jquery.com/category/version/1...p> < a> style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 10px; padding-right: 0px; padding-bottom: 10px; padding-left: 0px; line-height: 20px; text-align: justify; color: rgb(86, 86, 86); font-size: 12px; ">2. آیا تنها کدهایی را که برای اجرا نیاز هست بارگزاری می کنید؟ برخی توسعه دهنده ها تمام کدهای JQuery یک سایت را در تمام صفحات بارگزاری می کنند.(صرف نظر از اینکه آیا از آن کدها در آنجا استفاده می کنند یا خیر). اگر شما این کار را تا به حال انجام می دادید نگران نباشید! همیشه می توان عادت ها را ترک کرد. چیزی که شما باید به خاطر بسپارید این است که JQuery برای اجرای تمام کدها وقت صرف خواهد کرد حتی اگر اجرای قسمتی از کدها لزومی نداشته باشد. شما می توانید با بررسی اینکه اجرای آن کد در این صفحه لزومی دارد یا خیر کارایی را افزایش دهید. به این منظور می توانید هر محتوای صفحه را با یک کلاس یا ID منحصر به فردی مشخص کنید و قبل از اجرای کد وجودش را بررسی کنید. ۳٫ تست واحد (Unit Testing) کدام یک از شما برای کدهای JavaScript یا JQuery تست واحد می نویسید. من فکر می کنم ما توسعه دهنده های وب تمایل داریم فراموش کنیم که JavaScript هم مانند Java ،C++ یا .NET یک زبان برنامه نویسی هست که ممکن است باگ داشته باشد. کمی زمان بیشتری برای پروژه تان وقت بگذارید و برای کدهایتان تست واحد بنویسید. این کار واقعا ساده علاوه بر اینکه یک تمرین عالی برای مهندسی نرم افزار است هنگامی که قرار است کدتان بخشی از یک محصول زنده با کاربران زیاد باشد جزء لاینفک کارتان خواهد بود. در چنین پروژه هایی شما باید دقیقا بدانید رفتار کدتان چه خواهد بود. حالتی را فرض کنید که از AJAX برای بارگزاری قسمتی از محتوای صفحه استفاده می کنید. اگر زمان انتظار برای پاسخگویی سرور به درخواست از حد معمول بیشتر شد مطلوب است که به جای هنگ صفحه برای یک مدت طولانی با پیامی از کاربر بخواهیم صفحه را Refresh کند. من اعتقاد دارم کاربران قدردان توجه شما به جزئیات خواهند بود. اگر به دنبال ابزارهای تست واحد JavaScript می گردید من به شما QUnit و FireUnit را توصیه می کنم. ۴٫ کدهای JQuery تان را محک بزنید. کدتان چقدر سریع است؟ اگر شما دنبال راهی برای افزایش کارایی کدهایتان هستید به سادگی زمانی را که هر تابع برای اجرا می گیرد را ثبت کنید. کنسول Firebug ثبت اطلاعات دیباگ کدها را برای توسعه دهنده های JavaScript خیلی راحت می کند. اما اگر به دنبال نتایج دقیق تری هستید Firebug را ببندید و خودتان یک ابزار ساده برای این کار ایجاد کنید. (به خاطر داشته باشید که Firebug یک افزونه فایرفاکس است و خودش برای بروزرسانی GUI اش سرباری را به صفحه اعمال می کند) دقت کنید این یک مثال بسیار ساده است و شما نیاز خواهید داشت تا کد را بر حسب نیاز ویرایش کنید. JavaScript: <tbody style="margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-style: initial !important; border-color: initial !important; outline-width: 0px !important; outline-style: initial !important; outline-color: initial !important; background-image: none !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; text-align: left !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; background-position: initial initial !important; background-repeat: initial initial !important; "> <code style="background-image: none !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; padding-top: 0px !important; padding-right: 0.3em !important; padding-bottom: 0px !important; padding-left: 0px !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-style: initial !important; border-color: initial !important; outline-width: 0px !important; outline-style: initial !important; outline-color: initial !important; text-align: right !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: 2.7em !important; line-height: 1.1em !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; display: block !important; background-position: initial initial !important; background-repeat: initial initial !important; ">01</code> <code class="plain" style="background-image: none !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-style: initial !important; border-color: initial !important; outline-width: 0px !important; outline-style: initial !important; outline-color: initial !important; text-align: left !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; display: inline !important; color: rgb(0, 0, 0) !important; background-position: initial initial !important; background-repeat: initial initial !important; ">function t() {</code> <tbody style="margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-style: initial !important; border-color: initial !important; outline-width: 0px !important; outline-style: initial !important; outline-color: initial !important; background-image: none !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; text-align: left !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; background-position: initial initial !important; background-repeat: initial initial !important; "> <code style="background-image: none !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; padding-top: 0px !important; padding-right: 0.3em !important; padding-bottom: 0px !important; padding-left: 0px !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-style: initial !important; border-color: initial !important; outline-width: 0px !important; outline-style: initial !important; outline-color: initial !important; text-align: right !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: 2.7em !important; line-height: 1.1em !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; display: block !important; background-position: initial initial !important; background-repeat: initial initial !important; ">02</code> <code class="plain" style="background-image: none !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-style: initial !important; border-color: initial !important; outline-width: 0px !important; outline-style: initial !important; outline-color: initial !important; text-align: left !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; display: inline !important; color: rgb(0, 0, 0) !important; background-position: initial initial !important; background-repeat: initial initial !important; ">var time = </code><code class="keyword" style="background-image: none !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-style: initial !important; border-color: initial !important; outline-width: 0px !important; outline-style: initial !important; outline-color: initial !important; text-align: left !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: bold !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; display: inline !important; color: rgb(0, 102, 153) !important; background-position: initial initial !important; background-repeat: initial initial !important; ">new</code> <code class="plain" style="background-image: none !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-style: initial !important; border-color: initial !important; outline-width: 0px !important; outline-style: initial !important; outline-color: initial !important; text-align: left !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; display: inline !important; color: rgb(0, 0, 0) !important; background-position: initial initial !important; background-repeat: initial initial !important; ">Date();</code> <tbody style="margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-style: initial !important; border-color: initial !important; outline-width: 0px !important; outline-style: initial !important; outline-color: initial !important; background-image: none !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; text-align: left !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; background-position: initial initial !important; background-repeat: initial initial !important; "> <code style="background-image: none !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; padding-top: 0px !important; padding-right: 0.3em !important; padding-bottom: 0px !important; padding-left: 0px !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-style: initial !important; border-color: initial !important; outline-width: 0px !important; outline-style: initial !important; outline-color: initial !important; text-align: right !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: 2.7em !important; line-height: 1.1em !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; display: block !important; background-position: initial initial !important; background-repeat: initial initial !important; ">03</code> <code class="keyword" style="background-image: none !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-style: initial !important; border-color: initial !important; outline-width: 0px !important; outline-style: initial !important; outline-color: initial !important; text-align: left !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: bold !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; display: inline !important; color: rgb(0, 102, 153) !important; background-position: initial initial !important; background-repeat: initial initial !important; ">return</code> <code class="plain" style="background-image: none !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-style: initial !important; border-color: initial !important; outline-width: 0px !important; outline-style: initial !important; outline-color: initial !important; text-align: left !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; display: inline !important; color: rgb(0, 0, 0) !important; background-position: initial initial !important; background-repeat: initial initial !important; ">time.getTime();</code> <tbody style="margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-style: initial !important; border-color: initial !important; outline-width: 0px !important; outline-style: initial !important; outline-color: initial !important; background-image: none !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; text-align: left !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; background-position: initial initial !important; background-repeat: initial initial !important; "> <code style="background-image: none !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; padding-top: 0px !important; padding-right: 0.3em !important; padding-bottom: 0px !important; padding-left: 0px !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-style: initial !important; border-color: initial !important; outline-width: 0px !important; outline-style: initial !important; outline-color: initial !important; text-align: right !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: 2.7em !important; line-height: 1.1em !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; display: block !important; background-position: initial initial !important; background-repeat: initial initial !important; ">04</code> <code class="plain" style="background-image: none !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: initial !important; margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-style: initial !important; border-color: initial !important; outline-width: 0px !important; outline-style: initial !important; outline-color: initial !important; text-align: left !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; font-weight: normal !important; font-style: normal !important; font-size: 1em !important; direction: ltr !important; display: inline !important; color: rgb(0, 0, 0) !important; background-position: initial initial !important; background-repeat: initial initial !important; ">}</code><div class="line alt1" style="margin-top: 0px !important; margin-right: 0px !important; margin-bottom: 0px !important; margin-left: 0px !important; padding-top: 0px !important; padding-right: 0px !important; padding-bottom: 0px !important; padding-left: 0px !important; border-top-width: 0px !important; border-right-width: 0px !important; border-bottom-width: 0px !important; border-left-width: 0px !important; border-style: initial !important; border-color: initial !important; outline-width: 0px !important; outline-style: initial !important; outline-color: initial !important; background-image: none !important; background-attachment: initial !important; background-origin: initial !important; background-clip: initial !important; background-color: rgb(255, 255, 255) !important; text-align: left !important; float: none !important; vertical-align: baseline !important; position: static !important; left: auto !important; top: auto !important; right: auto !important; bottom: auto !important; height: auto !important; width: auto !important; line-height: 1.1em !important; f
