مطالب تصادفی
عکس
قالب قبلی فروشگاه ایران ا ...
عکس
قالب فوق العاده ی isolate ...
عکس
Unknown قالب فارسی کلیجا ...
مطالب محبوب
عکس
مصاحبه با آی وحید ...
عکس
قالب رایگان وردپرس unknow ...
عکس
قالب فارسی ۴رنگ ...
آخرین مطالب
عکس
مصاحبه با محمد محبی فر ...
عکس
فیلد سفارشی برای دیدگاه ه ...
عکس
تغییر جهت تقریبا اساسی ...
نودتم

ثبت نام
خوش آمدید ، برای استفاده بیشتر از امکانات نودتم وارد شوید یا ثبت نام کنید
  • عکس

    عملکرد سریعتر جی کوئری

    jqueryfast عملکرد سریعتر جی کوئری

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

    روش اول : transition ها

    همونطوری که میدونید transition ها وضیفه ی حالت انجام انیمیشن ها رو در css دارند . در جی کوئری تمامی transition ها به صورت جداگانه تعریف شده اند ، پس آبجکتی که در جی کوئری عملیاتی بر روی آن انجام می شود (انیمیشن یا افکت مخصوصا slide) نباید transition داشته باشید (در css) . رعایت این کار باعث بهبود انجام افکت های جی کوئری مخصوصا در slide ها می شود

    روش دوم : this

    در جی کوئری همانند سایر زبان های برنامه نویسی (!) this وجود دارد که یک عنصر را به عنصر بالایی یا عناصر مشخص بر میگرداند ، شما میتوانید با استفاده از this کد های خود را کوتاه تر و سرعت انجام کار را بیشتر کنید .

    مثال : میخواهیم هنگامی که بر روی ابجکتی کلیک شد همان آبجکت حذف شود

    دو کد زیر این کارا انجام می دهند

    در کد دوم از this استفاده شده و مقداری که حذف می شود در واقع همان مقداری است که روی آن کلیک می شود ، ممکن است چند خط تفاوت چندانی نداشته باشد اما در استفاده ی زیاد از جی کوئری استفاده از this سرعت عملکرد را بیشتر می کند

     

    روش سوم var

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

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

    دو کد زیر این کار را انجام می دهند

    در اینجا کد اول this و var ندارد ولی نسبت به کد دوم عملکرد بهتری دارد ، زیر این یک مثال کوچک است ، اما در مثال های بزرگتر استفاده از this و var هم سرعت کار شما را بیشتر میکنند هم سرعت عملکرد برنامه را

    روش چهارم : سلکتور ها

    سلکتور های جی کوئری در واقع مانند سلکتور های css عمل میکنند ، اگر شما برا سلکتور ها از تگ های تو در تو استفاده میکنید بهتر است که از find استفاده کنید

    به عنوان مثال

    اگر همچین کد جی کوئری دارید

    آن را به

    تغییر دهید تا سرعت پیدا کردن آبجکت شما توسط جی کوئری بیشتر شود .

    اسم تگ را در سلکتور فقط برای آخرین کلاس یا ای دی بگذارید

    به عنوان مثال کد زیر

    عملکرد ضعیف تری نسبت به این کد

    دارد ، پس از کد دوم برای سلکتور ها استفاده کنید

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

    به عنوان مثال به جای استفاده از این کد

    از این کد

    استفاده کنید تا کد های شما سرعت بیشتری داشته باشند

    به طور کلی در سلکتور ها از حداقل ایدی ها و کلاس ها استفاده کنید و سعی کنید با استفاده از قابلیت های جی کوئری آبجکت مورد نظر خود را فراخوانی کنید

    مثال های دیگر

    روش ششم : عملکرد های کوتاه تر و سریعتر

    فقط مثال !

     

     

    روش هفتم : استفاده از animate.

    تجربه ی شخصی من نشون داده که استفاده از animation عملکرد سریعتر و بهتری نسبت به addClass برای افکت ها دارد ، همچنین در animation حتما easing را مشخص کنید و برای آن سطح تعیین کنید

    مثال :

     

    روش هشتم : استفاده از پلاگین های سریع

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

    یکی از بهترین  پلاگین ها در این زمینه transit است که حجم کمی دارد و بسیار خوب عمل میکند

    پلاگین های دیگری TweenMax و کلا پلاگین های شرکت GreenStock هم خوب هستند اما حجم بالایی دارند و استفاده از آن ها در کارهای کوچیک اصلا توصیه نمی شود

     

    در آخر هم بهتر است که کد های خود را minify کنید و همه ی فایل های js را در یک فایل قرار دهید

     

    منبع : jquery.com و  ۲۴ways.org

مطلب مرتبط
۱ دیدگاه برای این مطلب موجود است
دیدگاهی بگذارید