ב-JavaScript, קיימות מספר גישות לשיפור ממשק המשתמש הכולל של האתר. ה 'עובד אינטרנט' היא גישה כזו המאפשרת לשרשור הראשי להמשיך להפעיל מבלי להיחסם. הוא כולל את מופע מנוע ה-JavaScript הנפרד שלו, ולכן אינו יכול להפעיל את הפונקציות של השרשור הראשי.
מאמר זה ידון כיצד להשתמש 'עובד אינטרנט' עבור ריבוי שרשורים ב-JavaScript.
מה הם Web Workers?
'עובדי אינטרנט' מתאים ל-API של דפדפן המאפשר ל-JavaScript להריץ את המשימות במקביל/בו-זמנית בשרשור נפרד/יעודי.
מה הצורך בעובדי אינטרנט?
מכיוון ש-JavaScript הוא חוט יחיד, לכן, קודי ה-JavaScript המורכבים חוסמים את שרשור ממשק המשתמש, כלומר עוצרים את החלון הראשי שמתמודד עם כל המשימות לרענון, הטמעת אירועי קלט משתמש וכו'. בתרחיש כזה, חווית המשתמש מושפעת . כדי להתמודד עם הנושא הזה, ה 'עובד אינטרנט' נכנס לתוקף ופותר את חסימת השרשור של ממשק המשתמש.
כיצד להשתמש ב-Web Workers לריבוי הליכים עם JavaScript?
להכין 'עובד אינטרנט' , השתמש בבנאי Worker. זה כזה שהוא לוקח כתובת URL בתור הארגומנט שלו, התואם לנתיב של קובץ סקריפט העובד המיישם את הפונקציונליות הרצויה. עם זאת, כדי להרכיב את קוד העובד בקובץ HTML, השתמש ב-a 'כֶּתֶם' לכתוב קוד עובד.
תחביר (יצירת Web Worker)
const איקס = חָדָשׁ עוֹבֵד ( 'worker.js' ) ;תחביר (שליחת הודעה לעובד)
const איקס = חָדָשׁ עוֹבֵד ( 'worker.js' ) ;
תחביר (קבלת הודעה מהעובד)
איקס. על הודעה = פוּנקצִיָה ( מִקרֶה ) {לְנַחֵם. עֵץ ( מִקרֶה. נתונים ) ;
} ;
דוגמה: שימוש ב-'Web Worker' כדי לחשב את הפקטוריאל של מספר ב-JavaScript
הדוגמה הבאה משתמשת ב- 'עוֹבֵד()' בנאי כדי ליצור עובד אינטרנט ולחשב את הפקטוריאלי של מספר:
< html >
< רֹאשׁ >
< סגנון h2 = 'טקסט-align: center;' > דוגמה לעובדי אינטרנט h2 >
רֹאשׁ >
< גוּף >
< תַסרִיט >
const איקס = חָדָשׁ עוֹבֵד ( כתובת אתר. createObjectURL ( חָדָשׁ כֶּתֶם ( [
`
// תסריט עובד
const עוּבדָה = ( נ ) => {
אם ( נ == 0 || נ == 1 ) {
לַחֲזוֹר 1n ;
}
אַחֵר {
לַחֲזוֹר BigInt ( נ ) * עוּבדָה ( BigInt ( נ ) - 1n ) ;
}
} ;
עצמי. על הודעה = ( מִקרֶה ) => {
const עם = עוּבדָה ( מִקרֶה. נתונים ) ;
עצמי. postMessage ( עם. toString ( ) ) ;
} ; `
] , { סוּג : 'טקסט/Javascript' } ) ) ) ;
איקס. postMessage ( 15n ) ;
איקס. על הודעה = ( מִקרֶה ) => {
const הַחוּצָה = מִקרֶה. נתונים ;
לְנַחֵם. עֵץ ( 'פקטורי של 15 באמצעות Web Worker->' , הַחוּצָה ) ;
} ;
גוּף >
html >
בקוד זה, החל את השלבים הבאים:
- ראשית, ציין את הכותרת המוצהרת.
- לאחר מכן, צור א 'עובד אינטרנט' אובייקט בעל כתובת ה-URL של האובייקט Blob המהווה את הקוד של העובד.
- הקוד המוקדש לעובד כלול בפונקציה אנונימית המחשבת את הפקטוריאלי של המספר באמצעות פונקציה רקורסיבית.
- כמו כן, העובד מאזין להודעות שנשלחות דרך השרשור הראשי תוך שימוש ב- 'self.onmessage' אירוע, מאחזר את הפקטורי של המספר שעבר, ונותן את התוצאה לשרשור הראשי באמצעות ה- 'postMessage()' שיטה.
- בשרשור הראשי, צור מופע עובד ושלח לו הודעה עם המספר ' 15n '. כאן, ' נ ' מתייחס לערך 'BigInt'.
- לאחר שהעובד סיים את מחשוב הפקטוריאלי, הוא שולח את התוצאה/תוצאה חזרה לשרשור הראשי באמצעות 'postMessage()' שיטה.
- לבסוף, השרשור הראשי מביא/מקבל את התוצאה ב- 'הודעה' אירוע ומחזיר את הפקטוריאלי המתאים של המספר בקונסולה.
תְפוּקָה
היתרונות של Web Workers
עיבוד מקביל : במקרה של הפעלת אותו קוד באופן מקביל.
אין הפרעה בביצוע הקוד: ביצוע הקוד מתבצע ללא קשר לרענונים וכו' בעמוד הנוכחי.
מעקב אחר תנועה: כל זיהוי התנועה מתרחש ב-worker ברקע.
ריבוי פתילים מופעל: אלה מאפשרים ריבוי שרשורים ב-JavaScript.
ביצועים משופרים: מטב את הביצועים על ידי ביצוע משימות אינטנסיביות/מאתגרות בשרשורים נפרדים.
חווית משתמש יעילה: אלה נמנעים מחסימת השרשור הראשי, וכתוצאה מכך חווית משתמש רספונסיבית.
מגבלות של Web Workers
עם זאת, ישנן מגבלות מסוימות גם של עובדי האינטרנט. אלה נאמרים, כדלקמן:
- ניצול גדול יותר של הזיכרון.
- לא ניתן לעדכן DOM בשרשור עובד או להפעיל את אובייקט החלון.
סיכום
'עובדי אינטרנט' מתאים ל-API של דפדפן המאפשר ל-JavaScript להריץ את המשימות בו-זמנית בשרשור נפרד/יעודי. ניתן להשתמש בהם על ידי נטילת כתובת URL כארגומנט שלה, התואמת לנתיב של קובץ סקריפט העובד. בלוג זה דן בשימוש ב-'Web Workers' לריבוי שרשורים ב-JavaScript.