اجرای اسکریپت در پس زمینه

اجرای اسکریپت در پس زمینه

در زمان اجرای برخی اسکریپت ها در صفحات  ، ممکن است صفحه در اصطلاح هنگ کرده و به کلیک ها و درخواست های کاربر تا زمانی که اجرای آن اسکریپت تمام شود ،  پاسخ ندهد . این مسئله بیشتر اوقات دردسر ساز شده و حتی باعث کرک شدن . خروج اجباری مرورگر از صفحه وبسته شدن آن می شود . در HTML5 برای حل این مشکل راه حلی به نام متد Web Worker پیشبینی شده است .

 Web Worker باعث می شود تا اسکریپت ها بدون توجه به سایر اسکریپت های صفحه در پشت پرده اجرا شده و بر روی کارایی و عملکرد صفحه تاثیری نداشته باشند . با استفاده از این متد می توان در حین اجرای اسکریپت ها ، به صورت عادی به کار با صفحه پرداخته و به کلیک کردن و انچام سایر امور مورد نظر خود بپردازید .
در این بخش نحوه استفاده از این تکنیک جدید را در عمل نمایش خواهیم داد .

اجرای اسکریپت در پس زمینه اجرای اسکریپت در پس زمینه اجرای اسکریپت در پس زمینه Fields script in the html5

اجرای اسکریپت در پس زمینه

web worker چیست؟

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

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

پشتیبانی مرورگرها:

مرورگرهای Internet Explorer 10, Firefox, Opera, Chrome, Safari متد Web Worker را پشتیبانی می کنند.

مرحله اول : چک کردن اینکه مرورگر از Web Worker پشتیبانی می کند یا خیر ؟

در مرحله اول باید چک کرد که آیا مرورگر ما از متد Web Worker پشتیبانی می کند یا خیر ، تا متناسب راه هر حالت ، کد لازم را تعیین کنیم .

کد زیر بررسی می کند آیا مرورگر در حال استفاده از متد web worker پشتیبانی می کند یا خیر  . تا در هر حالت کد مناسب آن اجرا شود :

مرحله دوم : یک فایل یک فایل Web Worker بسازیم .

در متد Web Worker کد های جاوا اسکریپت مورد نظرمان را در یک فایل خارجی و در بیرون از صفحه قرار می دهیم .
بنابراین در مرحله دوم اسکریپت مورد نظرمان که در این مثال بصورت زیر است ، را در فایل خارجی بنام  Example.js  قرار می دهیم . کد زیر یک کد ساده جاوا اسکریپت می باشد که عمل شمارش را انجام می دهد و فقط  به عنوان یک مثال مطرح شده است :

مهمترین نکته در کد زیر متد  ( ) Post Message است ، که مقدار خروجی تابع را بصورت یک پیام به صفحه ارسال می کند .

مرحله سوم : ایجاد یک شی Web Worker .

اکنون که فایل خارجی اسکریپت را در اختیار داریم باید به وسیله ای آن را از صفحه HTML فراخوانی کنیم . این کار بوسیله یک شی Web Worker انجام می شود . کد زیر ابتدا چک می کند که آیا یک شی Web Worker وجود دارد یا خیر . سپس درصورتی که شی وجود نداشته باشد ،  یک نمونه جدید ساخته و فایل  Example.js را اجرا می کند . برنامه کد موجود در فایل را اجرا کرده و جواب (Message) را به صفحه برمی گرداند .

سپس بوسیله کد زیر می توان جواب برگشتی از فایل جاوا اسکریپت را در صفحه اعمال کرد . هنگامی که جواب از Web Worker برمی گردد تابع موجود در متد Event آن اجرا شود . اطلاعات برگشتی از Web در event.data آن نگهداری می شود .

 

مرحله آخر : توقف اجرای یک شی Web Worker .

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

استفاده از اسکریپت خارجی

در صورتیکه قصد دارید از یک اسکرپیت خارجی، در ورکر استفاده کنید، تابع importScripts برای اینکار ایجاد شده است:

 

که البته به طور خلاصه‌تری نیز می‌توان نوشت:

 

Inline Worker
اگر بخواهید در همان صفحه اصلی یک ورکر را ایجاد کنید و فایل جاوا اسکریپتی خارجی نداشته باشید، می‌توانید از inline worker استفاده کنید. در این روش باید یک نوع blob را ایجاد کنید:

 

کاری که متد حیرت انگیز createObjectURL انجام می‌دهد این است که از داده‌های ذخیره شده در یک blob یا نوع فایل، یک آدرس ارجاعی شبیه آدرس زیر را ایجاد می‌کند:

 

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

 

مرورگر کروم با دستور زیر به شما اجازه می‌دهد همه آدرس‌های blob‌ها را ببینید:

مثال کاملی از Web Worker :
 
Web Worker و DOM
از آنجايي که Web Workerها در فايل هاي خارجي تعريف مي شوند، اشياء JavaScript زير نمي توانند به آن دسترسي داشته باشند:
شيء window
شيء document
شيء parent
 
 
آموزش HTML آموزش طراحی وب

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