طراحی سایت, ساخت ربات تلگرام, آموزش php , سورس کد php ,سورس ربات تلگرام , سورس فروشگاه اینترنتی , آموزش طراحی وب

آموزش 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 در پشت صحنه مقدار دهی کنیم و در حین اجرا نتیجه را در صفحه وب نمایش بدیم.

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

حتما بخوانید  آموزش HTML - تگ های فرمت دهی متن

دستور 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 فقط برای عملیات سنگین جاواسکریپت استفاده کنید. برای مثال پاسخ به کلیک ها یا دیگر تعامل های اسکریپت با کاربر.

حتما بخوانید  آموزش HTML - شروع کدنویسی

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

 

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

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

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

موفق باشید.

اگر مفید بود, لطفا به اشترک بگذارید تا دوستان دیگر نیز بهره ببرند

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

دیدگاه کاربران

دیدگاهتان را بنویسید

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

دانلود رایگان (هدیه ویژه)

کتاب آموزش زبان برنامه نویسی PHP را دانلود و همین امروز یادگیری را شروع کن و به جمع برنامه نویسان ملحق شو ;)

دانلود رایگان کتاب

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

نظر کاربران عزیز

آموزش های آنلاین در چه زمینه ای تهیه کنیم ؟

  • آموزش جاوااسکریپت و جی کوئری (45%, 10)
  • آموزش ساخت ربات تلگرام (45%, 10)
  • آموزش بوت استرپ 4 (9%, 2)

تعداد رای ها : 22

Loading ... Loading ...

بخش کاربران

هنوز عضو نیستید ؟ کلیک کنید

مجوزهای ما


logo-samandehi نماد اعتماد الکترونیک

دانلود کتاب

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