شنبه ۳۱ شهريور ۱۴۰۳
Tut24 آموزش برنامه نویسی و مجله تخصصی فناوری ورود/عضویت

آموزش HTML - کارگزاران وب

HTML Web Workers API یک رابط برنامه‌نویسی است که به توسعه‌دهندگان وب اجازه می‌دهد تا اسکریپت‌ها را در پس‌زمینه اجرا کنند، جدا از رابط کاربر، به منظور بهبود عملکرد و پاسخ‌گویی برنامه‌های کاربردی وب. Web Workers پردازش همزمان وظایف را فعال می کند، به این معنی که وظایف طولانی مدت را می توان بدون مسدود کردن رابط کاربری یا سایر اسکریپت ها اجرا کرد.

Web Workers در یک محدوده مجزا از بخش اصلی کار می کنند و می توانند با استفاده از متد postMessage() و رویداد onmessage با صفحه اصلی ارتباط برقرار کنند.

در اینجا یک مثال ساده از نحوه استفاده از HTML Web Workers API آورده شده است:

<!DOCTYPE html>
<html>
<head>
	<title>مثال Web Worker</title>
	<script>
		// Create a new Web Worker and pass it a script to execute
		var worker = new Worker("worker.js");

		// Listen for messages from the Web Worker
		worker.onmessage = function(event) {
			// Display the result in the page
			document.getElementById("result").textContent = event.data;
		};

		// Start the Web Worker and send it a message
		worker.postMessage("Hello, Web Worker!");
	</script>
</head>
<body>
	<p id="result"></p>
</body>
</html>

این مثال یک Web Worker جدید را با استفاده از سازنده Worker ایجاد می‌کند و URL یک فایل اسکریپت جداگانه ("worker.js") را برای اجرا در پس‌زمینه ارسال می‌کند. سپس با استفاده از کنترل کننده رویداد onmessage به پیام های Web Worker گوش می دهد.

هنگامی که Web Worker با متد postMessage() و یک پیام به عنوان آرگومان شروع می شود، Web Worker پیام را در زمینه خود دریافت می کند و اسکریپت را اجرا می کند. در این مورد، اسکریپت به سادگی پیام را به رشته اصلی باز می گرداند، که محتوای پاراگراف "نتیجه" را با داده های برگشتی به روز می کند.

در اینجا نمونه ای از فایل اسکریپت ("worker.js") است که توسط Web Worker اجرا می شود:

// Listen for messages from the main thread
self.onmessage = function(event) {
	// Process the message
	var message = event.data;
	var result = "Web Worker says: " + message;

	// Send the result back to the main thread
	postMessage(result);
};

این اسکریپت با استفاده از کنترل کننده رویداد onmessage پیام ها را از رشته اصلی گوش می دهد، پیام را با الحاق آن به یک رشته پردازش می کند و نتیجه را با استفاده از متد postMessage() به رشته اصلی ارسال می کند.

توجه داشته باشید که Web Workers محدودیت‌هایی مانند دسترسی محدود به Document Object Model (DOM) و برخی APIهای جاوا اسکریپت دارند. آنها همچنین به تلاش بیشتری برای راه اندازی و مدیریت نیاز دارند، اما می توانند ابزار قدرتمندی برای بهینه سازی عملکرد و مقیاس پذیری برنامه های وب باشند.