جاوا اسکریپت چگونه کار می کند؟

هرچه محبوبیت جاوا اسکریپت بیشتر افزایش پیدا می کند، افراد بیشتری از این زبان برنامه نویسی در پروژه های خود در بسیاری از سطوح front-end, back-end استفاده می کنند. در این مقاله قصد داریم کمی در مورد بلاک های سازنده جاوا اسکریپت و نحوه هماهنگی آن ها با یکدیگر صحبت کنیم. اطلاع از این موضوعات، اطلاعات کافی برای چگونگی کارکرد جاوا اسکریپت را در اختیار شما قرار خواهد داد.(توصیه می شود دوره آموزشی طراحی سایت و پکیج آموزش طراحی سایت  را مشاهده کنید)

برا اساس نمودار githut، جاوا اسکریپت دارای بیشترین مخازن فعال و total pushes در github است. در سایر دسته بندی ها نیز نسبت به سایر زبان ها کاربرد کمتری ندارد.

اگر پروژه ای  به جاوا اسکریپت بسیار وابسته باشند، این به این معنی است که توسعه دهندگان باید درک عمیقی از زبان و اکوسیستم جاوا اسکریپت داشته باشند تا بتوانند با استفاده از ورودی ها نرم افزار شگفت انگیزی را ایجاد کنند. اما همانطور که می دانید، بسیاری از توسعه دهندگان هستند که به صورت روزانه از جاوا اسکریپت استفاده می کنند اما نمی دانند دقیقا چه اتفاقاتی برای انجام یک دستور رخ می دهد.

در این مقاله ما تمام جزئیات این مفاهیم را بررسی خواهیم کرد و توضیح خواهیم داد که جاوا اسکریپت در واقع چگونه اجرا می شود. با دانستن این جزئیات، شما قادر به نوشتن برنامه های بهتر و غیر بلوک هستید که به طور مناسب از API های ارائه شده استفاده می کنند.

موتور جاوا اسکریپت

یک نمونه محبوب از موتور جاوا اسکریپت، موتور V8 گوگل است. موتور V8 در مرورگر Chrome و Node.js به عنوان استفاده می شود. این موتور شامل دو جزء اصلی است:

Memory Heap: در این قسمت در واقع تخصیص حافظه اتفاق می افتد.

Call Stack: این جایی است که stack frame های شما به عنوان کد شما اجرا می شود.

Runtime

API های زیادی در مرورگر وجود دارد که توسط تقریبا هر توسعه دهنده ی جاوا اسکریپت از آن استفاده شده است (مثلا “setTimeout”). با این حال این API ها، توسط موتور ارائه نمی شود. خوب سوالی که ایجاد می شود این است که این API ها از کجا می آیند؟ به نظر می رسد که واقعیت کمی پیچیده تر است. به تصویر زیر دقت کنید:

همانطور که مشاهده می کنید، همه چیز در موتور ها خلاصه نمی شود. این API ها که توسط موتور ارائه نمی شود را به نام Web API ها می شناسیم که توسط مرورگرها ارائه می شوند. مانند DOM، AJAX، setTimeout و تعداد زیادی از وب APIهای دیگر که فقط توسط مرورگر ها ارائه شده اند.

Call Stack

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

Call Stack یک ساختار داده است که اساسا در جایی که برنامه ما قرار دارد ذخیره می شود. اگر یک تابع را ایجاد کنیم، در واقع آن را روی Stack قرار داده ایم. و اگر یک تابع را لغو کنیم ما اطلاعات روی Stack را از بین برده ایم. این کل کاری است که Stack ها انجام می دهند. برای مثال به کد های زیر نگاه کنید:

وقتی موتور شروع به اجرای این کد می کند، Call Stack خالی خواهد بود. بعدا مراحل زير را انجام خواهند داد:

هر ورودی در Call Stack یک Frame Stack نامیده می شود. این موضوع مشابه حالتی است که یک استثنا ارسال می شود. در واقع این حالت وضعیت یک Call Stack زمانی که استثنا اتفاق می افتد را نشان می دهد. به کد های زیر نگاه کنید:

اگر این در Chrome اجرا شود (فرض کنید که این کد در فایل foo.js است)، stack به شکل زیر خواهد شد:

پر شدن Stack

زمانی که شما به حداکثر اندازه Call Stack برسید اصطلاحا پر شدن Stack اتفاق افتاده است. این اتفاق بسیار ساده زیاد رخ می دهد به خصوص اگر شما از کد بازگشتی بدون تست کردن کد خود استفاده کنید. به این کد نمونه نگاه کنید:

وقتی موتور شروع به اجرای این کد می کند، شروع به فراخوانی تابع “foo” می کند. این تابع، بازگشتی است و شروع به خواندن خود بدون هیچ گونه شرایط خاتمه ای می کند. بنابراین در هر مرحله از اجرا، همان تابع به Call Stack اضافه می شود. اتفاقی که می افتد به نظر می رسد چیزی شبیه به تصویر زیر باشد:

با این حال، در برخی موارد، تعداد تماس های عملکردی در ستون تماس (Call Stack) از میزان واقعی ستون تماس فراتر می رود و مرورگر تصمیم می گیرد اقداماتی را با نشان دادن یک خطا انجام دهد که می تواند چیزی شبیه به تصویر زیر باشد:

معایب برنامه های خطی

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

زمانی که شما بخواهید یک کار نسبتا پیچیده مانند تبدیل عکس پیچیده را توسط جاوا اسکرپیت در مرورگر انجام دهید ممکن است مدت زمان طولانی را منتظر بمانید. مشکل در واقع اینجاست که زمانی که جاوا اسکریپت در حال انجام عملکرد است مرورگر هیچ کار دیگری انجام نمی دهد بلاک می شود. به معنی آن است که مرورگر نمیتواند رندر کند، نمیتواند کد دیگری را اجرا کند، فقط گیر کرده است. البته برای حل این گونه مشکلات نیز راه حال های زیادی وجود دارد و جای نگرانی زیادی نیست.

منبع : طراحی سایت