مروری بر کارگران وب

توجه: این یک ماژول است که در مورد نحوه کار کارگران وب در سطح بالا بحث می کند. این یک توضیح جامع نیست، بلکه یک مرور کلی از کارمندان وب است، و بعداً نشان می دهد که چگونه می توانند عملکرد را بهبود بخشند. برای بررسی عمیق موضوع، استفاده از وب کارگران برای اجرای جاوا اسکریپت از رشته اصلی مرورگر را بخوانید.

بسیاری از مطالب این دوره تاکنون بر مفاهیمی مانند ملاحظات کلی عملکرد HTML، نکات منابع، بهینه سازی انواع منابع مختلف برای بهبود زمان بارگذاری اولیه صفحه و پاسخگویی به ورودی کاربر، و همچنین بارگذاری تنبل منابع خاص متمرکز شده است.

با این حال، یک جنبه از عملکرد در رابطه با جاوا اسکریپت وجود دارد که هنوز در این دوره به آن پرداخته نشده است، و آن نقش وب کارگران در بهبود پاسخگویی ورودی است که این ماژول و ماژول بعدی آن را پوشش می دهند.

جاوا اسکریپت اغلب به عنوان یک زبان تک رشته ای توصیف می شود. در عمل، این به رشته اصلی اشاره دارد که همان رشته‌ای است که مرورگر بیشتر کارهایی را که در مرورگر می‌بینید انجام می‌دهد. این کار شامل کارهایی مانند اسکریپت نویسی، برخی از انواع کار رندر، تجزیه HTML و CSS و انواع دیگر کارهای رو به رو کاربر است که تجربه کاربر را هدایت می کند. در حقیقت، مرورگرها از رشته‌های دیگری برای انجام کارهایی استفاده می‌کنند که شما، توسعه‌دهنده، معمولاً به آنها دسترسی مستقیم ندارید - مانند رشته‌های GPU .

جایی که به جاوا اسکریپت مربوط می شود، شما معمولاً محدود به انجام کار روی رشته اصلی هستید – اما فقط به صورت پیش فرض. امکان ثبت و استفاده از موضوعات اضافی در جاوا اسکریپت وجود دارد . قابلیتی که امکان چند رشته در جاوا اسکریپت را فراهم می کند به عنوان Web Workers API شناخته می شود.

وب‌کارگرها زمانی مفید هستند که کارهای محاسباتی پرهزینه‌ای داشته باشید که نمی‌توان آن‌ها را بدون ایجاد کارهای طولانی که باعث می‌شود صفحه پاسخگو نباشد، روی رشته اصلی اجرا کرد. چنین کارهایی مطمئناً می توانند بر تعامل وب سایت شما با رنگ بعدی (INP) تأثیر بگذارند، بنابراین می تواند مفید باشد که بدانید چه زمانی کاری دارید که می توانید به طور کامل خارج از موضوع اصلی انجام دهید. انجام این کار می تواند به ایجاد فضای بیشتری برای سایر وظایف در رشته اصلی کمک کند تا تعاملات کاربر سریعتر باشد.

این ماژول و نسخه آزمایشی بعدی که یک مورد استفاده مشخص را نشان می دهد، کارگران وب را پوشش می دهد. خود نسخه نمایشی نشان می‌دهد که چگونه می‌توانید از یک وب‌کار برای انجام کار خواندن فراداده تصویر از یک فایل JPEG خارج از رشته اصلی استفاده کنید - و چگونه می‌توانید آن ابرداده را به رشته اصلی برگردانید تا کاربر ببیند.

چگونه یک وب کارگر راه اندازی می شود

یک وب کارگر با نمونه سازی کلاس Worker ثبت می شود. هنگامی که این کار را انجام می دهید، مشخص می کنید که کد web worker در کجا قرار دارد، که مرورگر آن را بارگیری می کند و متعاقباً یک رشته جدید برای آن ایجاد می کند. نخ حاصل اغلب نخ کارگر نامیده می شود.

const myWebWorker = new Worker('/js/my-web-worker.js');

در فایل جاوا اسکریپت کارگر - در این مورد my-web-worker.js - می‌توانید کدی بنویسید که سپس در یک رشته کارگر جداگانه اجرا شود.

محدودیت های کارگر وب

برخلاف جاوا اسکریپت که روی رشته اصلی اجرا می شود، وب کارمندان دسترسی مستقیم به زمینه window ندارند. و دسترسی محدودی به API هایی که ارائه می دهد دارند. کارگران وب تحت محدودیت های زیر هستند:

• کارگران وب نمی توانند مستقیماً به DOM دسترسی داشته باشند.
• کارگران وب می توانند از طریق یک خط لوله پیام با زمینه window ارتباط برقرار کنند، به این معنی که یک وب کارگر می تواند به طور غیرمستقیم به روشی به DOM دسترسی داشته باشد.
• محدوده وب کارگر به جای window ، self است.
• محدوده وب کارگر به ساختارهای اولیه و ساختارهای جاوا اسکریپت و همچنین APIهایی مانند fetch و تعداد نسبتاً زیادی از APIهای دیگر دسترسی دارد .

چگونه کارگران وب با window صحبت می کنند

این امکان برای یک کارمند وب وجود دارد که از طریق یک خط لوله پیام با زمینه window موضوع اصلی ارتباط برقرار کند. این خط لوله به شما امکان می‌دهد داده‌ها را به و از رشته اصلی و وب‌کارگر انتقال دهید. برای ارسال داده‌ها از یک وب‌کارگر به رشته اصلی، یک رویداد 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);
});

توجه: برای کارهای اساسی، استفاده مستقیم از خط لوله پیام کارگر وب احتمالاً خوب است. با این حال، اگر به دنبال راهی برای ساده‌سازی این کار هستید، زمانی که همه چیز پیچیده‌تر می‌شود، انتزاعی مانند Comlink می‌تواند بسیار مفید باشد.

خط لوله پیام کارگر وب نوعی دریچه فرار از زمینه وب کارگر است. با استفاده از آن، می‌توانید داده‌هایی را از وب‌کارگر به window ارسال کنید که می‌توانید از آن برای به‌روزرسانی DOM استفاده کنید، یا کارهای دیگری را که باید روی رشته اصلی انجام شود، انجام دهید.

دانش خود را آزمایش کنید

یک وب کارگر روی چه رشته ای اجرا می کند؟

موضوع اصلی.

دوباره امتحان کنید.

رشته خودش (همچنین به عنوان موضوع وب کارگر شناخته می شود).

درسته!

رشته GPU.

دوباره امتحان کنید.

یک کارمند وب به چه چیزی می تواند دسترسی داشته باشد؟

ابتدایی های جاوا اسکریپت، مانند آرایه ها و اشیاء.

درسته!

یک زیرمجموعه سختگیرانه از APIهای موجود در زمینه window ، از جمله fetch .

درسته!

زمینه window ، اما فقط به صورت غیر مستقیم.

درسته!

چگونه یک کارمند وب می تواند به زمینه «پنجره» دسترسی پیدا کند؟

مستقیماً با ارجاع اعضای شی window .

دوباره امتحان کنید.

یک کارمند وب به هیچ وجه نمی تواند به window دسترسی داشته باشد.

دوباره امتحان کنید.

از طریق یک خط لوله پیام رسانی که توسط روش postMessage در زمینه وب کارگر ( self ) تسهیل می شود.

درسته!

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

در ماژول بعدی ، یک مورد استفاده از وب کارگر بتن مفصل و نشان داده شده است. در آن ماژول، یک وب‌کار برای واکشی یک فایل JPEG از یک URL مشخص و خواندن فراداده Exif آن در یک وب‌کار استفاده می‌شود. سپس آن داده ها به رشته اصلی ارسال می شود تا به کاربر نمایش داده شود.