آموزش Web Worker در html5

  • آپدیت شده در تاریخ

آموزش HTML - مقدمه

در جلسه قبلی آموزش HTML با کش کردن با HTML5 آشنا شدیم. در این بخش به Web Worker در html5 خواهیم پرداخت.

web worker یا کارگر وب, یک کد جاواسکریپت است که در پشت صحنه صفحه وب اجرا می شود.

 

Web Worker در html5 چیست

اگر سعی کرده باشید که یک تسک (task) متمرکز جاواسکریپت که زمانبر و نیاز به محاسبات سنگین باشد, صفحه وب شما قفل می کند و تا زمانی که کار مورد نظر به اتمام نرسیده باشد, وقفه ایجاد می شود.

به این دلیل که کد جاواسکریپت همیشه در پیش زمینه اجرا می شود.

HTML یک تکنولوژی جدید به نام Web Worker را معرفی کرده است که به طور مشخص برای انجام عملیات پشت زمینه و مستقل از دیگر اسکریپت های رابط کاربری, و بدون اثر گذاری روی عملکرد صفحه, طراحی شده است.

نکته: Web Worker در html5 در تمام مرورگرهای مدرن مثل فایرفاکس, اپرا, سافاری و اینترنت اکسپلورر ۱۰+ پشتیبانی می شود.

ساخت یک فایل Web Worker

ساده ترین راه استفاده از Web Worker در html5 انجام محسبات زمان بر است. بنابراین قصد داریم یک تسک جاوااسکریپت ساده که از ۰ تا ۱۰۰هزار را می شمارد بسازیم.

بنابراین یک فایل جاواسکریپت به نام worker.js را با محتویات کد زیر ایجاد می کنیم:

نکته: متد postMessage() برای ارسال پیام (مثلا اعداد مثال بالا) به صفحه وب از فایل Web Worker استفاده کردیم.

 

اجرای کد در پشت صحنه با Web Worker در html5

حالا که فایل کارگر وب خود را داریم. در این بخش Web Worker را از سند html برای اجرای کدهای داخل فایل worker.js در پشت صحنه مقدار دهی کنیم و در حین اجرا نتیجه را در صفحه وب نمایش بدیم.

توضیح کد بالا:

دستور var worker = new Worker("worker.js"); یک آبجکت جدید کارگر وب ایجاد می کند که با کدهای داخل worker.js در ارتباط است.

زمانه که worker یک پیام را ارسال می کند, هندلر رویداد onmessage به کد اجازه دریافت پیام از web worker را می دهد.

المان event.data شامل پیام ارسال شده از سمت web worker است.

نکته: کدی که woker اجرا می کند همیشه در یک فایل جداگانه جاواسکریپت ذخیره می شود.

این کار از اینکه توسعه دهنده وب سعی در نوشتن کد web worker برای استفاده از متغییرهای سراسری یا دسترسی مستقیم به المان های صفحه داشته باشد, جلوگیری می کند.

 

پایان دادن به web worker در html5

ار انجایی که نحوه ساخت یک worker و دریافت پیام ها را یاد گرفتید, شما می توانید اجرای worker را در حین محاسبات خاتمه بدید.

مثال زیر به شما نحوه شروع و پایان worker در یک صفحه وب از طریق کلیک روی دکمه ها را نشان می دهد.

از همان فایل جاواسکریپت worker.js برای شمارش ۰ تا ۱۰۰ هزار استفاده کردیم.

نکته: از web worker در html5 فقط برای عملیات سنگین جاواسکریپت استفاده کنید. برای مثال پاسخ به کلیک ها یا دیگر تعامل های اسکریپت با کاربر.

به هیچ وجه پیشنهاد نمی شود از web worker در html5 برای عملیات ساده محاسباتی جاوااسکریپت بهره ببرید.

 

امیدوارم در این بخش آموزش HTML , از Web Worker در html5 نهایت استفاده را برده باشید.

در بخش بعدی با SSE در HTML آشنا می شویم.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم

آموزش های رایگان بیشتر در اینستاگرام ما ...

NETPARADIS /
مطالب زیر را حتما بخوانید
دیدگاه کاربران

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

    دوره های آموزشی

    می خواهید صفر تا صد HTML,CSS را یاد بگیرید ؟

    50% تخفیف ویژه
    فقط 144 هزار تومان

    برای دریافت آموزش طراحی سایت با پروژه قالب فروشگاه روی دکمه زیر بزنید
    می خواهم طراحی سایت را یاد بگیرم
    close-link