شیوا توکل
شیوا توکل
خواندن ۲ دقیقه·۵ سال پیش

مرورگر چیست؟

مرورگر ها نرم افزارهایی هستند که کار قراردادن ،بازیابی و نمایش محتوا را انجام میدهند.
در مدل browser , client-server ها نقش client را ایفا میکنند، browser ها میتونن فایل های HTML و Application ها و javascript را تفسیر کنن و نمایش بدهند.

به طور ساده میتوان گفت مرورگر ها مجموعه ای از کدهای ساختاری است که در کنار هم یکسری وظایف را برای نمایش یک صفحه وب انجام می دهند.

در شکل زیر component های اصلی یک مرورگر را می بینید.

1.The User Interface

فضایی هست که در اون تعامل با Browser اتفاق میفته و شامل address bar و دکمه های back و next و home و ... میشه.

2.The Browser Engine

موتور مرورگر مانند یک پل میان UI و Rendering Engine میباشد و باتوجه به UI های مختلف در Rendering Engine دستکاری میکند.

3.The Rendering Engine

مسيولیت ارا‌‌يه صفحه وب درخواست شده را دارد. در مرورگر های مختلف از Rendering Engine های مختلف استفاده میشود.
Internet Explorer: Trident
Firefox & other Mozilla browsers: Gecko


Chrome & Opera 15+: Blink
Chrome (iPhone) & Safari: Webkit

جریان اصلی که Rendering Engine برای ارايه صفحه وب طی میکند به صورت زیر است:

برای تشریح و توضیح تصویر بالا نیاز داریم بدانیم DOM چیست ؟ document object model

در زمانی که یک صفحه وب بار گذاری میشود، مرورگر از آن صفحه یک مدل شی گرا یا DOM ایجاد میکند که یک ساختار درختی از اشیاء موجود در صفحه HTML است .
جاوااسکریپت بااستفاده از DOM یک صفحه داینامیک یا پویا ایجاد میکند.Rendering Engineشروع به تجزیه سند HTML میکند یعنی المنت های موجود در HTML را به node در DOM تبدیل میکند و content tree را میسازد . مانند تصویر پایین

سپس داده های موجود در فایل CSS را نیز تجزیه کرده و درختی دیگر بنام render tree ایجاد میکند .
مانند تصویر پایین


همچنین در تصویر پایین میبینید که چطور این دو درخت در نهایت ترکیب شده و صفحه نمایش داده میشود.


4.Networking

شبکه جنبه های ارتباطی و امنیتی را کنترل میکند و یک حافظه نهان بازیابی برای کاهش ترافیک شبکه ایجاد میکند.

5.Javascript interpreter

این مولفه کد جاوااسکریپت در یک وبسایت را تفسیر و اجرا میکند و نتایج بدست آمده را برای نمایش به Rendering Engine میفرستد.

6.UI backend

7.Data Persistence/storage

مرورگرها از مکانیسم های ذخیره سازی پشتیبانی میکنند مانند:
local storage
IndexedDB
webSQL
fileSystem
این ها مانند یک دیتابیس کوچک هستند که در درایومحلی کامپیوتری که مرورگر درآن نصب شده است ایجاد میشوند و داده هایی مانند حافظه نهان ، کوکی ها و بوکمارک ها را مدیریت میکنند.


اگر این مقاله برای شما مفید بود در انتشار آن کوتاهی نکنید.
شیوا توکل | 15اسفند 98





dombrowsersrenderingenginecssjavascript
Front-End Developer
شاید از این پست‌ها خوشتان بیاید