این مقاله 10 روش آسون که باعث افزایش سرعت اجرای اسکریپت شما میشن رو معرفی میکنه. نگران نباشید، همه میتونن با استفاده از این روشهای ساده سرعت اجرای اسکریپتشون رو افزایش بدن!
1. همیشه از آخرین ورژن jQuery استفاده کنید
توسعه دهندگان jQery همیشه درحال پیدا کردن راه های جدید و بهینه برای بهبود کارایی برنامه هستن و به همین دلیل jQuery همیشه در حال تغییر و بهتر شدن هست.
میتونید از گوگل برای داشتن آخرین نسخه jQueryکمک بگیرید:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
* توی نسخه 2 + jQueryپشتیبانی از نسخه های قدیمی مرورگرها متوقف شده.
2. اسکریپتهای خودتون رو ترکیب و minify کنید
اکثر مرورگرها قادر به پردازش بیش از یک اسکریپت در آن واحد نیستن، به همین دلیل آنها رو به نوبت پردازش میکنن (توی صف برای پردازش قرار میدن) که باعث بالا رفتن زمان لود صفحه تون خواهد شد.
با فرض اینکه قرار اسکریپتها در هر صفحه سایت شما لود شوند، شما بایستی همه اسکریپتها رو با هم ادغام و با استفاده از ابزار هایی فشرده سازی (
مثل این) آونا رو minify کنید. حجم کمتر فایلها مساوی با سرعت لود بیشتره.
هدف از minification در جاوااسکریپت و css حفظ کارایی کد در حالی که حجم کلی فایل (چه بصورت خام و چه بعد از gzip کردن) کمتر بشه.
YUI Compressor (
بی دردسرتر) بعنوان یک ابزار فوق العاده که خود jQuery اون رو توصیه میکنه میتونه به فشرده سازی کدهای شما کمک کنه.
3. استفاده ازfor به جای each
همیشه تابع های داخلی سریعتر از تابع های کمکی (پلاگین ها و کتابخونه ها) هستند!
هروقت که درون یک آبجکت که به صورت JSON هست قصد حلقه زدن دارید، بهتره که JSON خودتون رو جوری تغییر بدید که بشه به آرایه تبدیل و عمل loop راحتتر انجام داد.
با استفاده از Firebug میتونید یه مقایسه انجام بدید:
var array = new Array ();
for (var i=0; i<10000; i++) {
array[i] = 0;
}
console.time('native');
var l = array.length;
for (var i=0;i<l; i++) {
array[i] = i;
}
console.timeEnd('native');
console.time('jquery');
$.each (array, function (i) {
array[i] = i;
});
console.timeEnd('jquery');
همینطور که میبینید تابع $.each() 10 برابر کندتر از for خود جاوااسکریپت عمل میکنه . و بطور حتم هنگام کار با موارد پیجیده تر مثل تغییر خاصیت css یا دستکاری DOM بسیار کندتر خواهد بود.
4. استفاده از ID بجای CLASS خیلی بهتره که انتخاب المنتها بر اساس ID باشه چون jQueryاز متد داخلی خود مرورگر یعنی getElementById() برای انتخاب المنتها استفاده میکنه که بسیار سریعتر از بقیه متدهاست.
بجای استفاده زیاد از class، بصرفه تره که از انتخابگرهای پیچیده تر رو (که توی jQuery مثل آب خوردنه) استفاده کنید ویا یک container (المنت والد) با ID برای انتخاب المنت مورد نظرتون در نظر بگیرید.
// Example creating a list and filling it with items
// and selecting each item once
console.time('class');
var list = $('#list');
var items = '<ul>';
for (i=0; i<1000; i++) {
items += '<li class="item' + i + '">item</li>';
}
items += '</ul>';
list.html (items);
for (i=0; i<1000; i++) {
var s = $('.item' + i);
}
console.timeEnd('class');
console.time('id');
var list = $('#list');
var items = '<ul>';
for (i=0; i<1000; i++) {
items += '<li id="item' + i + '">item</li>';
}
items += '</ul>';
list.html (items);
for (i=0; i<1000; i++) {
var s = $('#item' + i);
}
console.timeEnd('id');
کد بالا به وضوح تفاوت بین دو نوع انتخاب المنتها رو نشون میده، 5 ثانیه برای انجام انتخاب براساس class در برابر تقریبا 0 ثانیه!!!
طبق اسناد jQuery:
context هر گره (node) توی DOM به jQuery() فرستاده میشه (در صورت عدم مشخص کردن context ، بصورت پیشفرض document فرستاده خواهد شده)
بهترهاز context درکنار انتخابگر خود برای تعیین دقیق درخواست (انتخاب المنت) استفاده کنید.
پس اگه مجبورید که برای انتخاب المنت مد نظرتون از class استفاده کنید، برای اینکه حداقل از پیمایش کل DOM توسط jQuery جلوگیری کنید از context نهایت استفاده رو ببرید:
$(expression, context)
بجای
$('.class').css ('color', '#123456');
از این استفاده کنید
$('.class', '#class-container').css ('color', '#123456');
که بسیار سریعتر خواهد بود، چون نمیره همه DOM رو برای پیدا کردن المنت بگرده، یه راست میره سراغ #class-container و دنبال المنتهایی با کلاس .class میگرده.
* اینجوری هم میتونید با استفاده از find() سرعت کدتون رو افزایش بدید:
$( '#class-container').find('.class').css ('color', '#123456');
6. همیشه از CACHE استفاده کنید.
هرگز از selector های تکراری استفاده نکنید. بجاش، اونارو توی یک متغیر cache کنید. در اینصورت DOM مجبور نیست که هر بار دنبال المنت شما بگرده!
و هرگر، به هیچ عنوان و تحت هیچ شرایطی عمل انتخاب کردن المنتها رو توی loop انجام نــــــــــــدید.
$('#item').css ('color', '#123456');
$('#item').html ('hello');
$('#item').css ('background-color', '#ffffff');
// you could use this instead
$('#item').css ('color', '#123456').html ('hello').css ('background-color', '#ffffff');
// or even
var item = $('#item');
item.css ('color', '#123456');
item.html ('hello');
item.css ('background-color', '#ffffff');
// as for loops, this is a big no-no
console.time('no cache');
for (var i=0; i<1000; i++) {
$('#list').append (i);
}
console.timeEnd('no cache');
// much better this way
console.time('cache');
var item = $('#list');
for (var i=0; i<1000; i++) {
item.append (i);
}
console.timeEnd('cache');
تفاوت سرعت رو میتونید توی همین loop کوتاه ملاحظه کنید:
7. پرهیز از دستکاری DOM
از دستکاری DOM باید تا حد امکان پرهیز بشه، چون عملیاتی مثل ()prepend(), append(), after کند هستند.
مثال بالا رو میتونید با ()html سریعتر انجام یدید:
var list = '';
for (var i=0; i<1000; i++) {
list += '<li>'+i+'</li>';
}
('#list').html (list);
8. قبل از class و id اسم تگ رو هم بنویسید:
اینجوری بجای کل DOM فقط تگهایی که کلاس مورد نظرتون رو دارند بررسی خواهند شد.
بجای:
$(‘.yourClass’)….
اینجوری بنویسید: ( فقط تگهای p رو بررسی میکنه)
$(‘p.yourClass’)….
9. استفاده از کدنویسی زنجیره ای
خیلی ساده بجای:
$("#object").addClass("active");
$("#object").css("color","#f0f");
$("#object").height(300);
اینجوری بنویسید:
$("#object").addClass("active").css("color", "#f0f").height(300);
کدنویسی کمتر، خوانایی بهتره و سرعت بیشتره رو یکجا خواهید داشت.
10 . تقب کنید!
این مورد ممکنه که مستقیما باعث افزایش سرعت کدتون نشه اما سرعت کدنویسی شما رو بیشتر میکنه. cheatSheet رو دانلود (ذخیره) کنید، دم دست بزارید، استفاده کنید:
(یا سایتها و عکسهای مشابه)
منبع
+ منابع دیگه
