הבנת JavaScript סינכרונית ואסינכרונית
JavaScript מריצה משימה אחת בכל פעם. זאת מכיוון שהיא שפה בעלת Thread יחיד (single-threaded).
כדי לבנות אפליקציות מהירות, עליכם להכיר את ההבדל בין קוד סינכרוני לקוד אסינכרוני.
ביצוע סינכרוני
הקוד רץ שורה אחר שורה. כל משימה ממתינה לסיום המשימה הקודמת.
חשבו על תור לכספומט. אדם שני לא יכול להשתמש במכשיר עד שהאדם הראשון יסיים.
אם משימה אחת לוקחת זמן רב, כל התוכנית נעצרת. זה נקרא חסימה (blocking).
ביצוע אסינכרוני
משימות רצות באופן עצמאי. JavaScript מתחילה משימה ועוברת מיד למשימה הבאה.
חשבו על מסעדה. אתם מזמינים אוכל, ואז מדברים עם חברים בזמן ההמתנה. אתם לא יושבים ללא מעש ומחכים שהאוכל יגיע לפני שאתם עושים דבר אחר.
קוד אסינכרוני מונע מהאפליקציה שלכם לקפוא במהלך:
- בקשות API
- שאילתות בסיס נתונים
- קריאת קבצים
- העלאת תמונות
שלוש דרכים לניהול קוד אסינכרוני:
Callbacks פונקציה שרצה לאחר סיום משימה מסוימת. זה כמו שליח שמתקשר אליכם כשהאוכל מגיע.
Promises Promise מייצג תוצאה עתידית. הוא נשאר במצב המתנה (pending) עד שהוא מבוצע בהצלחה (resolved) או נדחה (rejected).
Async/Await זה גורם לקוד אסינכרוני להיראות כמו קוד סינכרוני. זה קל לקריאה. משתמשים ב-
awaitכדי להשהות פונקציה מבלי לחסום את שאר התוכנית.
איך זה עובד מתחת למכסה המנוע:
JavaScript משתמשת ב-Event Loop כדי לנהל את המשימות הללו.
- Call Stack: עוקב אחר הפונקציות הנוכחיות שלכם.
- Web APIs: מטפל במשימות ארוכות כמו טיימרים או fetches.
- Callback Queue: מחזיק משימות שהסתיימו.
- Event Loop: מעביר משימות מהתור למחסנית כאשר המחסנית ריקה.
השוואה:
סינכרוני:
- רץ באופן רציף
- חוסם את התוכנית
- פשוט לכתיבה
- איטי עבור משימות כבדות
אסינכרוני:
- רץ באופן עצמאי
- לא חוסם (Non-blocking)
- מורכב יותר
- יעיל עבור אפליקציות ווב
שליטה במושגים הללו היא המפתח לשימוש ב-React, Node.js וב-APIs מודרניים.
Source: https://www.geeksforgeeks.org/javascript/synchronous-and-asynchronous-in-javascript/ Source: https://www.browserstack.com/guide/synchronous-vs-asynchronous-in-javascript Full post: https://dev.to/annapoo/understanding-synchronous-and-asynchronous-javascript-5gea