کدهای jQuery خود را سریع تر کنید.

[vb_bmw]

به نام خدا

سلام.

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

بین این نکات یک سری نکات حرفه ای وجود داره که اون ها رو دونه دونه بحث میکنم.

/

خوب توی دنیای jQuery یه نقطه ضعف بزرگ وجود داره که توی بحث های تخصصی که میشه بهش گیر میدن.اون هم حجم کتاب خونه اصلی هست.

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

این آموزش به چند نکته ( Tip ) برای بهبود سرعت کد های jQuery اشاره خواهد کرد.


1 - استفاده از window.load
بیشتر آموزش هایی که شما احتمالا دیده اید کد های خود را درون بلوک :



$(document).ready(function() {
//کد های شما اینجا قرار میگیرد
});
قرار میگیرد.این امر باعث میشه که زمانی که تا کل فرم لود نشده عملیات های شما انجام بشه.پیشنهاد میشه کد های خودتون رو درون بولک های زیر بزارید تا سریع تر اجرا بشن:




$(window).load(function() {
//کد های شما اینجا قرار میگیرد
});
با این کار فشار زیادی رو از روی CPU بر مدارید.چون تمام آبجکت ها دانلود شده و آماده کار هستند.البته استفاده از روش اول هم خیلی جاها کاربرد داره...

2 - استفاده از ID به جای Class

برای انتخاب یک شی خاص از ID استفاده کنید.دلیل این امر اینه که :


زمانی که از کلاس ها استفاده کنید امکان داره چند کلاس هم نام وجود داشته باشه و جست و جو بین این شی ها زمان گیر هست.
زمانی که از ID استفاده میکنید.مستقیم از document.getElementById استفاده میشه که بالا ترین سرعت دسترسی رو داره.

3 - کش کردن شی.

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


$(document).ready(function() {
var mydiv = $("div#mydiv");
mydiv.click(function() {
mydiv.html("MDP(ask me for impossibles...)");
});
});4 - استفاده از نام تگ ها.

بعد از ID سریع ترین دسترسی برای getElementsByTagName() هست.

لازم به ذکر هست که ترکیب مورد 3 و 4 بهترین دسترسی در jQuery هست.یعنی :


$(".mydiv");
$("#mydiv");
$("div#mydiv");از بدترین به بهترین.

5 - استفاده درست از chaining

یکی از جذابیت های jQuery قابلیت chaining هست یعنی شما میتونید کد مثل زیر رو بنوسید :



$(document).ready(function() {
var mydiv = $("div#mydiv");
mydiv.click(function() {
mydiv.html("MDP(ask me for impossib
les...)").fadeTo(2000, 0.5).append($("<a>click me !</a>").attr("href", "http://www.daneshpour.org/")).css({ "font": "12px 'Comic Sans MS'"});
});
});
اگر دقت کنید میبینید من دستورات زیادی رو که قرار بود روی آبجکت خاصی اعمال بشه رو توی یک خط پیاده سازی کردم.این علاوه بر کم کردن حجم کد به خوانایی کد شما هم کمک میکنه.

ولی استفاده اشتباه از chaning باعث مشکلات زیادی میشه.


پایان بخش اول.

[Exception]

سلام،
با تشکر از مطلب شما، بعضی مواردی که مطرح کردین، درست نیستند!


1 - استفاده از window.load
بیشتر آموزش هایی که شما احتمالا دیده اید کد های خود را درون بلوک :



$(document).ready(function() {
//کد های شما اینجا قرار میگیرد
});
قرار میگیرد.این امر باعث میشه که زمانی که تا کل فرم لود نشده عملیات های شما انجام بشه.پیشنهاد میشه کد های خودتون رو درون بولک های زیر بزارید تا سریع تر اجرا بشن:




$(window).load(function() {
//کد های شما اینجا قرار میگیرد
});
با این کار فشار زیادی رو از روی CPU بر مدارید.چون تمام آبجکت ها دانلود شده و آماده کار هستند.البته استفاده از روش اول هم خیلی جاها کاربرد داره...این مطلب کاملا غلط هست! document.ready به محض اینکه محتوای HTML آماده شد اجرا میشه ولی window.load وقتی که تمام اشیاء، تصاویر و فریم ها لود شدن اجرا میشه و بدیهیه که document.ready قبل از window.load اجرا میشه. این موضوع هم چیزی نیست که بخوایم روش بحثی داشته باشیم، کافیه یک فایل html ساده درست کنید و این موضوع رو تست کنید!
برای نمونه میتونید همچین اسکریپتی بنویسید و ببینید اول کدوم پیغام نمایش داده میشه:

$(window).load(function(){alert('$(window).load'); });
$(document).ready(function(){alert('$(document).re ady');});
(دقت کنید که window.load رو اول نوشتم ولی باز هم اول document.ready اجرا میشه!)

این در مورد سریع تر اجرا شدن، ولی سوال من از شما اینه که اصلا این موضوع چه ربطی به CPU Load داره؟


- استفاده از نام تگ ها.

بعد از ID سریع ترین دسترسی برای getElementsByTagName() هست.

لازم به ذکر هست که ترکیب مورد 3 و 4 بهترین دسترسی در jQuery هست.یعنی :


$(".mydiv");
$("#mydiv");
$("div#mydiv");از بدترین به بهترین.
بد نیست این نکته که در مرورگرهای مدرن، تابع getElementsByClassName هم وجود داره هم ذکر کنم ولی اصل موضوع چیز دیگه ای هست!
استفاده از نام تگها ممکنه سریعتر از استفاده از نام کلاسها باشه، ولی مطمینا استفاده از انتخابگری مثل div#mydiv خیلی کندتر از خود mydiv# خواهد بود.
اگر تمایل داشتین، دلیلش رو هم میشه توضیح داد ولی از اونجایی که این موضوع هم با یک امتحان ساده قابل بررسی هست، ترجیح میدم وارد بحث بیشتر نشم.
برای نمونه این اسکریپت رو اجرا کنید و نتیجه رو ببینید:

<div id="mydiv" class=".mydiv"></div>
<script type="text/javascript">
calculateTime(".mydiv");
calculateTime("#mydiv");
calculateTime("div#mydiv");
function calculateTime(selector){
var startTime = new Date();
for(var x = 0;x<10000;x++){
var obj = $(selector);
}
var endTime = new Date();
alert(selector + ':' + (endTime - startTime));
}
</script>

[vb_bmw]

خوب چون بخث علمیه و دعوا نداریم دوست دارم بحث کنیم :

دوست من شما یه سرچ ساده با عنوان Speed up jquery بزنید مطالب زیادی رو پیدا میکنید که به صورت علمی این موضوع رو بررسی کردن.دو موردی که شما اشاره کردید دقیقا از مواردی هست که توی تمام آموزش ها اشاره شده.

و اما سوال های شما :


این در مورد سریع تر اجرا شدن، ولی سوال من از شما اینه که اصلا این موضوع چه ربطی به CPU Load داره؟در مرورگر ها مثلIE فشاری رندر کردن پیج بر روی CPU هست.زمانی که شما انتخاب هایی داشته باشید که مناسب نباشن برای CPU مشکل ایجاد میشه.

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

البته حق با شماست نگارش بنده در این مورد اشتباه هست و گیج کننده.


در مورد انتخاب گر ها حق با شماست.

من قسمتی از اون بخش رو حذف کردم که اونم اشاره با این موضوع داره که برای انتخاب گر ها بهتره از Context استفاده بشه.

[vb_bmw]

پست من نصفه کاره ثب شد.تکمیلش کردم :)

اون لینک یکی از لینک هاست.من حدود 10 لینک دارم که تعدادیش رو برای شما میزارم :

[+] (http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx) [+] (http://www.ibm.com/developerworks/web/library/wa-aj-advjquery/index.html) [+] (http://jonraasch.com/blog/5-performance-tuning-tricks-for-jquery)

نمی دونم من اشتباه حرف شما رو متوجه شدم یا شما حرف منو.توی ماجرای بهترن نقطه برای bind کردن event ها هر دومون به یک راه اشاره میکنیم.ولی نمی دونم چرا این طوری درگیری ایجاد شده.

[vb_bmw]

مورد 4 رو تصحیح میکنم :

از بهترین به بدترین :


$("#Mydiv","Div")
$("#Mydiv")
$(".Mydiv")


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

[Exception]

پست من نصفه کاره ثب شد.تکمیلش کردم :)

اون لینک یکی از لینک هاست.من حدود 10 لینک دارم که تعدادیش رو برای شما میزارم :

[+] (http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx) [+] (http://www.ibm.com/developerworks/web/library/wa-aj-advjquery/index.html) [+] (http://jonraasch.com/blog/5-performance-tuning-tricks-for-jquery)

نمی دونم من اشتباه حرف شما رو متوجه شدم یا شما حرف منو.توی ماجرای بهترن نقطه برای bind کردن event ها هر دومون به یک راه اشاره میکنیم.ولی نمی دونم چرا این طوری درگیری ایجاد شده.
با توجه به اینکه بعد از پاسخ من پست شما کمی تغییر کرد، من هم جواب رو پاک کردم و دوباره جواب میدم.

در مورد بحث علمی که 100% همینطوره. ممکنه من یکمی تند حرف بزنم، ولی مطمین باشید بجز بحث علمی هیچ هدف دیگه ای ندارم و یکی از افتخارات همیشگیم هم این بوده که روی هیچ حرفی (حتی حرفهای خودم) تعصب ندارم.

در مورد لینکهایی هم که دادین، ممنونم. انشالله سر فرصت همش رو خواهم دید.

در مورد بحث CPU Load که اول گفتم ارتباطش رو درک نمیکنم، الان فهمیدم! البته هنوزم یه ذره این جمله مبهمه:

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

اما سوال جدید من:

در jQuery زمانی که دستورات اجرا بشه اتصال و بایند ایونت ها باید با دستور live انجام بشه.این مورد برای بهتر اجرا شدن کد ها بوده.منظورتون رو از این جمله نفهمیدم. میشه بیشتر توضیح بدین؟

[vb_bmw]

خوب مثل اینکه مجبورم بگردم دنبال لینک مورد نظرم.چون تعداد بوک مارک های jQuery زیادی دارم زمان میگیره ولی توی یک وبلاگ دقیقا سر این موضوع بحث شده بود و جواب های دقیق ارائه شده بود.قول میدم به زودی لینک رو قرار بدم.

درمورد سوال دوم هم :

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

شما رو برای اطلاعات کامل و دقیق ارجاع میدم به پست آقای نصیری در وبلاگشون : [+] (http://vahidnasiri.blogspot.com/2009/08/jquery-live.html)

[Exception]

درمورد سوال دوم هم :

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

شما رو برای اطلاعات کامل و دقیق ارجاع میدم به پست آقای نصیری در وبلاگشون : [+] (http://vahidnasiri.blogspot.com/2009/08/jquery-live.html)
من مشکلی در خود متد live ندارم. حتی قبل از اینکه از jQuery استفاده کنم، خودم همین کار رو انجام میدادم! (مثلا اینجا یک نمونه رو توضیح داده بودم: http://hasheminezhad.com/addeventtoclass)

سوال من ربط live به سرعت اجرای اسکریپتها بود و نه خود متد live.

[vb_bmw]

به سرعت ربطی نداره.به این ربط داره که باعث میشه تعدادی از event ها بایند نشن.

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

[arashmanteghi]

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