بسیاری از مطالب این دوره تاکنون بر مفاهیمی مانند ملاحظات کلی عملکرد 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);
});
خط لوله پیام کارگر وب نوعی دریچه فرار از زمینه وب کارگر است. با استفاده از آن، میتوانید دادههایی را از وبکارگر به window
ارسال کنید که میتوانید از آن برای بهروزرسانی DOM استفاده کنید، یا کارهای دیگری را که باید روی رشته اصلی انجام شود، انجام دهید.
دانش خود را آزمایش کنید
یک وب کارگر روی چه رشته ای اجرا می کند؟
یک کارمند وب به چه چیزی می تواند دسترسی داشته باشد؟
window
، اما فقط به صورت غیر مستقیم.window
، از جمله fetch
.چگونه یک کارمند وب می تواند به زمینه «پنجره» دسترسی پیدا کند؟
window
دسترسی داشته باشد.window
.postMessage
در زمینه وب کارگر ( self
) تسهیل می شود.مورد بعدی: یک مورد استفاده از وب کارگر بتن
در ماژول بعدی ، یک مورد استفاده از وب کارگر بتن مفصل و نشان داده شده است. در آن ماژول، یک وبکار برای واکشی یک فایل JPEG از یک URL مشخص و خواندن فراداده Exif آن در یک وبکار استفاده میشود. سپس آن داده ها به رشته اصلی ارسال می شود تا به کاربر نمایش داده شود.