مرورگرهای وب چطور کار میکنن؟
مرورگر وب یک نرمافزار پیچیدهست که وظیفه اصلیش دریافت اطلاعات از وب سرورها و نمایش اونها روی صفحه کامپیوتر یا موبایل کاربره. این پروسه خیلی پیچیدهتر از چیزیه که به نظر میرسه.
وقتی یک URL رو وارد میکنی، مرورگر اول باید IP سرور رو پیدا کنه. برای این کار از DNS استفاده میکنه که مثل یک دفترچه تلفن میمونه و آدرسهای وب رو به IP تبدیل میکنه. مثلاً وقتی example.com رو مینویسی، مرورگر از DNS میپرسه که IP این دامنه چنده.
بعد از پیدا کردن IP، مرورگر یک درخواست HTTP یا HTTPS به سرور میفرسته. این درخواست شامل اطلاعات مختلفی مثل نوع مرورگر، سیستمعامل و هدرهای دیگه هستش. اگه از HTTPS استفاده بشه، یک لایه امنیتی SSL/TLS هم اضافه میشه که اطلاعات رو رمزنگاری میکنه.
سرور جواب میده و فایلهای HTML، CSS و JavaScript رو میفرسته. حالا مرورگر باید این فایلها رو پردازش کنه. اول HTML رو میخونه و یک DOM Tree میسازه. DOM Tree در واقع ساختار صفحه رو نشون میده. همزمان CSS رو هم پردازش میکنه و CSSOM میسازه که استایلهای صفحه رو مشخص میکنه.
موتور رندر مرورگر (مثلاً Blink در کروم یا Gecko در فایرفاکس) DOM و CSSOM رو با هم ترکیب میکنه و Render Tree میسازه. Render Tree فقط المانهایی رو شامل میشه که باید نمایش داده بشن. مثلاً المانهای
display: none
توش نیستن.بعد از ساخت Render Tree، مرورگر Layout رو انجام میده که مشخص میکنه هر المان کجای صفحه قرار بگیره و چقدر فضا اشغال کنه. آخرین مرحله هم Paint هستش که المانها رو روی صفحه میکشه.
JavaScript هم توی این بین اجرا میشه و میتونه DOM رو تغییر بده. موتور JavaScript (مثل V8 در کروم) کد رو اجرا میکنه و تغییرات رو اعمال میکنه. هر تغییری در DOM ممکنه باعث بشه مرورگر دوباره Layout و Paint رو انجام بده که به این فرآیند Reflow میگن.
مرورگرها برای سریعتر کار کردن از تکنیکهای مختلفی استفاده میکنن. مثلاً کروم برای هر تب یک پراسس جدا میسازه تا اگه یک تب کرش کرد، بقیه تبها کار کنن. همچنین از GPU برای شتابدهی گرافیکی استفاده میکنن و فایلهای استاتیک رو توی کش ذخیره میکنن تا سریعتر لود بشن.
آخرین بخش مهم، وب APIs هستن که به جاوااسکریپت اجازه میدن با سیستمعامل و دستگاه تعامل داشته باشه. مثلاً WebRTC برای تماس تصویری، WebGL برای گرافیک ۳ بعدی و WebAssembly برای اجرای کد با سرعت بالا استفاده میشن.
#علوم_کامپیوتر #نوشته #شبکه
~> @PinkOrca