توضیحات داخلی مرورگر وب – انجمن DEV

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

قبل از اینکه عمیقاً به آن بپردازیم، اجازه دهید ابتدا به این سؤال بدیهی بپردازیم: مرورگر وب دقیقاً چیست؟

مرورگر وب چیست؟

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

از نظر فنی، مرورگر یک کامپایلر و رندر است که منابع متن خام مانند HTML، CSS و JS را می گیرد و آنها را به نمایش های بصری روی صفحه تبدیل می کند.

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

اجزای مرورگر وب

یک مرورگر وب از اجزای متعددی تشکیل شده است مانند:

1. رابط کاربری: این بخش رابط کاربری گرافیکی (GUI) مرورگر است که کاربر می تواند آن را ببیند و با آن تعامل داشته باشد. به عنوان مثال، در مرورگر کروم، این شامل پنجره باز با نوار آدرس، نشانک‌ها، میانبرها و ویژگی‌های رابط کاربری مشابه است که کاربر می‌تواند ببیند و با آن تعامل داشته باشد.
2. موتور مرورگر: این قسمت به عنوان پل بین رابط کاربری (UI) و موتور رندر عمل می کند.
3. موتور رندر: این هسته اصلی مرورگر است. اسنادی مانند HTML و CSS را به درخت های مربوطه خود (DOM و CSSOM) تبدیل می کند که برای نمایش محتوا در صفحه وب استفاده می شود. به عبارت دیگر، کد را به پیکسل تبدیل می کند. موتورهای رندر زیادی مانند Blink، Gecko و Webkit وجود دارد.
4. شبکه سازی: این جزء برای انجام عملیات شبکه مانند وضوح DNS و واکشی منابعی مانند HTML، CSS و تصاویر از سرورها بسیار مفید است.
5. مترجم JS: این مؤلفه کد جاوا اسکریپت را در وب سایت ما اجرا می کند. همچنین به عنوان موتور جاوا اسکریپت شناخته می شود که کد جاوا اسکریپت را تجزیه و اجرا می کند. موتورهای مدرن همچنین از کامپایل JIT (Just In Time) برای سرعت بخشیدن به این فرآیند استفاده می کنند. موتورهای جاوا اسکریپت محبوب بسیاری مانند V8، SpiderMonkey و WebKit وجود دارد.
6. UI Backend: این کامپوننت با سیستم عامل تعامل دارد و امکان نمایش اجزای رابط کاربری مانند پنجره ها و دکمه های موجود در رابط مرورگر را به کاربران می دهد.
7. ماندگاری دیسک: این لایه به مرورگر اجازه می دهد تا داده ها را با اجازه سیستم عامل از حافظه سیستم ذخیره و بازیابی کند. این شامل گزینه های ذخیره سازی مانند Cookies، LocalStorage و SessionStorage می شود.

چگونه یک صفحه وب ارائه می شود؟

حالا بیایید به پشت صحنه برویم، در مورد اینکه وقتی یک URL را وارد می کنید و به یک وب سایت در مرورگر دسترسی پیدا می کنید چه اتفاقی می افتد.

1. هنگامی که URL را در مرورگر تایپ می کنید (به عنوان مثال، thatsmanmeet.com)، لایه شبکه وضوح DNS را کنترل می کند و درخواستی را به سرور ارسال می کند. منابعی مانند HTML، CSS و عناصر دیگر مانند تصاویر و فونت ها را بازیابی می کند.

2. هنگامی که HTML و CSS واکشی شدند، این اسناد به مربوطه ارسال می شوند تجزیه کننده ها. تجزیه کننده متن خام موجود در این فایل ها را به Object Model های مربوطه تبدیل می کند.

   1. برای HTML، متن خام مانند

      Hello

      به توکن ها شکسته می شود و به اشیایی به نام Nodes تبدیل می شود. الف گره یک عنصر یا مؤلفه واحد در صفحه وب است که یک عنصر HTML را نشان می دهد. این گره ها در ساختاری درخت مانند به نام the مرتب شده اند مدل شیء سند (DOM).

   2. برای CSS، فایل متنی خام نیز به توکن ها تقسیم می شود و سپس به ساختار درخت مانند دیگری که به نام مدل شیء CSS (CSSOM). این درخت تمام سبک های مرتبط با گره های DOM را نشان می دهد. این مرحله مهم است زیرا مرورگر باید تصمیم بگیرد که کدام قانون در بین پیش فرض مرورگر، شیوه نامه های تعریف شده توسط کاربر یا سبک های درون خطی اولویت دارد.

3. یک بار هر دو DOM و CSSOM درختان ساخته می شوند، آنها در یک ساختار واحد به نام ترکیب می شوند درخت رندر. این فرآیند در موتور Gecko به عنوان ساخت قاب نیز شناخته می شود. این ساختار فقط شامل عناصری است که در صفحه وب قابل مشاهده خواهند بود. بنابراین، Render Tree تعیین می کند که کدام عناصر در صفحه وب نمایش داده شوند.

   1. عناصر با display:none ویژگی CSS در DOM وجود دارد اما در درخت Render وجود ندارد.
   2. عناصر با visibility: hidden هر دو در DOM و Render Tree وجود دارند، اما فضای خالی را اشغال می کنند.
   3. متا تگ ها مانند , ،