نرم افزاری که شما با استفاده از آن می توانید وارد دنیای وب بشوید و بین صفحات وب مورد علاقه خود گشت و گذار کنید. بدون استفاده از مرورگرها استفاده از صفحات وب ممکن نیست همین حالا که این مطلب رو مطالعه میکنید با استفاده از مرورگر به دنیای وب وارد شدید. آن چه در جلوی خود می بینید آدرس بار ، دکمه ها و . . . شامل رابط کاربری مرورگر می باشند. انواع مختلفی از مرورگرها وجود دارند اما نحوه کارکرد آن ها تقریبا یکسان است در این مطلب وارد قلب مرورگرها میشویم و برای شما توضیح میدهیم مرورگرها به چه صورت کار میکنند و از چه اجزایی تشکیل شدند.
قبل از اینکه به صورت جزئی تر وارد نحوه کارکرد و اجزای مرورگر ها شویم یک توضیح کلی در مورد نحوه کارکرد مرورگر میدهیم تا در ادامه راحت تر بتوانید اجزای آن را درک کنید
به تصویر زیر توجه کنید
زمانی که ما نام وب سایتی را درون آدرس بار مرورگر خود وارد میکنیم یکسری رخداد توسط مرورگر در کسری از ثانیه انجام می گیرد که از چشم ما پنهان است تا صفحه وب را به ما نمایش دهد.
در واقع توسط مرورگر ما درخواستی (Request) به سمت سرور برای دریافت اطلاعاتی که مرورگر برای نمایش صفحه وب نیاز دارد ارسال می شود.
سرور درخواست مرورگر را دریافت کرده پردازش می کند و به عنوان پاسخ به درخواست مرورگر (Response)
اسنادی که برای نمایش صفحه وب نیاز است مانند HTML و CSS را برای مرورگر ارسال می کند.
رابط کاربری مرورگر همونطور که از اسمش مشخص هست تعریف شده برای تعامل با کاربر چیزی که الان در همین صفحه جلوی خود می بینید مانند دکمه برگشت ، رفرش ، پنجره جستجو و . . . برای مثال زمانی که کاربر بر روی دکمه ای کلیک می کند این فرمان از طریق رابط کاربری برای موتور مرورگر ارسال می شود.
رابط کاربری از پیش توسط شرکت سازنده مرورگر تعریف شده و ما نمی توانیم در کلیت آن تغییری ایجاد کنیم اما در بعضی از مرورگر ها امکاناتی برای تغییر تم و رنگ مرورگر تعریف شده تا کاربر با سلیقه ظاهر مرورگر را شخصی سازی کند.
موتور رندر (Rendering Engine) را همانند یک نقاش با بوم خالی در نظر بگیرید که اسناد را از سرور دریافت کرده و آن ها را تفسیر میکند و در صفحه مرورگر به نمایش در می آورد.
مرورگرهای مختلف دارای موتورهای رندر متفاوتی هستند که در تصویر بالا نشان داده شده همین مورد گاهی اوقات باعث ناهماهنگی در نمایش یک صفحه وب در یک مرورگر با مرورگر دیگر می شود نحوه تفسیر مرورگرها ممکن است متفاوت باشد.
در ادامه به تشریح اجزای تشکیل دهنده موتور رندر می پردازیم.
شبکه Networking
شبکه جزئی از موتور رندر می باشد که وظیفه دارد ارتباطات و امنیت اینترنتی را تامین کند و
اطلاعات مانند تصاویر و المان هایی که صفحه وب ما را می سازد از سرور دریافت کند.
بک اند رابط کاربری UI Backend
وظیفه تحلیل و تفسیر بک اند رابط کاربری را بر عهده دارد حتی بک اند رابط کاربری مرورگر هم توسط همین قسمت بررسی می شود.
به ترسیم ویجت‌های اساسی مانند یک جعبه انتخاب، یک کادر ورودی، یک پنجره، یک چک باکس و غیره کمک میکند.
مفسر جاوا اسکریپت JavaScript Interpreter
زمانی که اسناد جاوا اسکریپت توسط مرورگر دریافت می شود مرورگر هیچ ایده ندارد که چگونه آن را باید تفسیر کند مانند این است از کسی که زبان فارسی را بلد نیست انتظار داشته باشید صحبت شما رو گوش کند.
پس اینجا نیاز به یک مترجم داریم مفسرهای جاوا اسکریپت همین کار انجام می دهند اسناد جاوا اسکریپت را برای مرورگر قابل فهم و درک می کنند مرورگر های متفاوت از مفسر های متفاوتی استفاده می کنند.
نحوه رندر شدن یک صفحه وب
موتور رندر سند HTML و CSS را از طریق بخش شبکه (Networking) دریافت می کند.
1 . در ابتدا موتور رندر سند HTML را خوانده و سپس از محتوای آن یک درخت (Document Object Model) DOM
همان طور که در تصویر بالا می بینید رسم می کند که این درخت متشکل از نود ها (DOM Nodes) می باشد
نود ها می توانند تصاویر ، متن ها ، لیست ها یا هر المنت دیگری باشند.
2 . سپس موتور رندر سند CSS را خوانده که مربوط به جلوه های بصری می باشد و درخت دیگری (CSSOM) برای آن رسم می کند.
3 . حالا با ترکیب دو درختی که در بالا تشکیل شده درخت دیگری به نام درخت رندر (Render Tree) تشکیل می شود.
4 . از طریق فرآیند طرح بندی (Layout) هر نود با توجه به مختصات روی صفحه قرار می گیرد.
5 . هر نود را توسط قسمت بک اند رابط کاربری (UI Backend) درون صفحه وب ترسیم (Paint) می کند.
در واقع موتور مرورگر رابطی بین موتور رندر (Render Engine) و رابط کاربری(User Interface)
و همچنین رابطی بین موتور رندر و ارتباطات خارجی با سرور می باشد.
موتور مرورگر ، موتور رندر را بر اساس ورودی های رابط های کاربری مختلف مدیریت و دستکاری می کند.
این بخش از مرورگر برای ذخیره سازی تمام داده ها مانند ذخیره سازی محلی (Local Storage) و کوکی ها (Cookies) و . . . استفاده می شود
کوکی ها Cookies
کوکی‌ها چیزی بیشتر از یک فایل متنی که بر روی کامپیوتر یا موبایل شما ذخیره می‌شوند نیستند. این فایل توسط مرورگر خوانده می‌شود و در آن اطلاعاتی در باره‌ی وب‌سایت مانند مشخصات ورود به سایت و تنظیمات سفارشی شده‌ی کاربر ذخیره می‌شود. در کوکی‌ها همچنین اطلاعات دیگری که وب‌سایت‌ها برای شناسایی کاربر و ارائه‌ی خدمات بهتر به آن نیاز دارد، قرار می‌گیرد. وقتی یک وب‌سایت را باز میکنید، درخواستی به مرورگر شما ارسال می‌شود تا فایل کوکی بر روی هارد دیسک ذخیره شود و از آن پس اطلاعات مورد نیاز وب‌سایت برای شناسایی کاربر و ارائه‌ی خدمات اختصاصی شروع می‌شود.
ذخیره در لوکال استوریج Local storage
هر مرورگری دو حافظه داره که بهشون Local Storage و Session Storage میگیم و میتونیم این ها رو با inspect گرفتن در قسمت Application ، مشاهده کنیم.
تفاوت Local Storage و Session Storage
هر دوی این ها حافظه ی مرورگر هستن اما یه تفاوتی دارند و اون هم این هست که اطلاعاتی که در Local Storage ذخیره می شوند حتی بعد از بسته شدن Tab و یا رفرش کردن صفحه باز هم اطلاعات درون اون باقی میمونند ؛ اما در Session Storage بعد از بستن صفحه اطلاعات داخلش هم پاک میشه.
مرورگرهای مختلفی وجود دارند که هر کدام امکانات و نقاط ضعف و قوت مختص به خود را دارند.
در میان برنامه نویسان و طراحان وب به دلیل ارائه افزونه های مختلف و کاربردی گوگل کروم از محبوبیت بالایی برخوردار است.
همچنین با اختصاص دادن 63 درصد از کاربران جهانی به خود محبوب ترین مرورگر وب شناخته می شود.
با این حال مرورگر کروم رقبای خوبی مانند فایرفاکس و سفاری و اپرا دارد.
