ترفندهای پیشرفته jQuery (قسمت 11)

- visibility ٠ mode_comment

در این قسمت با ادامه ترفندهای پیشرفته jQuery در خدمت شما هستیم. jquery trickshot

موضوع دوم : عملکرد و کارائی

ترفند 21 : با اشیاء jQuery همانند آرایه رفتار کنید

شاید شما از این قضیه خبر نداشته باشید ولی زمانی که شما از متد each موجود در jQuery استفاده میکنید ، میتونه به Performance سایت شما ضربه بزنه. یک ترفند وجود داره که میشه در حلقه و بر روی اشیاء jQuery انجام داد و سرعت رو خیلی بهتر کرد. این ترفند چیزی نیس جز اینکه به شئ jQuery در این مواقع مثل یک آرایه عادی نگاه کنیم. پس میشه گفت که هم length داره و هم اندیس های عددی.

کد HTML زیر رو در نظر بگیرید:

میبیند که تعدادی li قرار داده شده و در انتها خودتون میتونین برای نتیجه بهتر 50 تای دیگه اضافه کنید.

کدهای Javascript:

در ابتدا متغیر هارو تعریف میکنیم:

حالا میخایم دو کد که یک کارو انجام میدن رو با هم مقایسه کنیم. برای اینکار از console و متد time اون استفاده میکنیم.

بصورت حلقه و آرایه:

استفاده از متد Each:

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

ترفند 22 : المنتها رو زمانی که نیاز به تغییرات پیچیده ای دارن جدا کنید

تغییر دادن یکی از المنتهای DOM باعث میشه که صفحه از ابتدا Paint بشه و اصطلاحا repaint بشه. یعنی با هر تغییر این کار صورت میگیره که اگر برای اون محدودیت نزارید و به این نکته توجه نکنید میتونه به بهینه بودن برنامتون لطمه بزنه. اگر شما روی بهینه بودن سایتتون حساسید بهتون پیشنهاد میکنم که ابتدا المنت مورد نظر رو جدا کنید و تغییرات پیچیده رو بر روی اون انجام بدین و بعد اونو سر جای اولش قرار بدین.

کد HTML:

کدهای JS:

در ابتدا متغیر هارو تعریف میکنیم:

حالا دو کد که دقیقا یک کارو انجام میدن از نظر زمانی با هم مقایسه میکنیم.

اعمال تغییرات بدون جداکردن:

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

جدا کردن المنت قبل از اعمال تغییرات به اون میتونه 2 برابر سریعتر اجرا بشه. این موضوع فقط به width و height محدود نمیشه و تغییر در هر ویژگی ظاهری میتونه باعث repaint بشه. پس به این موضوع هم دقت داشته باشید.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.