دوره وب‌کیت به زبان ساده: چگونه مرورگرها صفحات وب را نمایش می‌دهند؟ همراه با فلش‌کارت آموزشی — ارائه روی فلش مموری

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

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

عنوان دوره: وب‌کیت به زبان ساده: چگونه مرورگرها صفحات وب را نمایش می‌دهند؟

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

موضوع میانی: موتورهای مرورگر

📋 سرفصل‌های دوره (100 موضوع)

• 1. بخش اول: مقدمات و کلیات**
• 2. چرا باید موتورهای مرورگر را بشناسیم؟
• 3. مرورگر چیست؟ فراتر از یک پنجره به اینترنت
• 4. قلب تپنده مرورگر: موتور رندرینگ (Rendering Engine) چیست؟
• 5. سفر در زمان: تاریخچه مختصر وب‌کیت
• 6. وب‌کیت کجاست؟ از سافاری تا پلی‌استیشن
• 7. نگاهی به رقبای اصلی: Blink، Gecko و دیگران
• 8. معماری کلی یک مرورگر مدرن
• 9. سفر یک URL: از تایپ آدرس تا نمایش صفحه
• 10. بازخوانی مفاهیم پایه: HTML چیست و چه می‌کند؟
• 11. بازخوانی مفاهیم پایه: CSS برای چه به وجود آمده؟
• 12. بازخوانی مفاهیم پایه: نقش JavaScript در صفحات وب
• 13. وب‌کیت در یک نگاه: معرفی ماژول‌های اصلی
• 14. WebCore و JavaScriptCore: دو بازوی قدرتمند وب‌کیت
• 15. مفاهیم کلیدی اولیه: DOM، CSSOM و Render Tree
• 16. ابزارهای ما: چگونه با DevTools به دنیای وب‌کیت سرک بکشیم؟
• 17. بخش دوم: دریافت و تجزیه (Parsing)**
• 18. اولین قدم رندرینگ: دریافت منابع از شبکه
• 19. رمزگشایی از HTML: فرآیند تجزیه (Parsing)
• 20. توکن‌سازی (Tokenization): شکستن HTML به قطعات کوچک
• 21. ساخت درخت: چگونه از توکن‌ها به درخت DOM می‌رسیم؟
• 22. خطاهای HTML: مرورگر چگونه با کدهای نامعتبر برخورد می‌کند؟
• 23. معرفی DOM: مدل شیءگرای سند
• 24. تجزیه CSS: چگونه مرورگر استایل‌ها را می‌فهمد؟
• 25. ساخت CSSOM: مدل شیءگرای استایل‌ها
• 26. چالش‌های تجزیه CSS: چرا CSS رندر را مسدود می‌کند؟
• 27. و اما جاوا اسکریپت: تجزیه و کامپایل اولیه
• 28. تگ `<script>`: چرا جایگاه آن در HTML مهم است؟
• 29. اسکریپت‌های مسدودکننده تجزیه (Parser-blocking Scripts)
• 30. Preload Scanner: نگاهی دزدکی به آینده برای افزایش سرعت
• 31. Shadow DOM چیست و چگونه تجزیه می‌شود؟
• 32. جمع‌بندی فاز تجزیه: ورودی‌ها و خروجی‌ها
• 33. بخش سوم: محاسبه استایل و چیدمان (Style & Layout)**
• 34. مرحله پیوند: ترکیب DOM و CSSOM
• 35. تولد درخت رندر (Render Tree): اسکلت بصری صفحه
• 36. چه عناصری وارد درخت رندر نمی‌شوند؟ (مانند `display: none`)
• 37. محاسبه استایل (Style Calculation): چه سبکی به چه عنصری تعلق دارد؟
• 38. آبشار (Cascade): قانون اولویت در CSS
• 39. وراثت (Inheritance) در CSS چگونه کار می‌کند؟
• 40. مفهوم Specificity: کدام قانون CSS قوی‌تر است؟
• 41. مقادیر محاسبه‌شده (Computed Values) در CSS
• 42. واحدها در CSS: تبدیل `em`، `rem` و `%` به پیکسل
• 43. مرحله چیدمان (Layout/Reflow): محاسبه هندسه عناصر
• 44. جعبه‌ها، همه‌چیز جعبه است: آشنایی با Box Model
• 45. جریان عادی (Normal Flow): چیدمان پیش‌فرض عناصر
• 46. مفهوم Block Formatting Context (BFC)
• 47. چیدمان شناورها (Floats) و پاک‌سازی آن‌ها
• 48. چیدمان موقعیت‌دهی (Positioning): از `static` تا `fixed`
• 49. دنیای مدرن چیدمان: Flexbox چگونه کار می‌کند؟
• 50. دنیای مدرن چیدمان: Grid Layout چگونه کار می‌کند؟
• 51. Reflow چیست و چه زمانی اتفاق می‌افتد؟
• 52. هزینه‌های Reflow: چرا باید از آن اجتناب کنیم؟
• 53. Dirty Bit System: روش وب‌کیت برای بهینه‌سازی چیدمان
• 54. بخش چهارم: نقاشی و ترکیب (Painting & Compositing)**
• 55. از تئوری تا عمل: مرحله نقاشی (Painting)
• 56. درخت لایه رندر (RenderLayer Tree): سازماندهی عناصر برای نقاشی
• 57. چه چیزی یک RenderLayer جدید می‌سازد؟
• 58. مفهوم Stacking Context و ترتیب نمایش عناصر (z-index)
• 59. فرآیند نقاشی: تبدیل اطلاعات چیدمان به دستورات گرافیکی
• 60. نقاشی یک لایه: چگونه محتوای یک عنصر رسم می‌شود؟
• 61. مفهوم ترکیب (Compositing): مونتاژ نهایی صفحه
• 62. لایه‌های کامپوزیت (Composited Layers) و نقش GPU
• 63. رشته کامپوزیتور (Compositor Thread)
• 64. شتاب‌دهی سخت‌افزاری (Hardware Acceleration) چیست؟
• 65. چگونه بفهمیم یک عنصر روی GPU رندر می‌شود؟
• 66. Repaint چیست و چه تفاوتی با Reflow دارد؟
• 67. بهینه‌سازی نقاشی: خصوصیات CSS که باعث Repaint می‌شوند
• 68. کاشی‌کاری (Tiling): تقسیم صفحه برای رندر سریع‌تر
• 69. جمع‌بندی خط لوله رندر: از HTML تا پیکسل‌های روی صفحه
• 70. بخش پنجم: جاوا اسکریپت و تعاملات**
• 71. معرفی JavaScriptCore: موتور جاوا اسکریپت وب‌کیت
• 72. مفسر، JIT Compiler و بهینه‌سازی کد جاوا اسکریپت
• 73. مدیریت حافظه در جاوا اسکریپت: Stack و Heap
• 74. زباله‌روب (Garbage Collector) در JavaScriptCore
• 75. مدل همروندی و حلقه رویداد (Event Loop)
• 76. تفاوت Task Queue و Microtask Queue
• 77. تعامل جاوا اسکریپت با DOM: پل ارتباطی
• 78. دستکاری DOM: هزینه‌های تغییر درخت
• 79. رویدادها (Events): از کلیک کاربر تا اجرای کد
• 80. Event Bubbling و Event Capturing
• 81. Web APIها: فراتر از زبان جاوا اسکریپت
• 82. تایمرها (`setTimeout`) و تعامل با Event Loop
• 83. درخواست‌های شبکه (Fetch/XHR) و ماهیت غیرهمزمان آن‌ها
• 84. Web Workers: اجرای جاوا اسکریپت در یک رشته جداگانه
• 85. بخش ششم: موضوعات پیشرفته و عملکرد**
• 86. مسیر رندرینگ بحرانی (Critical Rendering Path)
• 87. بهینه‌سازی CRP: کاهش زمان تا اولین رندر
• 88. فونت‌های وب و تأثیر آن‌ها بر رندرینگ (FOIT/FOUT)
• 89. بهینه‌سازی رندرینگ انیمیشن‌ها در CSS
• 90. `will-change`: راهنمایی مرورگر برای بهینه‌سازی
• 91. `requestAnimationFrame` برای انیمیشن‌های روان
• 92. Layout Thrashing: کابوس عملکرد
• 93. استفاده از ابزار Performance در DevTools برای شناسایی مشکلات
• 94. مدل امنیتی مرورگر: Same-Origin Policy
• 95. Content Security Policy (CSP) چگونه کار می‌کند؟
• 96. پردازش ویدئو و صوت در وب‌کیت
• 97. WebAssembly (Wasm): اجرای کدهای سطح پایین در مرورگر
• 98. ویژگی‌های مدرن وب‌کیت: ITP و حریم خصوصی
• 99. OffscreenCanvas: رندرینگ خارج از رشته اصلی
• 100. بخش هفتم: فراتر از وب‌کیت و نتیجه‌گیری**

وب‌کیت به زبان ساده: چگونه مرورگرها صفحات وب را نمایش می‌دهند؟

آیا تا به حال به این فکر کرده‌اید که مرورگر شما چگونه به این سرعت و با این دقت، صفحات وب پیچیده را به تصویر می‌کشد؟ چه اتفاقی در پشت صحنه می‌افتد تا کدها و تصاویر به یک تجربه بصری جذاب تبدیل شوند؟

همانطور که کتاب "WebKit for dummies" دنیای وب‌کیت را برای افراد مبتدی قابل فهم کرد، دوره آموزشی ما با عنوان "وب‌کیت به زبان ساده: چگونه مرورگرها صفحات وب را نمایش می‌دهند؟" دریچه‌ای نو به سوی درک عمیق‌تر از عملکرد مرورگرها و موتورهای رندرینگ می‌گشاید. این دوره به شما کمک می‌کند تا اسرار پشت پرده‌ی نمایش صفحات وب را کشف کرده و دانش خود را در این زمینه به سطح جدیدی ارتقا دهید.

درباره دوره

دوره "وب‌کیت به زبان ساده" یک راهنمای جامع و عملی برای درک عمیق‌تر از نحوه عملکرد مرورگرهای وب و موتورهای رندرینگ آن‌ها است. با الهام از رویکرد ساده و کاربردی کتاب "WebKit for dummies"، این دوره مفاهیم پیچیده را به زبان ساده و قابل فهم ارائه می‌دهد. شما در این دوره با مراحل مختلف رندرینگ یک صفحه وب، از تجزیه HTML و CSS گرفته تا چیدمان عناصر و ترسیم آن‌ها بر روی صفحه نمایش، آشنا خواهید شد. این دوره به شما دیدگاهی ارزشمند در مورد بهینه‌سازی وب‌سایت‌ها برای عملکرد بهتر و تجربه کاربری روان‌تر می‌دهد.

موضوعات کلیدی

• مقدمه‌ای بر موتورهای مرورگر و نقش آن‌ها در دنیای وب
• آشنایی با معماری وب‌کیت و اجزای اصلی آن
• تجزیه (Parsing) HTML و CSS و ساخت درخت DOM و CSSOM
• رندرینگ و چیدمان (Layout) عناصر صفحه
• رنگ‌آمیزی (Painting) و نمایش صفحه بر روی نمایشگر
• بهینه‌سازی رندرینگ برای بهبود عملکرد وب‌سایت
• آشنایی با JavaScript Engine و نقش آن در تعاملات وب
• مباحث مربوط به امنیت و حریم خصوصی در مرورگرها
• ابزارهای توسعه مرورگر (Developer Tools) و نحوه استفاده از آن‌ها
• بررسی سایر موتورهای رندرینگ مانند Blink و Gecko

مخاطبان دوره

این دوره برای افراد زیر مناسب است:

• توسعه‌دهندگان وب (Frontend و Backend) که به دنبال درک عمیق‌تری از نحوه عملکرد مرورگرها هستند.
• طراحان وب که می‌خواهند وب‌سایت‌هایی با عملکرد بهینه و تجربه کاربری روان طراحی کنند.
• دانشجویان و علاقه‌مندان به حوزه توسعه وب که می‌خواهند دانش خود را در این زمینه گسترش دهند.
• متخصصان SEO که به دنبال راه‌هایی برای بهبود سرعت و عملکرد وب‌سایت‌ها هستند.
• هر کسی که به عملکرد داخلی مرورگرها و فناوری‌های وب علاقه‌مند است.

چرا این دوره را بگذرانیم؟

گذراندن دوره "وب‌کیت به زبان ساده" مزایای فراوانی برای شما خواهد داشت:

• درک عمیق‌تر از فناوری‌های وب: شما با نحوه عملکرد مرورگرها و موتورهای رندرینگ آشنا می‌شوید و دیدگاه جامع‌تری نسبت به فناوری‌های وب پیدا می‌کنید.
• بهبود مهارت‌های توسعه وب: با درک بهتر از نحوه عملکرد مرورگرها، می‌توانید وب‌سایت‌هایی با عملکرد بهینه و تجربه کاربری روان‌تر ایجاد کنید.
• افزایش کارایی در حل مشکلات: درک عمیق‌تر از رندرینگ صفحات، به شما در دیباگ کردن و رفع مشکلات مربوط به عملکرد وب‌سایت کمک می‌کند.
• ارتقای جایگاه شغلی: دانش و مهارت‌های کسب شده در این دوره می‌تواند به شما در یافتن شغل‌های بهتر و ارتقای جایگاه شغلی‌تان کمک کند.
• افزایش تسلط بر SEO: با درک بهتر از عوامل موثر بر سرعت و عملکرد وب‌سایت، می‌توانید استراتژی‌های SEO بهتری را پیاده‌سازی کنید.
• یادگیری به زبان ساده: مفاهیم پیچیده به زبانی ساده و قابل فهم ارائه می‌شوند، درست مانند کتاب "WebKit for dummies".
• سرمایه‌گذاری روی آینده: تسلط بر فناوری‌های وب، یک سرمایه‌گذاری ارزشمند برای آینده شغلی شما است.

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

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

• بخش 1: مقدمه‌ای بر دنیای مرورگرها
  • مرورگر چیست و چگونه کار می‌کند؟
  • آشنایی با موتورهای رندرینگ مختلف
  • نقش استانداردها در توسعه وب
• بخش 2: معماری وب‌کیت
  • آشنایی با اجزای اصلی وب‌کیت
  • نقش JavaScriptCore در وب‌کیت
  • بررسی WebCore و رندررها
• بخش 3: تجزیه HTML و CSS
  • مراحل تجزیه HTML و ساخت DOM
  • تجزیه CSS و ساخت CSSOM
  • ارتباط بین DOM و CSSOM
• بخش 4: رندرینگ و چیدمان
  • محاسبه چیدمان عناصر صفحه
  • مدل جعبه‌ای (Box Model) در CSS
  • استفاده از Flexbox و Grid برای چیدمان
• بخش 5: رنگ‌آمیزی و نمایش
  • مراحل رنگ‌آمیزی عناصر صفحه
  • نقش GPU در رندرینگ
  • بهینه‌سازی رنگ‌آمیزی برای بهبود عملکرد
• بخش 6: JavaScript Engine
  • آشنایی با V8 و JavaScriptCore
  • نحوه اجرای JavaScript در مرورگر
  • بهینه‌سازی کدهای JavaScript
• بخش 7: امنیت و حریم خصوصی
  • تهدیدات امنیتی در مرورگرها
  • مکانیسم‌های امنیتی در وب‌کیت
  • حفظ حریم خصوصی کاربران
• بخش 8: ابزارهای توسعه مرورگر
  • آشنایی با Chrome DevTools
  • دیباگ کردن JavaScript
  • بررسی عملکرد وب‌سایت
• بخش 9: سایر موتورهای رندرینگ
  • بررسی Blink و Gecko
  • تفاوت‌ها و شباهت‌های موتورهای رندرینگ
  • انتخاب موتور رندرینگ مناسب
• بخش 10: بهینه‌سازی وب‌سایت برای مرورگرها
  • بهینه‌سازی تصاویر و ویدیوها
  • کاهش حجم HTML و CSS
  • استفاده از CDN

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