دوره بهینه‌سازی عملکرد جی‌کوئری: افزایش سرعت وب‌سایت همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

🎓 دوره آموزشی جامع

📚 اطلاعات دوره

عنوان دوره: دوره بهینه‌سازی عملکرد جی‌کوئری: افزایش سرعت وب‌سایت

موضوع کلی: برنامه نویسی

موضوع میانی: جی‌کوئری (jQuery)

📋 سرفصل‌های دوره

• 1. اهمیت عملکرد وب و تاثیر آن بر تجربه کاربری
• 2. جی‌کوئری چیست و چگونه بر سرعت سایت تاثیر می‌گذارد؟
• 3. شناسایی گلوگاه‌های رایج عملکرد در کدهای جی‌کوئری
• 4. آماده‌سازی محیط توسعه برای تست و بهینه‌سازی عملکرد
• 5. آشنایی با ابزارهای توسعه‌دهنده مرورگر (DevTools)
• 6. معرفی تب Performance و Profiler در مرورگرها
• 7. معیارهای کلیدی سنجش سرعت: FCP، LCP و TTI
• 8. درک مدل شیءگرای سند (DOM) و تعامل آن با جی‌کوئری
• 9. هزینه پنهان جی‌کوئری: حجم کتابخانه و زمان پردازش اولیه
• 10. اهداف دوره و معرفی پروژه عملی
• 11. اساس عملکرد جی‌کوئری: انتخابگرها (Selectors)
• 12. نحوه کار موتور انتخابگر Sizzle در پشت صحنه
• 13. سلسله مراتب سرعت انتخابگرها: ID در مقابل Class و Tag
• 14. چرا انتخابگر ID (`#id`) سریع‌ترین است؟
• 15. بهینه‌سازی انتخابگرهای کلاس (`.class`)
• 16. هزینه عملکردی انتخابگرهای فرزندان (`descendant selectors`)
• 17. استفاده از انتخابگر فرزند مستقیم (`>`) برای افزایش سرعت
• 18. ناکارآمدی انتخابگر عمومی (`*`) و انتخابگرهای ویژگی (`attribute selectors`)
• 19. کش کردن (Caching) اشیاء جی‌کوئری برای استفاده مجدد
• 20. تله متغیر `$`: چگونه از انتخاب مجدد عناصر پرهیز کنیم
• 21. قدرت متد `.find()` روی اشیاء کش‌شده
• 22. انتخاب عناصر در یک زمینه (Context) مشخص
• 23. زنجیره‌سازی (Chaining) متدها برای کد بهینه‌تر
• 24. تفاوت عملکردی `.filter()` در مقابل `.find()`
• 25. بهترین شیوه‌ها برای نوشتن انتخابگرهای سریع و کارآمد
• 26. هزینه بالای دستکاری DOM: چرا کند است؟
• 27. درک مفاهیم Reflow و Repaint
• 28. اصل "کمتر انجام بده": به حداقل رساندن تعامل با DOM
• 29. تفکیک خواندن و نوشتن در DOM برای جلوگیری از Reflowهای مکرر
• 30. دسته‌بندی به‌روزرسانی‌های DOM
• 31. مقایسه عملکرد `.append()`، `.html()` و `.text()`
• 32. بهینه‌سازی افزودن عناصر با `.after()`، `.before()` و `.prepend()`
• 33. جداسازی عناصر با `.detach()` برای دستکاری‌های پیچیده
• 34. استفاده از Document Fragments برای درج گروهی عناصر
• 35. روش‌های بهینه ساخت عناصر جدید در جی‌کوئری
• 36. شبیه‌سازی بهینه عناصر با `.clone()`
• 37. پیامدهای عملکردی متدهای `.show()` و `.hide()`
• 38. بهینه‌سازی متد `.css()` با تنظیم همزمان چندین ویژگی
• 39. افزودن و حذف کلاس در مقابل دستکاری مستقیم استایل‌ها
• 40. عملکرد متدهای `addClass()`، `removeClass()` و `toggleClass()`
• 41. چه زمانی از جاوااسکریپت خالص به جای جی‌کوئری استفاده کنیم
• 42. بهینه‌سازی کار با لیست‌ها و جداول بزرگ
• 43. تکنیک‌های بارگذاری تنبل (Lazy Loading) عناصر DOM
• 44. بهینه‌سازی حلقه‌هایی که DOM را دستکاری می‌کنند
• 45. مطالعه موردی: بازنویسی یک تابع کند برای به‌روزرسانی DOM
• 46. مبانی مدیریت رویدادها در جی‌کوئری
• 47. مشکل اتصال تعداد زیادی کنترل‌کننده رویداد (Event Handler)
• 48. معرفی تفویض رویداد (Event Delegation)
• 49. استفاده صحیح از متد `.on()` برای تفویض رویداد
• 50. انتخاب والد مناسب برای تفویض رویداد
• 51. تفاوت عملکردی `.click()` در مقابل `.on('click', ...)`
• 52. مفهوم Debouncing و کاربرد آن در رویدادها
• 53. پیاده‌سازی Debounce برای رویدادهایی مانند `keyup`
• 54. مفهوم Throttling و کاربرد آن
• 55. پیاده‌سازی Throttle برای رویدادهایی مانند `scroll`
• 56. درک مفاهیم Event Bubbling و Capturing
• 57. هزینه عملکردی `event.preventDefault()` و `event.stopPropagation()`
• 58. حذف بهینه رویدادها با متد `.off()`
• 59. نام‌گذاری رویدادها (Namespacing) برای مدیریت بهتر
• 60. پرهیز از توابع ناشناس (Anonymous Functions) در کنترل‌کننده‌های رویداد
• 61. انیمیشن‌های جی‌کوئری چگونه کار می‌کنند؟
• 62. هزینه عملکردی انیمیشن‌های مبتنی بر جاوااسکریپت
• 63. چرا انیمیشن‌ها و ترنزیشن‌های CSS سریع‌تر هستند؟
• 64. فعال‌سازی انیمیشن‌های CSS با استفاده از `addClass` و `removeClass`
• 65. بهینه‌سازی متد `.animate()`: از چه چیزهایی باید پرهیز کرد
• 66. مدیریت صف انیمیشن با `.stop()`، `.finish()` و `.delay()`
• 67. استفاده از `requestAnimationFrame` برای انیمیشن‌های روان‌تر
• 68. ادغام `requestAnimationFrame` با کدهای جی‌کوئری
• 69. بررسی عملکرد افکت‌های رایج: `.fadeIn()`, `.fadeOut()`, `.slideToggle()`
• 70. انتخاب تکنیک انیمیشن مناسب برای هر سناریو
• 71. اصول درخواست‌های AJAX بهینه
• 72. بهینه‌سازی تنظیمات متد `$.ajax()`
• 73. کش کردن پاسخ‌های AJAX در سمت کلاینت
• 74. تاثیر استفاده از `GET` در مقابل `POST` بر عملکرد
• 75. به حداقل رساندن حجم داده‌های انتقالی: JSON در مقابل HTML
• 76. پردازش بهینه داده‌های JSON پس از دریافت
• 77. استفاده از Deferred و Promises برای مدیریت عملیات ناهمزمان
• 78. بهبود تجربه کاربری با نمایشگرهای بارگذاری (Loading Indicators)
• 79. جلوگیری از شرایط رقابتی (Race Conditions) در درخواست‌های همزمان
• 80. پیش‌واکشی داده‌ها (Pre-fetching) برای بهبود سرعت درک‌شده
• 81. تاثیر پلاگین‌های جی‌کوئری بر عملکرد سایت
• 82. ارزیابی و ممیزی عملکرد پلاگین‌های شخص ثالث
• 83. انتخاب جایگزین‌های سبک برای پلاگین‌های سنگین
• 84. اصول ساخت یک پلاگین جی‌کوئری بهینه
• 85. نقش CDN در بارگذاری سریع کتابخانه جی‌کوئری
• 86. استفاده از نسخه‌های سفارشی و سبک (Slim builds) جی‌کوئری
• 87. مدیریت نشت حافظه (Memory Leaks) در برنامه‌های جی‌کوئری
• 88. دلایل رایج نشت حافظه: عناصر جداشده با رویدادهای متصل
• 89. استفاده از Memory Profiler مرورگر برای یافتن نشت حافظه
• 90. زمان مهاجرت از جی‌کوئری به جاوااسکریپت خالص (Vanilla JS)
• 91. جایگزینی انتخابگرهای جی‌کوئری با `querySelector` و `querySelectorAll`
• 92. جایگزینی دستکاری DOM جی‌کوئری با APIهای نیتیو
• 93. جایگزینی مدیریت رویداد جی‌کوئری با `addEventListener`
• 94. جایگزینی `$.ajax` با Fetch API مدرن
• 95. مقایسه عملکردی جامع: جی‌کوئری در مقابل جاوااسکریپت خالص
• 96. ادغام جی‌کوئری با فریم‌ورک‌های مدرن (React, Vue)
• 97. بهترین شیوه‌ها برای استفاده غیرتهاجمی (Unobtrusive) از جی‌کوئری
• 98. پروژه نهایی: بهینه‌سازی یک وب‌سایت کند مبتنی بر جی‌کوئری
• 99. چک‌لیست نهایی بهینه‌سازی عملکرد جی‌کوئری
• 100. آینده جی‌کوئری و چشم‌انداز عملکرد وب