עד כה חלק גדול מהתוכן בקורס הזה התמקד במושגים כמו שיקולים כלליים לביצועי HTML, רמזים למשאבים, אופטימיזציה של סוגי משאבים לשיפור זמן הטעינה הראשונית של דף והיענות למשתמש קלט, וגם טעינה מדורגת של משאבים ספציפיים.
עם זאת, יש היבט אחד של ביצועים לגבי JavaScript שלא היה שכבר למדנו בקורס הזה, וזה התפקיד של עובדי אינטרנט בשיפור רספונסיביות לקלט, שנספרה במודול הזה ובמודול הבא.
JavaScript מתואר לעיתים קרובות כשפה עם שרשור יחיד. בפועל, הוא ה-thread הראשי, שהוא השרשור היחיד שבו הדפדפן את רוב העבודה שרואים בדפדפן. העבודה הזו כוללת משימות שקשורות בנושאים כמו כתיבת סקריפטים, סוגים מסוימים של עבודת רינדור, ניתוח HTML ו-CSS, וסוגים אחרים של עבודות שמוצגות למשתמשים כדי לשפר את חוויית המשתמש. למען האמת, דפדפנים משתמשים בשרשורים אחרים כדי לבצע עבודה שאתם, המפתח, לא בדרך כלל יש גישה ישירה אליהם, כמו שרשורים של GPU.
כשמדובר ב-JavaScript, לרוב בדרך כלל אפשר לעבוד על רק כברירת מחדל. אפשר להירשם ולהשתמש שרשורים נוספים ב-JavaScript. התכונה שמאפשרת ריבוי שרשורים JavaScript נקרא Web Workers API.
עובדי אינטרנט הם שימושיים כאשר יש לך עבודת ממוחשבת יקרה, לא יכולות לפעול בשרשור הראשי מבלי לגרום למשימות ארוכות שהופכות את הדף לא מגיב. משימות כאלה יכולות להשפיע על האינטראקציה של האתר שלך Next Paint (INP), כדי לעזור לך לדעת מתי יש לך עבודה נעשות לגמרי מה-thread הראשי. זה יעזור לנו לפנות מקום משימות אחרות בשרשור הראשי, כדי שהאינטראקציות של המשתמשים יהיו מהירות יותר.
המודול הזה וההדגמה העוקבת שמציגה תרחיש שימוש קונקרטי לגבי האינטרנט ב-Google Workspace for Education. ההדגמה עצמה מראה איך אפשר להשתמש ב-Web Worker כדי לבצע את העבודה של קריאת מטא-נתונים של תמונה מקובץ JPEG מחוץ לשרשור הראשי — יכול להחזיר את המטא-נתונים לשרשור הראשי כך שהמשתמש יוכל לראות אותו.
איך עובד Web Worker מופעל
Worker נרשם באמצעות יצירת כיתה Worker
. אחרי שעושים
כך לציין את המיקום של קוד ה-Web Worker, שאותו הדפדפן טוען
ולאחר מכן יוצר שרשור חדש עבורו. השרשור שנוצר נקרא בדרך כלל
שרשור עובדים.
const myWebWorker = new Worker('/js/my-web-worker.js');
בקובץ ה-JavaScript של העובד — my-web-worker.js
במקרה הזה — אפשר לאחר מכן
לכתוב קוד שרץ בשרשור עובדים נפרד.
מגבלות של Web Worker
בניגוד ל-JavaScript שפועל ב-thread הראשי, לעובדי אינטרנט אין גישה ישירה
להקשר של window
. ויש להם גישה מוגבלת לממשקי ה-API שהוא מספק. דפי אינטרנט
העובדים כפופים למגבלות הבאות:
- עובדי אינטרנט לא יכולים לגשת ישירות ל-DOM.
- עובדי אינטרנט יכולים לתקשר עם ההקשר
window
באמצעות העברת הודעות כלומר, עובד אינטרנט יכול לגשת בצורה עקיפה ל-DOM בדרך כלשהי. - היקף ההרשאות של ה-Web Worker הוא
self
ולאwindow
. - להיקף של Web Worker יש גישה לרכיבים של JavaScript
מותאמים אישית, וכן ממשקי API כמו
fetch
ומספר גדול למדי של ממשקי API אחרים.
איך עובדי אינטרנט מדברים עם window
לעובדי אינטרנט יש אפשרות לתקשר עם window
של ה-thread הראשי
הקשר מסוים באמצעות צינור העברת הודעות. צינור עיבוד הנתונים הזה מאפשר להעביר נתונים
מה-thread הראשי ומ-Web worker. כדי לשלוח נתונים מ-Web worker אל
ה-thread הראשי, הגדרת אירוע message
בהקשר של עובד האינטרנט (self
)
// my-web-worker.js
self.addEventListener("message", () => {
// Sends a message of "Hellow, window!" from the web worker:
self.postMessage("Hello, window!");
});
לאחר מכן, בסקריפט בהקשר window
שבשרשור הראשי, אפשר לקבל
הודעה משרשור של עובדים באינטרנט באמצעות אירוע message
נוסף:
// scripts.js
// Creates the web worker:
const myWebWorker = new Worker('/js/my-web-worker.js');
// Adds an event listener on the web worker instance that listens for messages:
myWebWorker.addEventListener("message", ({ data }) => {
// Echoes "Hello, window!" to the console from the worker.
console.log(data);
});
צינור העברת ההודעות של ה-Web worker הוא פתרון מסוגים שונים מהאינטרנט
להקשר של העובדים. באמצעותו ניתן לשלוח נתונים מעובד האינטרנט אל window
שאפשר להשתמש בהן כדי לעדכן את ה-DOM, או לבצע פעולות אחרות שצריך לבצע
בשרשור הראשי.
בוחנים את הידע
באיזה שרשור פועל Web Worker?
לאילו תחומים יש לעובדי אינטרנט גישה?
window
,
כולל fetch
.
window
, אבל רק באופן עקיף.איך עובד אינטרנט יכול לגשת להקשר של 'window'?
window
.
postMessage
בהקשר של עובד/ת אינטרנט (self
).
window
בשום צורה.
השלב הבא: תרחיש לדוגמה של עובד אינטרנט בפועל
במודול הבא מוצג תרחיש שימוש קונקרטי לדוגמה של עובד אינטרנט, ראינו. במודול הזה, Web worker משמש לאחזור קובץ JPEG בכתובת URL מסוימת, ולקרוא את המטא-נתונים של קובץ Exif שלה ב-Web worker. ואז הנתונים האלה נשלחים חזרה ל-thread הראשי שיוצג למשתמש.