بهینه سازی انتخابگر های jQuery برای بهترین عملکرد

به دلیل این که در طول زمان حجم اطلاعات داده ها در حال افزایش است، بهینه سازی عملکرد انتخابگر های jQuery از اهمیت زیادی برخوردار خواهد بود. از آنجایی که حجم زیاد داده ها در تعداد زیادی سرور ذخیره شده اند، عملکرد سریع مهم ترین رکن هر برنامه ای در وب است. اگر بارگذاری داده ها در صفحه اول زیاد طول بکشد سبب خواهد شد که مشتریان شما نا امید شوند. برای بهبود عملکرد راه های زیادی وجود دارد از جمله بهبود کد پایگاه داده ها، کد های سمت سرور و کد سرویس گیرنده.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

همچنین توسعه نرم افزار ها نیز در طول زمان تغییر کرده است. سرویس گیرنده REST API را فرا می خواند و سرور به صورت خودکار داده ها را با JSON یا فرمت های دیگر ارسال می کند. ان وظیفه کد های سمت سرویس گیرنده است تا اطلاعات را پردازش کند و نمایش دهد. بنابراین برای اطمینان از بهترین عملکرد بسیار مهم است که بهترین شیوه را برای کد های سرویس گیرنده انتخاب کنید.

jQuery یکی از محبوب ترین و مورد استفاده ترین کتابخانه های جانبی مشتری است، بنابراین بهینه سازی کد های jQuery بسیار مهم است. یکی از مهمترین نکات برای بهبود عملکرد، بهبود متد ها و انتخابگر ها و استفاده درست از عناصر html است. حالا که با اهمیت بهینه سازی انتخابگر های jquery آشنا شدید با ما همراه باشید تا بهترین راه کار های بهینه سازی انتخابگر های jquery را به شما معرفی کنیم.

برای بهینه سازی انتخابگر های jquery تا حد امکان از id selector ها استفاده کنید

اولین نکته برای بهینه سازی انتخابگر های jquery استفاده همیشگی از id selector ها است. دسترسی به DOM یک عملیات سنگین است. پس بهترین کار این است که میزان زمان این کار را کاهش دهیم. همانطور که می دانیم ویژگی ID برای هر عنصر در html اختصاصی است. در جاوا اسکریپت document.getElementById() یک تابع است که می توان از آن ها بر انتخاب عناصر html استفاده کرد. این سریعترین و بهترین روش برای انتخاب عناصر است زیرا به صورت مستقیم به عنصر نقشه می دهد. Jquery یک کتابخانه است و در بالای جاوا اسکریپت نوشته می شود، به این معنا که در داخل آن توابع جاوا اسکریپت فراخوانی می شوند. هنگامی که از id به عنوان انتخابگر استفاده می کنید، توابع را به صورت داخلی فرا می خوانید.

document.getElementById(). می تواند عناصر html با id به اسم elm را انتخاب کند. در این صورت کد جاوا به ابن شکل خواهد بود $(“#elm”);. این متد در تمام مرورگرها به خوبی کار می کند.

کش کردن انتخابگر ها راهی مناسب برای بهینه سازی انتخابگر های jquery

کش کردن عملکرد نرم افزار شما را بهبود می بخشد. شما می توانید داده ها یا آبجکت های خود را برای بهبود عملکرد کش کنید. علاوه بر این شما می توانید انتخابگر های jquery خود را با استفاده از id ها به عنوان انتخابگر (به دلایلی که در قسمت قبلی گفته شد کش کنید. این کار سبب بهینه سازی انتخابگر های jquery می شود. زمانی که شما انتخابگر ها را کش نمی کنید، jquery باید  DOM را بازنگری کند تا عناصر را دوباره شناسایی کند.

شاید شما در نرم افزار های کوچک تغییری احساس نکنید اما در نرم افزار های بزرگ این کار بسیار کاربردی خواهد بود. در اینجا نگاهی به نحوه کش کردن آبجکت ها در jquery خواهیم انداخت. این کد ساده می تواند انتخابگر را در متغیر $elm ذخیره کند:

حالا این متغیر از  jQuery ID selector استفاده می کند. مانند کد زیر:

به یاد داشته باشید که دامنه یک متغیر نسبت به تعریف آن محدود شده است. اگر آن را به عنوان یک متغیر global تعریف کنید می توانید از آن در هر جایی از jquery استفاده کنید. اما اگر در درون یک متد باشد، به همان متد خاص محدود می شود. ذخیره سازی global برای عناصری که اغلب در کد استفاده می شوند بسیار کاربردی است.

متن زمینه را توسط انتخابگر های jquery تعریف کنید

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

برای روشن شدن موضوع بهتر است از یک مثال استفاده کنیم. کد html زیر را در نظر بگیرید:

اگر می خواهید همه عناصر div را با کلاس child انتخاب کنید، می توانید از کد jquery زیر استفاده کنید.

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

این کار جستجو را محدود می کند به div با کلاس parent1. استدلال context می تواند عنصر DOM، یک سند یا یک jquery باشد. اگر شما context را در نظر نگیرید، jquery می تواند به صورت مستقیم از متد ها برای بازیابی عناصر استفاده کند. پس کد بالا به شکل زیر در خواهد آمد:

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

جمع بندی

بهینه سازی انتخابگر های jquery اهمیت زیادی دارد و ما در اینجا به وسیله چند مثال ساده شما را با نحوه انجام این کار آشنا کردید. شما هم می توانید تجربه های دیگر خود در زمینه بهینه سازی انتخابگر های jquery را با ما به اشتراک بگذارید.

منبع : طراحی سایت