دوره بهینه‌سازی انیمیشن‌های وب: فریم‌ریت، رندرینگ و Core Web Vitals همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

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

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

عنوان دوره: دوره بهینه‌سازی انیمیشن‌های وب: فریم‌ریت، رندرینگ و Core Web Vitals

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

موضوع میانی: انیمیشن‌های وب (Web Animations)

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

• 1. مقدمه: چرا بهینه‌سازی انیمیشن‌های وب اهمیت دارد؟
• 2. انیمیشن‌های وب چیستند؟ (تعریف و کاربردها)
• 3. مروری بر انواع انیمیشن‌ها: CSS، JavaScript و SVG
• 4. مفهوم "فریم‌ریت" (Framerate) و اهمیت آن
• 5. تعریف "جَنک" (Jank) و "فریز" (Freeze) در انیمیشن‌ها
• 6. چشم‌انداز کلی عملکرد: هدف 60 فریم بر ثانیه
• 7. معرفی اجزای اصلی بهینه‌سازی: رندرینگ، فریم‌ریت، Core Web Vitals
• 8. آشنایی با DOM و CSSOM
• 9. مراحل رندرینگ مرورگر: گام به گام
• 10. مرحله Style: محاسبه استایل‌ها
• 11. مرحله Layout/Reflow: چیدمان عناصر
• 12. "لِیفوت ترشینگ" (Layout Thrashing) و اثرات آن
• 13. مرحله Paint: رنگ‌آمیزی پیکسل‌ها
• 14. مرحله Composite: ترکیب لایه‌ها
• 15. نقش GPU و CPU در فرآیند رندرینگ
• 16. Thread اصلی مرورگر (Main Thread) و bottleneck ها
• 17. مفهوم "لایه" (Layer) در رندرینگ مرورگر
• 18. تشخیص عناصر جدید لایه با DevTools
• 19. RequestAnimationFrame: راه‌حل بهینه برای انیمیشن‌های جاوااسکریپت
• 20. تفاوت RequestAnimationFrame با setTimeout/setInterval
• 21. مبانی CSS Transitions: خواص، مدت زمان و تابع زمان‌بندی
• 22. توابع زمان‌بندی (Timing Functions) در CSS Transitions
• 23. استفاده بهینه از Transition برای تغییرات استایل
• 24. مفهوم "تبدیل‌ها" (CSS Transforms): ترجمه، چرخش، مقیاس و انحراف
• 25. چرا Transforms برای عملکرد بهتر هستند؟
• 26. CSS Animations: تعریف @keyframes
• 27. خواص animation در CSS (name, duration, timing-function, etc.)
• 28. ایجاد انیمیشن‌های پی‌درپی با animation-delay
• 29. تکرار انیمیشن با animation-iteration-count
• 30. کنترل وضعیت نهایی انیمیشن با animation-fill-mode
• 31. استفاده از will-change برای ارتقای لایه‌ها (Layer Promotion)
• 32. محدودیت‌های will-change و استفاده صحیح از آن
• 33. جلوگیری از "فورس لیفوت" (Forced Layout) در CSS
• 34. انیمیشن‌های مبتنی بر "فیلتر" (CSS Filters) و ملاحظات عملکردی
• 35. مشکلات رایج در انیمیشن‌های CSS و راه‌حل‌ها
• 36. انیمیشن با جاوااسکریپت: تاریخچه و چالش‌ها
• 37. استفاده از RequestAnimationFrame برای انیمیشن‌های JS دقیق
• 38. کنترل دقیق‌تر انیمیشن‌ها با RequestAnimationFrame
• 39. معرفی Web Animations API (WAAPI)
• 40. ایجاد انیمیشن‌های پایه با WAAPI (Element.animate())
• 41. کنترل پخش انیمیشن در WAAPI (play, pause, reverse, cancel, finish)
• 42. Timeline های WAAPI: GroupEffect و SequenceEffect
• 43. WAAPI و Promises: مدیریت وضعیت انیمیشن
• 44. مزایای WAAPI نسبت به CSS Animations (کنترل، ترکیب‌پذیری)
• 45. همگام‌سازی WAAPI با CSS: ترکیب قدرت‌ها
• 46. WAAPI و Performance: اجرای انیمیشن‌ها در Compositor Thread
• 47. Polyfill برای WAAPI در مرورگرهای قدیمی
• 48. کتابخانه‌های انیمیشن جاوااسکریپت: مروری بر GSAP و Lottie
• 49. بهینه‌سازی استفاده از GSAP و Lottie
• 50. انیمیشن‌های SVG با جاوااسکریپت و WAAPI
• 51. استراتژی کلی برای بهینه‌سازی: کاهش کار مرورگر
• 52. اولویت‌بندی انیمیشن‌ها: فقط ضروری‌ها را بهینه کنید
• 53. کاهش تعداد عناصر متحرک
• 54. استفاده از "ترجمه‌های سه‌بعدی" (3D Transforms) برای forced hardware acceleration
• 55. مدیریت DOM در انیمیشن‌ها: حداقل تغییرات
• 56. "batching" تغییرات DOM برای جلوگیری از Layout Thrashing
• 57. استفاده از Offscreen Canvas برای انیمیشن‌های پیچیده
• 58. Web Workers: اجرای محاسبات سنگین انیمیشن در پس‌زمینه
• 59. بهینه‌سازی رندرینگ با استفاده از Layer Compositing
• 60. تکنیک debouncing و throttling برای رویدادها
• 61. بهینه‌سازی انیمیشن‌های Scroll-based
• 62. Lazy Loading انیمیشن‌ها: بارگذاری در زمان نیاز
• 63. مدیریت حافظه در انیمیشن‌ها: جلوگیری از Memory Leaks
• 64. بهینه‌سازی انیمیشن‌های SVG: کاهش پیچیدگی مسیرها
• 65. استفاده از CSS Custom Properties برای مدیریت آسان انیمیشن‌ها
• 66. بهینه‌سازی انیمیشن‌های مبتنی بر WebGL/Canvas
• 67. استراتژی‌های کاهش حجم فایل‌های انیمیشن (GIF, WebP, Video)
• 68. انتخاب فرمت صحیح برای انیمیشن‌ها: GIF در مقابل Video
• 69. تکنیک‌های "فریم انداختن" (Frame Dropping) کنترل‌شده
• 70. تاثیر Prefetch و Preload بر عملکرد انیمیشن‌ها
• 71. ابزارهای توسعه‌دهنده مرورگر (Chrome DevTools)
• 72. تب Performance: تشخیص bottleneck ها
• 73. تحلیل Timeline در DevTools: شناسایی Layout, Paint, Composite
• 74. استفاده از تب Layers برای درک ساختار لایه‌ها
• 75. تشخیص جَنک و فریز با FPS meter
• 76. بررسی مصرف CPU و GPU در DevTools
• 77. آنالیز Paint Flashing برای دیدن مناطق رنگ‌آمیزی شده
• 78. استفاده از Rendering tab (Paint Flashing, Layer borders)
• 79. شبیه‌سازی شرایط شبکه و CPU ضعیف
• 80. گزارش‌گیری و پایش عملکرد (RUM - Real User Monitoring)
• 81. معرفی Core Web Vitals (CWV) و اهمیت آن
• 82. "بزرگترین محتوای نمایان" (LCP - Largest Contentful Paint) و انیمیشن‌ها
• 83. چگونه انیمیشن‌های Hero Section بر LCP تاثیر می‌گذارند؟
• 84. بهینه‌سازی انیمیشن‌های لودینگ برای بهبود LCP
• 85. "تاخیر اولین ورودی" (FID - First Input Delay) و Main Thread Blocking
• 86. انیمیشن‌های سنگین و بلوکه کردن Main Thread
• 87. بهبود FID با اجرای انیمیشن‌ها خارج از Main Thread
• 88. "تغییر چیدمان تجمعی" (CLS - Cumulative Layout Shift) و انیمیشن‌ها
• 89. جلوگیری از CLS با انیمیشن‌های مبتنی بر Transform
• 90. مدیریت محتوای پویا برای جلوگیری از CLS
• 91. "تعامل تا نقاشی بعدی" (INP - Interaction to Next Paint) و انیمیشن‌ها
• 92. تاثیر انیمیشن‌های طولانی و پیچیده بر INP
• 93. ملاحظات دسترس‌پذیری (Accessibility) برای انیمیشن‌ها
• 94. استفاده از prefers-reduced-motion برای کاربران حساس
• 95. طراحی انیمیشن‌های Responsive برای دستگاه‌های مختلف
• 96. سازگاری مرورگرها و Fallback ها
• 97. تست خودکار (Automated Testing) انیمیشن‌ها
• 98. نگهداری و مقیاس‌پذیری (Maintainability & Scalability) کد انیمیشن
• 99. مروری بر آینده انیمیشن‌های وب (CSS Houdini, WebGPU)
• 100. چک لیست نهایی بهینه‌سازی انیمیشن‌های وب