طراحی سایت | برنامه نویسی

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

طراحی سایت | برنامه نویسی

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

‏ کار با وب ورکر ها در جاوا اسکریپت

پنجشنبه, ۱۳ تیر ۱۳۹۸، ۰۲:۵۷ ب.ظ

در سال ۲۰۱۹ اکوسیستم وب به نقطه ای ارتقا یافته است که مرورگرهای اینترنت به محیطی برای اجرای برنامه های جاوا اسکریپت تبدیل شده اند. این موضوع به دلیل پیشرفت های اخیر و انتشار هر روزه فریمورک های جدید میسر شده است. زمانی که در روزهای اولیه اینترنت جاوا اسکریپت معرفی شد، مسیر توسعه اینترنت اصلا روشن نبود.

nhsp9nj2hmu5

به خاطر تغییرات سریع و مداوم این صنعت نیاز به سازگاری مرورگرها با استانداردهای وب کاملاً احساس می شد. از این رو تکامل و ارتقاء زبان جاوا اسکریپت به روندی ثابت و ادامه‌دار تبدیل شد. امروزه دستگاه های تلفن همراه معمولی با پردازنده های ۸ هسته ای و گرافیک های قدرتمند کار می‌کنند.

پردازنده‌های کامپیوتر های دسکتاپ دارای ۱۶ هسته بوده و از ۳۲ نخ (thread) بهره می‌برند. در چنین محیطی کار کردن با زبانی (جاوا اسکریپت) که دارای یک thread است کاری دشوار و طاقت فرسا به نظر می رسد.

جاوا اسکریپت تک نخی (Single-threaded) است

مرورگر ها دارای موتور جاوا اسکریپتی هستند و این یعنی دارای یک thread برای اجرا بوده و به عبارتی ساده تر پردازش تابع B تا زمانی که تابع A پردازش نشود، انجام نخواهد شد. رابط کاربری یک صفحه وب مسئولیتی در قبال پردازش های دیگر جاوا اسکریپت ندارد با این حال باید منتظر اتمام این پردازش ها باشد.

این چیزی است که با DOM blocking شناخته می شود. این یعنی جاوا اسکریپت در مقایسه با بسیاری از زبان‌های دیگر کاملاً ناکارآمد است. اگر به JS Bin رفته و کد زیر را در کنسول جاوا اسکریپت مرورگر اجرا کنید :

//noprotect
i = 0;
while (i < 60000) {
  console.log("The number is " + i);
  i++;
}

همه وب سایت jsbin.com تا زمانی که کد بالا کاملاً اجرا شود، از دسترس شما خارج خواهد شد و نمی توانید با چیز دیگری در صفحه ارتباط برقرار کنید زیرا مرورگر مشغول پردازش است. کد بالا یک فرآیند محاسباتی ساده است، در حالی که امروز مرورگرها محاسبات بسیار پیچیده تری را در برنامه‌های وب انجام می رسانند. اما راه حل چیست؟

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

وب ورکر ها

W3C پیش نویس اولیه ای را از وب ورکر ها در سال ۲۰۰۹ منتشر کرد. وب ورکرها یک سیستم یا پروتکل غیر همزمان برای اجرای وظایف مورد نظر ما به صورت غیر همزمان در صفحات وب هستند. آنها کاملاً از thread اصلی و رابط کاربری صفحات وب مستقل هستند. آنها یک محیط ایزوله از اشیا window و document بوده که برای انجام کارهای طولانی مدت کاملاً مناسب هستند.

صرف نظر از وب ورکرها راه حل های دیگری هم برای رسیدن به پردازش موازی در جاوا اسکریپت وجود دارد. برای مثال استفاده از فراخوانی های Ajax و حتی حلقه‌ها.

برای توضیح این مسئله بگذارید به JS Bin بازگردیم و کد زیر را در آن اجرا کنیم :

console.log("A");
setTimeout(function(){console.log("B");},2000);
console.log("C");
setTimeout(function(){console.log("D");},0);
console.log("E");
setTimeout(function(){console.log("F");},1000);

وقتی کد بالا را اجرا می‌کنید ترتیب چاپ گزارش ما B ، F ، D ، E ، C ، A می‌شود. مرورگر ابتدا عملیات هایی که برای آنها timeout در نظر گرفته نشده است را اجرا می کند و سپس توابع ()setTimeout را به ترتیب تأخیری که در آنها مشخص شده است اجرا می کند. با این حال دستورات بالا همچنان با یک نخ اجرا می شوند.

وب ورکر ها و چند نخی (Multithreading)

منابع جاوا اسکریپت در موزیلا وب ورکر ها را به این صورت تعریف می‌کند : ابزاری برای اجرای اسکریپت ها در thread  های پس زمینه.

ما از وب ورکرها به روش زیر استفاده می کنیم : ابتدا در دسترس بودن سازنده جایگزین ()Worker را مرورگر بررسی می کنیم، اگر در دسترس باشد، شی ایی از وب ورکر به همراه آدرس اسکریپت مورد نظر نمونه‌سازی می‌کنیم. این  اسکریپت در یک thread جداگانه اجرا می‌شود. به دلایلی این اسکریپت باید مربوط به همان هاست یا دامنه باشد :

if (typeof(Worker) !== "undefined") {  
    worker = new Worker("worker.js");
}

اکنون کد خود را در فایل worker.js تعریف می کنیم :

i = 0;
while (i < 200000) {
    postMessage("Web Worker Counter: " + i);
    i++;
}

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

خلاصه

در این مقاله وب ورکرها را معرفی کردیم. تکنولوژی ایی که به شما کمک می‌کند اسکریپت های خود را در پس زمینه و خارج از نخ اصلی برنامه اجرا کنید. وب ورکر ها بسیاری از مسائل و مشکلاتی که قبلا با آنها در چالش بودیم را برای ما حل کرده است.

#وب ورکر ها
موافقین ۰ مخالفین ۰ ۹۸/۰۴/۱۳
شهربانو دوستی

نظرات  (۰)

هیچ نظری هنوز ثبت نشده است

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی