آشنایی با نحوه کار مرورگرها

برای کسانی که در زمینه سئو وب سایت فعالیت می کنند یکی از ضروری ترین موارد دانستن نحوه عملکرد مرورگرها می باشد این آگاهی برای سئو کارها به دلیل آشنایی با جزئیات نوع عملکرد مرور گرها حاوی مطالب بسیار مهم و کاربردی خواهد بود که راهنمای تصمیم گیری های مهم در پروژه ها خواهد بود .
مرورگرها نرم افزارهایی هستن که برای یافتن ، بازیابی و نمایش محتوی در سیستم جهانی وب استفاده می شوند . اگر یک مدل کلاینت / سرور را در نظر بگیریم مرورگر کلاینتی است که بر روی کامپیوتر اجرا می شود و با تماسی که با سرور برقرار می کند درخواست ارسال اطلاعات را انجام می دهد و از سمت سرور هم وب سرور اطلاعات درخواستی را به مرورگر ارسال کرده که بصورت محتوی به کاربر نمایش داده می شود.
مرورگرهای امروز نرم افزارهایی هستند که می توانند صفحات وب (HTML) ، اپلیکیشن ها و برنامه ها مانند جاوا اسکریپت (javascript) و ایجکس (AJAX) و سایر محتو هایی که روی سرور وجود دارد را تفسیر و نمایش دهند . بسیاری از مرورگرها افزونه هایی را ارایه می دهند که قابلیت های نرم افزار را افزایش داده و امکان ارایه محتوی های چند رسانه ای ، ویدئو کنفرانس و افزونه های ضد فیشینگ را به کاربر دارند .
مرورگر در واقع گروهی از کد های ساختاریافته می باشد که در کنار یکدیگر مجموعه ای از وظایف را برای نمایش یک صفحه وب را انجام می دهند . این کدها بسته به نوع کاری که انجام می دهند بصورت مولفه های مختلف ارایه می شوند .

معماری سطح بالای یک مرورگر

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

1- رابط کاربری (user interface) : رابط کاربری فضایی است که کابر در ان فضا با مرورگر تعامل دارد که شامل تمام قسمت های مرورگر مانند ادرس بار ، دکمه بازگشت به صفحه قبل ، دکمه خانه . ... را شامل می شود . درواقع بجز پنجره ای که محتوی صفحه در ان نمایش داده می شود سایر قسمت های مرورگر زیر مجموعه این قسمت هستند .

2- موتور مرورگر ( Browser Engine) : موتور مرورگر در واقع یک پل بین رابط کاربری و موتور مفسر مرورگر می باشد که با توجه به ورودی های متفاوت کاربر درخواست تفسیر از موتور مفسر و کنترل ان را انجام می دهد

3- موتور مفسر (Rendering Engine) : موتور مفسر همانطور که از نام آن بر می آید وظیفه ارایه صفحه وب درخواستی را در مرورگر دارد این بخش از مرورگر با تفسیر اسناد HTML و XML که توسط کدهای CSS استایل دهی شده اند طرح مورد نظر را در رابط کاربری ایجاد می کند . مرورگرهای گوناگون از مفسر های متفاوت استفاده می کنند :
اینترنت اکسپلورر : Trident
فایر فاکس و سایر مرورگرهای موزیلا : Gecko
کروم و اپرا : Blink
کروم (آیفون) و سافاری : Webkit

4- شبکه سازی (Networking) : مولفه ای از مرورگر است که URL ها را با استفاده از پروتکل های رایج اینترنتی مانند HTTP و یا از طریق FTP بازیابی می کند . مولفه شبکه تمام جنبه های ارتباطات و امنیت اینترنت را کنترل می کند این مولفه امکان دارد یک حافظه پنهان قابل بازیابی به منظور کاهش ترافیک شبکه پیاده سازی کند .

5- مترجم جاوااسکریپت (JavaScript Interpreter) : این مولفه مرورگر وظیف تفسیر و ترجمه و اجرا کدهای جاوااسکریپت موجود در صفحه را بر عهده دارد که این نتایج به موتور رندرینگ یا موتور مفسر ارسال می شود تا در زمان اجرای اسکریپت اماده باشد .

6- مولفه UI Backend : این مولفه برای ترسیم ابزارهایی مانند پنجره ها و کمبو باکس ها و غیره با استفاده از رابط های کاربری سیستم عامل به کار می رود.

7- ذخیره سازی داده ها (Data Persistence/Storage) : مرورگرها از مکانیزم های ذخیره سازی مانند localStorage, IndexedDB, WebSQL وFileSystem پشتیبانی می کنند . درواقع می توان گفت این مولفه یک پایگاه داده کوچک بر روی کامپیوتری که مرورگر بر روی ان نصب و اجرا شده است ایجاد می کند و داده های کاربر مانند کش یا حافظه پنهان و کوکی ها و بوک مارک ها و تنظیمات انجام شده را حفظ می کند .

نکته بسیار مهمی که باید به ان اشاره کرد این است که در مرورگرهایی مانند گوگل کروم (Google Chrome) هر تب که باز می شود در یک فرایند جداگانه (چندین نمونه موتور مفسر) اجرا می شوند .

مولفه شبکه اسناد درخواست شده را در تکه های 8KB به موتور مفسر ارسال می کند .
موتور مفسر تکه های سند HTML را تجزیه می کند و عناصر را در درختی بنام درخت محتوی DOM یا درخت DOM به گره های DOM تبدیل می کند همچنین اقدام به تجزیه فایل های CSS می کند .