illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

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

0 429 ۳۱ شهریور ۹۴

در این قسمت با ادامه ترفندهای پیشرفته 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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram