آموزش طراحی سایتآموزش HTML

آشنایی با Web Worker ها در HTML

انجام عملیات در پس زمینه با Web Worker ها در HTML

منظور از web worker چیست؟ چگونه می‌توانیم از کارگردان های وب استفاده کنیم؟ کاربرد web worker ها در HTML چیست؟

کارگردان های وب یا Web worker ها

یک کارگردان وب یا Web Worker ، یک اسکریپت جاوا اسکریپت است که بدون تحت تاثیر قرار دادن کیفیت اجرای صفحه در پس زمینه اجرا می شود.

در این مقاله از فصل آشنایی با API ها با Web worker ها آشنا می‌شویم. پیشنهاد می‌کنم که مقاله مربوط به آشنایی با ذخیره سازی وب در HTML را نیز مطالعه کنید.

به طور کلی Web Wroker ها چه هستند؟

هنگامی که یک اسکریپت در صفحه html اجرا می شود، صفحه واکنش و پاسخگویی خود را تا زمان به پایان رسیدن اجرای اسکریپت از دست می‌دهد.

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

بررسی پشتیبانی از کارگردان های وب

قبل از ساخت یک کارگردان وب، باید پشتیبانی مرورگر کاربر بررسی شود:

if (typeof(Worker) !== "undefined") {
  // Yes! Web worker support!
  // Some code.....
} else {
  // Sorry! No Web Worker support..
}

ساخت یک کارگردان وب

حالا وقت ساخت یک کارگردان وب در یک فایل جاوا اسکریپت بیرونی است.

در اینجا، ما یک اسکریپت ایجاد می کنیم که شمارش می کند. این اسکریپت به نام “demo_worker.js”  نام گذاری می‌شود.

var i = 0;

function timedCount() {
  i = i + 1;
  postMessage(i);
  setTimeout("timedCount()",500);
}

timedCount();

قسمت مهم کد بالا، تابع postmessage است که برای ارسال یک پیام به صفحه html استفاده می‌شود.

نکته: معمولا کارگردان های وب برای چنین موارد ساده ای مورد استفاده قرار نمی‌گیرند، وظیفه این اسکریپت ها انجام فعالیت های متمرکز بر cpu است.

ساخت یک آبجکت Worker

حالا ما یک فایل کارگردان وب داریم، باید آن را در صفحه وب فراخوانی کنیم.

خط های زیر بررسی می کند اگر کارگردان از قبل وجود ندارد آن را بسازد و اجرا کند.

if (typeof(w) == "undefined") {
  w = new Worker("demo_workers.js");
}

پس از آن، ما می توانیم توسط کارگردان وب پیام دریافت و ارسال کنیم. برای این کار، یک رویداد onmessage به کارگردان وب اضافه می کنیم.

w.onmessage = function(event){
  document.getElementById("result").innerHTML = event.data;
};

هنگامی که کارگردان وب یک متن ارسال می کند، کد داخل رویداد اجرا می شود. داده های مربوط به کارگردان در event.data ذخیره شده اند.

متوقف کردن یک Web Worker

هنگامی که یک آبجکت کارگردان وب ساخت می شود، منتظر پیام های ورودی می ماند(حتی پس از اتمام اجرای اسکریپت بیرونی) بنابراین برای متوقف کردن آن باید از کد terminate استفاده شود.

برای متوقف کردن یک کارگردان وب و آزاد کردن منابع مرورگر و کامپیوتر باید از تابع terminate استفاده شود.

w.terminate();

استفاده مجدد Web Worker

اگر مقدار متغیر worker را برابر با undefined قرار دهید، پس از متوقف شدن کارگردان وب، می توانید با استفاده از کد زیر آن را دوباره استفاده کنید.

w = undefined;

یک مثال کامل از Web Worker

تا اینجا یک مثال از کد های اسکریپت بیرونی دیده ایم، در ادامه کد های مربوط به صفحه html را قرار می دهیم:

<!DOCTYPE html>
<html>
<body>

<p>Count numbers: <output id="result"></output></p>
<button onclick="startWorker()">Start Worker</button> 
<button onclick="stopWorker()">Stop Worker</button>

<script>
var w;

function startWorker() {
  if (typeof(Worker) !== "undefined") {
    if (typeof(w) == "undefined") {
      w = new Worker("demo_workers.js");
    }
    w.onmessage = function(event) {
      document.getElementById("result").innerHTML = event.data;
    };
  } else {
    document.getElementById("result").innerHTML = "Sorry! No Web Worker support.";
  }
}

function stopWorker() { 
  w.terminate();
  w = undefined;
}
</script>

</body>
</html>

ارتباط Web Worker و DOM

از آنجایی که کارگردان های وب اسکریپت های بیرونی هستند، به آبجکت های زیر دسترسی ندارند:

  • آبجکت پنجره
  • آبجکت سند
  • آبجکت والد

نتیجه گیری

در این مقاله از آموزش طراحی سایت با HTML تونستیم با  Web Worker ها آشنا بشیم. امیدوارم به خوبی باهاشون آشنا شده باشید. اگر سوال، پیشنهاد یا انتقادی داشتید لطفا آن را با من در میان بگذارید و من در سریع ترین زمان ممکن بهتون پاسخ میدم. تا مقاله بعدی فعلا…

برچسب ها

علی اسمعیلی

درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم...

نوشته های مشابه

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *


حداکثر حجم فایل برای آپلود: 1 MB.
فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ.
شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

دکمه بازگشت به بالا
سایت خود را در گوگل مدیریت کنید + ۱۵ ساعت فیلم آموزشیجزئیات بیشتر اینجا کلیک کنید
بستن
با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر