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

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

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

📍 وقتی جاوا اسکریپت را اجرا می کنید چه اتفاقی می افتد؟

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

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

به عنوان مثال، کروم از موتور V8 استفاده می کند، فایرفاکس دارای SpiderMonkey است و سافاری از JavaScriptCore استفاده می کند.

1. تجزیه

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

تجزیه شامل تجزیه کد به اجزای کوچکتر به نام توکن و ساختن یک ساختار داده به نام درخت نحو انتزاعی (AST) است.

• توکن ها: اینها تکه های کوچکی از کد هستند، مانند کلمات کلیدی (let، function، نام متغیرها، عملگرها (+، =)، و بیشتر.

• درخت نحوی چکیده (AST): این یک ساختار درخت مانند است که جریان منطقی کد شما را نشان می دهد. کار با این ساختار برای موتور آسانتر از متن خام است.

به عنوان مثال، اگر کد شما دارای یک اشتباه تایپی است، مانند cons log ('Hello') به جای console.log('Hello')، تجزیه کننده یک خطای نحوی ایجاد می کند و اجرا را متوقف می کند.

چرا تجزیه مهم است:

بدون تجزیه، مرورگر نمی داند چگونه کد شما را تفسیر کند. این مانند تلاش برای خواندن یک کتاب با هذیان است – ممکن است گیر بیفتید.

2. تالیف

هنگامی که کد تجزیه می شود، موتور جاوا اسکریپت آن را در قالبی که رایانه قابل درک باشد، کامپایل می کند. این فرآیند با نام Just-In-Time (JIT) Compilation شناخته می شود.

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

• تفسیر: کد در ابتدا به یک فرم میانی به نام بایت کد تبدیل می شود که نسبت به جاوا اسکریپت خام سریعتر اجرا می شود.

• بهینه سازی: همانطور که کد اجرا می شود، موتور قطعاتی که به طور مکرر اجرا می شوند (به نام “کد داغ”) شناسایی می شود و آنها را برای عملکرد بهتر بهینه می کند. این بهینه سازی در طول زمان اجرا اتفاق می افتد و اطمینان حاصل می کند که کد شما به طور موثر اجرا می شود.

نمونه ای از بهینه سازی:

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

3. اعدام

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

در طول اجرا، موتور جاوا اسکریپت از دو جزء اصلی استفاده می کند:

1- پشته تماس: این کار تماس های تابع را پیگیری می کند. هنگامی که یک تابع فراخوانی می شود، به پشته اضافه می شود. پس از تکمیل عملکرد، از پشته حذف می شود.

مثال: اگر تماس بگیرید functionA()و درون آن، functionB() نامیده می شود، پشته به شکل زیر است:

• بالا: functionB()
• پایین: functionA()

2- پشته: اینجا جایی است که اشیا و متغیرها در حافظه ذخیره می شوند. به عنوان مثال، اگر یک شی مانند ایجاد کنید let user = {name: 'John'}، در پشته ذخیره می شود.

4. جمع آوری زباله

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

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

چرا جمع آوری زباله مهم است:

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

5. حلقه رویداد

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

در اینجا نحوه کار آن آمده است:

1- Call Stack: رشته اصلی ابتدا کدهای همزمان را پردازش می کند.

2- API های وب: وظایف ناهمزمان (به عنوان مثال، setTimeout، fetch) به API های ارائه شده توسط مرورگر واگذار می شوند.

3- Task Queue: هنگامی که یک کار ناهمزمان کامل شد، به صف اضافه می شود.

4- حلقه رویداد: حلقه رویداد دائماً خالی بودن پشته تماس را بررسی می کند. اگر اینطور باشد، وظیفه بعدی را از صف انتخاب می کند و به پشته اضافه می کند.

مثالی از حلقه رویداد در عمل:

console.log('Start');
setTimeout(() => console.log('Timer Done'), 1000);
console.log('End');

خروجی:

Start
End
Timer Done

را setTimeout تابع موضوع اصلی را مسدود نمی کند. در عوض، به مرورگر اجازه می دهد تا زمانی که بقیه کد اجرا می شود، تایمر را کنترل کند.

قیاس واقعی زندگی✅

اجرای جاوا اسکریپت را به عنوان آماده کردن یک وعده غذایی در یک آشپزخانه شلوغ در نظر بگیرید:

1- تجزیه: خواندن دستور العمل برای اطمینان از واضح بودن و بدون خطا بودن آن.

2- تالیف: تهیه همه مواد و تنظیم ابزار.

3- اجرا: پختن غذا به صورت مرحله به مرحله.

4- جمع آوری زباله: تمیز کردن وسایل استفاده نشده برای ایجاد فضا برای کارهای جدید.

5- حلقه رویداد: مدیریت سفارشات و اطمینان از اینکه همه چیز به ترتیب صحیح ارائه می شود.

خوراکی های کلیدی ⚡

• اجرای جاوا اسکریپت شامل تجزیه، کامپایل، اجرا، پاکسازی و مدیریت وظایف است.

• موتورهای جاوا اسکریپت مدرن مانند V8 از کامپایل Just-In-Time برای سریعتر کردن کد استفاده می کنند.

• حلقه رویداد تضمین می کند که کارهای ناهمزمان رشته اصلی را مسدود نمی کند.

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

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

دفعه بعد که جاوا اسکریپت می نویسید، به سفر باورنکردنی کد شما از متن به عمل در مرورگر فکر کنید!

🌐 با من ارتباط برقرار کن:

📍 لینکدین
📍 ایکس (توئیتر)
📍 تلگرام
📍 اینستاگرام

کد نویسی مبارک!