مرورگرها چگونه کار می کنند؟

مرورگرهامرورگر وب چیه؟نرم افزاری که شما با استفاده از آن می توانید وارد دنیای وب بشوید و بین صفحات وب مورد علاقه خود گشت و گذار کنید. بدون استفاده از مرورگرها استفاده از صفحات وب ممکن نیست همین حالا که این مطلب رو مطالعه میکنید با استفاده از مرورگر به دنیای وب وارد شدید. آن چه در جلوی خود می بینید آدرس بار ، دکمه ها و . . . شامل رابط کاربری مرورگر می باشند. انواع مختلفی از مرورگرها وجود دارند اما نحوه کارکرد آن ها تقریبا یکسان است در این مطلب وارد قلب مرورگرها میشویم و برای شما توضیح میدهیم مرورگرها به چه صورت کار میکنند و از چه اجزایی تشکیل شدند.قبل از اینکه به صورت جزئی تر وارد نحوه کارکرد و اجزای مرورگر ها شویم یک توضیح کلی در مورد نحوه کارکرد مرورگر میدهیم تا در ادامه راحت تر بتوانید اجزای آن را درک کنیدبه تصویر زیر توجه کنیددرخواست و پاسخزمانی که ما نام وب سایتی را درون آدرس بار مرورگر خود وارد میکنیم یکسری رخداد توسط مرورگر در کسری از ثانیه انجام می گیرد که از چشم ما پنهان است تا صفحه وب را به ما نمایش دهد.در واقع توسط مرورگر ما درخواستی (Request) به سمت سرور برای دریافت اطلاعاتی که مرورگر برای نمایش صفحه وب نیاز دارد ارسال می شود.سرور درخواست مرورگر را دریافت کرده پردازش می کند و به عنوان پاسخ به درخواست مرورگر (Response)اسنادی که برای نمایش صفحه وب نیاز است مانند HTML و CSS را برای مرورگر ارسال می کند.اجزای تشکیل دهنده مرورگر وباجزای مرورگرUser InterfaceRendering EngineBrowser EngineData Storage1 . رابط کاربری User Interfaceرابط کاربری مرورگررابط کاربری مرورگر همونطور که از اسمش مشخص هست تعریف شده برای تعامل با کاربر چیزی که الان در همین صفحه جلوی خود می بینید مانند دکمه برگشت ، رفرش ، پنجره جستجو و . . . برای مثال زمانی که کاربر بر روی دکمه ای کلیک می کند این فرمان از طریق رابط کاربری برای موتور مرورگر ارسال می شود.رابط کاربری از پیش توسط شرکت سازنده مرورگر تعریف شده و ما نمی توانیم در کلیت آن تغییری ایجاد کنیم اما در بعضی از مرورگر ها امکاناتی برای تغییر تم و رنگ مرورگر تعریف شده تا کاربر با سلیقه ظاهر مرورگر را شخصی سازی کند.2 . موتور رندر Rendering Engineموتور رندر مرورگرهاموتور رندر (Rendering Engine) را همانند یک نقاش با بوم خالی در نظر بگیرید که اسناد را از سرور دریافت کرده و آن ها را تفسیر میکند و در صفحه مرورگر به نمایش در می آورد.مرورگرهای مختلف دارای موتورهای رندر متفاوتی هستند که در تصویر بالا نشان داده شده همین مورد گاهی اوقات باعث ناهماهنگی در نمایش یک صفحه وب در یک مرورگر با مرورگر دیگر می شود نحوه تفسیر مرورگرها ممکن است متفاوت باشد.در ادامه به تشریح اجزای تشکیل دهنده موتور رندر می پردازیم.شبکه Networkingشبکه جزئی از موتور رندر می باشد که وظیفه دارد ارتباطات و امنیت اینترنتی را تامین کند و اطلاعات مانند تصاویر و المان هایی که صفحه وب ما را می سازد از سرور دریافت کند.بک اند رابط کاربری UI Backendوظیفه تحلیل و تفسیر بک اند رابط کاربری را بر عهده دارد حتی بک اند رابط کاربری مرورگر هم توسط همین قسمت بررسی می شود.به ترسیم ویجت‌های اساسی مانند یک جعبه انتخاب، یک کادر ورودی، یک پنجره، یک چک باکس و غیره کمک می‌کند.مفسر جاوا اسکریپت JavaScript Interpreterمفسر جاوا اسکریپتزمانی که اسناد جاوا اسکریپت توسط مرورگر دریافت می شود مرورگر هیچ ایده ندارد که چگونه آن را باید تفسیر کند مانند این است از کسی که زبان فارسی را بلد نیست انتظار داشته باشید صحبت شما رو گوش کند.پس اینجا نیاز به یک مترجم داریم مفسرهای جاوا اسکریپت همین کار انجام می دهند اسناد جاوا اسکریپت را برای مرورگر قابل فهم و درک می کنند مرورگر های متفاوت از مفسر های متفاوتی استفاده می کنند.Chrome : V8Firefox : Spider MonkeyMicrosoft Edge : Chakra نحوه رندر شدن یک صفحه وبدرخت رندرموتور رندر سند HTML و CSS را از طریق بخش شبکه (Networking) دریافت می کند.1 . در ابتدا موتور رندر سند HTML را خوانده و سپس از محتوای آن یک درخت (Document Object Model) DOM همان طور که در تصویر بالا می بینید رسم می کند که این درخت متشکل از نود ها (DOM Nodes) می باشدنود ها می توانند تصاویر ، متن ها ، لیست ها یا هر المنت دیگری باشند.2 . سپس موتور رندر سند CSS را خوانده که مربوط به جلوه های بصری می باشد و درخت دیگری (CSSOM) برای آن رسم می کند.3 . حالا با ترکیب دو درختی که در بالا تشکیل شده درخت دیگری به نام درخت رندر (Render Tree) تشکیل می شود.4 . از طریق فرآیند طرح بندی (Layout) هر نود با توجه به مختصات روی صفحه قرار می گیرد.5 . هر نود را توسط قسمت بک اند رابط کاربری (UI Backend) درون صفحه وب ترسیم (Paint) می کند.3 . موتور مرورگر Browser Engineموتور مرورگردر واقع موتور مرورگر رابطی بین موتور رندر (Render Engine) و رابط کاربری(User Interface)و همچنین رابطی بین موتور رندر و ارتباطات خارجی با سرور می باشد.موتور مرورگر ، موتور رندر را بر اساس ورودی های رابط های کاربری مختلف مدیریت و دستکاری می کند.4 . ذخیره سازی داده Data Storageذخیره سازی داده هااین بخش از مرورگر برای ذخیره سازی تمام داده ها مانند ذخیره سازی محلی (Local Storage) و کوکی ها (Cookies) و . . . استفاده می شودکوکی ها Cookiesکوکی‌ها چیزی بیشتر از یک فایل متنی که بر روی کامپیوتر یا موبایل شما ذخیره می‌شوند نیستند. این فایل توسط مرورگر خوانده می‌شود و در آن اطلاعاتی در باره‌ی وب‌سایت‌ مانند مشخصات ورود به سایت و تنظیمات سفارشی شده‌ی کاربر ذخیره می‌شود. در کوکی‌ها همچنین اطلاعات دیگری که وب‌سایت‌ها برای شناسایی کاربر و ارائه‌ی خدمات بهتر به آن نیاز دارد، قرار می‌گیرد. وقتی یک وب‌سایت را باز می‌کنید، درخواستی به مرورگر شما ارسال می‌شود تا فایل کوکی بر روی هارد دیسک ذخیره شود و از آن پس اطلاعات مورد نیاز وب‌سایت برای شناسایی کاربر و ارائه‌ی خدمات اختصاصی شروع می‌شود.ذخیره در لوکال استوریج Local storageهر مرورگری دو حافظه داره که بهشون Local Storage و Session Storage میگیم و میتونیم این ها رو با inspect گرفتن در قسمت Application ، مشاهده کنیم.تفاوت Local Storage و Session Storageهر دوی این ها حافظه ی مرورگر هستن اما یه تفاوتی دارند و اون هم این هست که اطلاعاتی که در Local Storage ذخیره می شوند حتی بعد از بسته شدن Tab و یا رفرش کردن صفحه باز هم اطلاعات درون اون باقی میمونند ؛ اما در Session Storage بعد از بستن صفحه اطلاعات داخلش هم پاک میشه.معرفی بهترین مرورگرهای وببهترین مرورگرهامرورگرهای مختلفی وجود دارند که هر کدام امکانات و نقاط ضعف و قوت مختص به خود را دارند.در میان برنامه نویسان و طراحان وب به دلیل ارائه افزونه های مختلف و کاربردی گوگل کروم از محبوبیت بالایی برخوردار است.همچنین با اختصاص دادن 63 درصد از کاربران جهانی به خود محبوب ترین مرورگر وب شناخته می شود.با این حال مرورگر کروم رقبای خوبی مانند فایرفاکس و سفاری و اپرا دارد.گوگل کروم Chromeکروم https://fa.wikipedia.org/wiki/%DA%AF%D9%88%DA%AF%D9%84_%DA%A9%D8%B1%D9%88%D9%85 فایرفاکس Firefoxفایرفاکس https://fa.wikipedia.org/wiki/%D9%81%D8%A7%DB%8C%D8%B1%D9%81%D8%A7%DA%A9%D8%B3 سفاری Safariسفاری https://fa.wikipedia.org/wiki/%D8%B3%D9%81%D8%A7%D8%B1%DB%8C_(%D9%85%D8%B1%D9%88%D8%B1%DA%AF%D8%B1_%D9%88%D8%A8) منابعGeek Burger Show Channel : مرورگر چگونه کار می کندOpen Canvas Channel : How Web Browsers Functionbrowsertouse.com : What is Web Bro