סקירה כללית של worker באינטרנט

עד כה חלק גדול מהתוכן בקורס הזה התמקד במושגים כמו שיקולים כלליים לביצועי 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 משמש לאחזור קובץ JPEG בכתובת URL מסוימת, ולקרוא את המטא-נתונים של קובץ Exif שלה ב-Web worker. ואז הנתונים האלה נשלחים חזרה ל-thread הראשי שיוצג למשתמש.