توی این پست دنبال پشت پرده ی مرورگرها هستیم! خیلیامون میدونیم مرورگر ها کد های HTML , CSS و JS رو اجرا میکنن و خیلیامون دنبال درک عمیقی از پشت پرده ی نحوه ی این اقدامات هستیم ، این نشون میده که الان جای درستی هستیم - حالا میخوایم بریم سراغ اینکه مرورگر ها چجوری کار میکنن و چه لایه هایی دارن!
میخوایم ببینیم browser engine هایی مثل Gecko , Blink , Webkit چی هستند ؟ چی کار میکنن ؟ چه فرقی با javaScript engine هایی مثل spiderMonkey , V8 و ... دارن
معمولا در مواجه با این سوال رایج ترین کج فهمی ای که وجود داره این هست که ذهن به سمت js engine های مرورگر ها که وظیفه interpret (تفسیر) کدهای جاوااسکریپتی رو دارن میره ! و همین اول بگم ما صرفا راجع به اون ها نمیخوایم صحبت بکنیم .
در واقع وظیفه browser engine ها (موتور های مرورگرها) render کردن صفحات وب هست .
و خب browser engine ها از بخش های مختلف کنار هم تشکیل میشن که به این وظیفه بپردازن . در ادامه به بررسی این بخش ها به صورت مختصر که حوصله سر بر نباشه میپردازیم :)
توی این بخش browser engine به تفسیر فایل های HTML و CSS میپردازه که خروجی اون یک آبجکت مختص به اون ها هست . بخوایم دقیق تر اشاره کنیم خروجی تفسیر HTML میشه یک Document Object Model (DOM) و خروجی تفسیر CSS میشه یک CSS Object Model (CSSOM) که ساختار درختی دارن - این ساختار درختی یک data model درونی خود browser هست که توی بخش های بعدی باهاش کار میکنه.
بعد از اینکه DOM و CSSOM ساخته شدن ، سه فاز زیر اتفاق میوفتن :
توی این فاز DOM و CSSOM ساخته شدن و تمام ! حالا browser engine به محاسبات لازم برای ایجاد ساختار صفحه میپردازه - مثلا اینکه هر element چقدر سایز داره و در چه جایگاهی از صفحه قرار میگیره .
این فاز در ادامه فاز قبل میاد - تا اینجا browser engine جایگاه المان ها و سایزشون رو پیدا کرده و حالا میره تا پیکسل های مورد نظر رو در جایگاه درست قرار بده . (ایده اسم painting برای اینه که عملا داره عکس ها و رنگ ها و نوشته هارو پیکسل به پیکسل نقاشی میکنه)
توی این فاز browser engine بررسی میکنه که اگر المان هامون یکجاهایی باهم overlap داشته باشن ، در نهایت لایه ها چجوری روی هم باید قرار بگیرن و چه خروجی ای به کاربر نشون داده بشه - پس وظیفه ی این فاز این هست که در صورت وجود overlap بین المان ها بیاد یک تصویر درست از اولویت قرار گرفتن لایه بندی به کاربر نشون بده
به طور کلی هر مرورگر علاوه بر browser engine یک js engine هم داره - مثلا توی مرورگر فایرفاکس Gecko browser engine رو در کنار spiderMonkey js engine داریم ! یا توی کروم Blink browser engine رو در کنار V8 js engine داریم .
به یاد میاریم که js engine ها وظیفشون تفسیر کد های جاوااسکریپتی و تبدیل اون ها به کد های قابل فهم برای ماشین و اجرای اون ها هست، برای رسیدن به این هدف js engine ها هم از چند جزء تشکیل شدن که در ادامه به اختصار بهشون میپردازیم :
توی این مرحله js engine کد های جاوا اسکریپتی مون رو به یک ساختار به نام abstract syntax tree (به اختصار AST) تبدیل میکنه .
خیلی خلاصه بخوایم به چیستی AST بپردازیم - یک درخت از ساختار کد هامون ایجاد میکنه ، شکلش رو پایین آوردم و دیدنش یک ایده خیلی خوب راجع به چیستیش بهتون میده
توی این مرحله js engine کد هارو به صورت مستقیم از AST اجرا میکنه
خب در واقع این یک تکنیک هست که توی زبان های برنامه نویسی دیگه هم استفاده میشه - اما به طور خلاصه میتونیم بگیم با تبدیل کردن کد های جاوااسکریپتی به کد ماشین یک بهینه سازی انجام میده که اجرا رو سریع تر میکنه .
اونایی که با زبون C کد زدن قطعا یادشونه که برای گرفتن حافظه و آزادسازی حافظه باید توابع مختص خودشون رو صدا میزدیم. توی زبان های سطح بالا - حذف کردن حافظه هایی که دیگه استفاده نمیشن توسط این بخش مدیریت میشن.
حالا js engine چجوری با browser engine کنار هم کار میکنن ؟
وقتی که browser engine به یک تگ `script` برسه ، کد های اون رو به جاوااسکریپت میده تا اجراشون کنه .
از طرفی js engine میتونه با browser engine در تعامل باشه برای کارهایی مثل ایجاد تغییر در DOM .
در این حالت js engine میاد browser engine رو وارد فاز repainting میکنه تا مجددا المان هارو در صفحه قرار بده.
به طور کلی پردازش تعاملات کاربر با صفحات وب هم بر عهده browser engine ها هستش!
تعاملاتی هم که ازش صحبت میکنیم چیز هایی مثل کلیک کردن، اسکرول کردن، فشردن یک دکمه روی کیبورد و ... هستش.
در صورتی که هرکدوم از این ایونت ها موجب تغییر در DOM یا CSSOM بشه (مثل مثالی که در بخش قبل زدیم) browser engine وظیفه repaint رو داره.
از دیگر وظایف browser engine ها مدیریت کانکشن های شبکه ای هستش . دانلود کردن فایل ها (مثل فایل های عکس , JS , CSS , HTML و ...) بر عهده ی این بخش از موتور مرورگر هست.
توی این لایه مکانیزم های کش کردن داده ها به صورت لوکالی برای افزایش سرعت هم تعبیه شده
یکی از کارهایی که مرورگر ها برای ایجاد امنیت انجام میدن ، ایجاد فضای ایزوله به ازای هر صفحه وب هست . مرورگرها با اختصاص دادن یک process به هر صفحه وب (هر تب) باعث میشن که به فکر این نیوفتیم که یک بد افزار بنویسیم که بخواد روی یک صفحه ی دیگه تاثیر منفی بزاره !
از دیگر کارهایی که یک browser engine انجام میده اعمال policy های امنیتی هستش . به عنوان مثال CSP که ازش اسم آوردیم میتونه مشخص کنه هر ریسورس از چه دامنه هایی اجازه دانلود رو داره ؟ مثلا میگیم فونت هارو فقط از same origin لود کن و یا تصاویر رو فقط از دامین خودمون لود کن . این جلوی حملاتی مثل XSS رو میگیره .
به پایان آمد این دفتر حکایت همچنان باقی :))
توی این نوشته هدفم این بود که به عنوان یک web developer یک نگاه متفاوت تر از اتفاقاتی که توی مرورگر میوفته داشته باشیم - قطعا جزییات خیلی خیلی بیشتر داره و اینجا خیلی ساده به موضوع و سیکل اتفاقات نگاه شده که اگر علاقمندین که بیشتر راجع بهش بدونین بهتون خوندن داکیومنت های مرورگرهارو پیشنهاد میکنم (البته که اگر web developer این احتمالا در همین حد آشنایی تا 98% کارمون رو راه بندازه:)
شاد و خندون باشین ❤
