مقدمه
به عنوان یک توسعه‌دهنده وب، یادگیری عملکرد مرورگر به شما کمک میکند تا تصمیمات بهتری بگیرید و دلایل استفاده و توسعه best practice را بدانید.
مرورگرهای وب پرکاربردترین نرم افزارها هستند. در ابتدا نحوه عملکرد مرورگر در پشت صحنه را توضیح خواهیم داد. ما خواهیم دید که وقتی در نوار آدرس google.com را تایپ می کنید ، تا زمانی که صفحه Google را در صفحه مرورگر مشاهده کنید ، چه اتفاقی می افتد.
مرورگرهایی که در مورد آنها صحبت خواهیم کرد :
امروزه پنج مرورگر اصلی روی دسکتاپ استفاده می شود: کروم، اینترنت اکسپلورر، فایرفاکس، سافاری و اپرا.در موبایل، مرورگرهای اصلی عبارتند از مرورگر اندروید، آیفون، اپرا مینی و اپرا موبایل، مرورگر UC، مرورگرهای نوکیا S40/S60 و کروم ، که همه آنها به جز مرورگرهای اپرا بر پایه WebKit هستند.
در این مقاله مثال هایی از مرورگرهای منبع باز فایرفاکس و کروم و سافاری (که تا حدی منبع باز است) می زنیم.طبق آمار StatCounter (تا ژوئن 2013)، کروم، فایرفاکس و سافاری ، حدود 71 درصد از مرورگرهای دسکتاپ جهانی را تشکیل می دهند و در تلفن همراه، مرورگر اندروید، آیفون و کروم ، حدود 54 درصد را تشکیل می دهند.
عملکرد اصلی مرورگرها
عملکرد اصلی یک مرورگر این است که : اطلاعاتی را که شما از وب میخواهید را از سرور درخواست میکند و در پنجره مرورگر برای شما به نمایش در می آورد. منبع اطلاعاتی معمولاً یک سند HTML است، اما ممکن است یک PDF، تصویر یا نوع دیگری از محتوا نیز باشد.
رابط های کاربری مرورگرهای مختلف شباهت های زیادی با یکدیگر دارند. از جمله عناصر رایج رابط کاربری عبارتند از:
- نوار آدرس برای درج URI
- دکمه های عقب (back) و جلو (next)
- گزینه های نشانک گذاری (Bookmarking)
- دکمه های بازخوانی / Refresh و توقف برای بازخوانی یا توقف بارگیری اسناد فعلی
- دکمه صفحه اصلی که شما را به صفحه اصلی خود می برد (دکمه home)
ساختار مرورگر
اجزای اصلی مرورگر عبارتند از:
- ظاهر رابط کاربری (user interface) : این شامل نوار آدرس، دکمه عقب/به جلو، منوی نشانه گذاری، و غیره است. هر قسمت از مرورگر به جز پنجره ای که صفحه درخواستی را در آن می بینید، نمایش داده می شود رابط کاربری آن مرورگر را تشکیل میدهد.
- موتور مرورگر (browser engine): اقدامات بین رابط کاربری و موتور رندر را هدایت میکند.
- موتور رندر (rendering engine): مسئول نمایش محتوای درخواستی است. به عنوان مثال اگر محتوای درخواستی HTML باشد، موتور رندر HTML و CSS را تجزیه می کند و محتوای تجزیه شده را روی صفحه نمایش می دهد.
- شبکه سازی (Networking) : این لایه داده ها را سازماندهی و مسیریابی می کند. همچنین تصمیم می گیرد که از کدام پروتکل های انتقال استفاده شود.
- UI backend : بک اند user interface اصلی مرورگر میباشد.
- مفسر جاوا اسکریپت (JavaScript interpreter) : برای تجزیه و اجرای کد جاوا اسکریپت استفاده می شود.
- ذخیره سازی داده ها(Data persistence) : در این لایه مرورگرها داده‌ها را به صورت لوکال ذخیره و پشتیبانی میکنند، مانند localStorage، IndexedDB، WebSQL و FileSystem ، که اینها مانند دیتابیس های کوچکی هستند که روی داریور محلی قرار میگیرند و چیزهایی مثل بوک مارک ها و کوکی ها و حافظه پنهان را درخودشان نگه میدارند.
موتور رندر (rendering engine)
مسئولیت موتور رندر ، رندر کردن است ، یعنی نمایش محتوای درخواستی در صفحه مرورگر.
به طور پیش فرض موتور رندر می تواند اسناد و تصاویر HTML و XML را نمایش دهد و می تواند انواع دیگری از داده ها را از طریق پلاگین یا افزونه نمایش دهد ، به طور مثال، نمایش اسناد PDF با استفاده از یک افزونه نمایشگر PDF.
با این حال، در این فصل ما بر روی مورد اصلی تمرکز خواهیم کرد: نمایش HTML و تصاویری که با استفاده از CSS قرارداده شده اند.
مرورگرهای مختلف از موتورهای رندر متفاوتی استفاده می کنند: اینترنت اکسپلورر از Trident، فایرفاکس از Gecko، Safari از WebKit ، کروم و اپرا (از نسخه 15) از Blink، که شاخه ای از WebKit است.
WebKit یک موتور رندر متن باز است که به عنوان موتوری برای پلتفرم لینوکس شروع شد و توسط اپل برای پشتیبانی از مک و ویندوز اصلاح شد.
مراحل اصلی موتور رندر
موتور رندر شروع به دریافت محتوای اطلاعات خواسته شده از لایه شبکه میکند. این دریافت اطلاعات معمولاً در قطعات 8 کیلوبایتی انجام می شود.
بعد از این مرحله ، تصویر زیر بیانگر مراحل پایه ای بعدی میباشد.
موتور رندر شروع به تجزیه سند HTML می کند و عناصر را به گره های DOM در درختی به نام “درخت محتوا” تبدیل می کند.
موتور ، داده‌های استایل را هم در فایل‌های CSS خارجی و هم در المنت style تجزیه میکند. اطلاعات استایل همراه با دستورالعمل های بصری در HTML برای ایجاد درخت دیگری استفاده می شود به نام ((درخت رندر)).
درخت رندر شامل مستطیل هایی با ویژگی های بصری مانند رنگ و ابعاد است که این مستطیل ها به ترتیبی که هستند روی صفحه ، نمایش داده می شوند.
پس از ساخت درخت رندر، فرآیند ” layout ” طی می شود. این به این معنی است که به هر گره مختصات دقیق جایی را میدهد که باید روی صفحه ، نمایش داده شود.
مرحله بعدی رنگ آمیزی (painting) است – درخت رندر پیمایش می شود و هر گره با استفاده از لایه UI BACKEND نقاشی می شود.
درک این نکته مهم است که رندر کردن یک روند تدریجی است. برای تجربه کاربری بهتر، موتور رندر سعی می کند در اسرع وقت محتویات را روی صفحه ، نمایش دهد. قبل از شروع ساختن و چیدمان درخت رندر،موتور رندر منتظر نمی ماند تا تمام HTML تجزیه شود. بخش‌هایی از محتوا که تجزیه شدند را نمایش میدهد ، در حالی که روند رندرینگ با بقیه مطالبی که از شبکه می‌آیند ، ادامه می‌یابد.
نمونه هایی از مراحل اصلی
همانطور که در اشکال بالا می‌بینید ، اگرچه WebKit و Gecko از اصطلاحات کمی متفاوت استفاده میکنند، اما اساساً مراحل یکسانی دارند.
Gecko درخت المنت ها با فرمت بصری را “frame tree” می نامد. هر المنت یک قاب است. WebKit از اصطلاح “Render Tree” استفاده می کند و از “Render Objects” تشکیل شده است. WebKit از اصطلاح “layout” برای قرار دادن المنت ها استفاده می کند، در حالی که Gecko آن را “Reflow” می نامد. “Attachment” شرطی و اصطلاحی است که WebKit برای اتصال گره های DOM و اطلاعات بصری برای ایجاد درخت رندر استفاده میکند. یک تفاوت در Gecko وجو دارد : Gecko یک لایه اضافی بین HTML و درخت DOM دارد. به آن ” content sink” می گویند و کارخانه ای برای ساخت عناصر DOM است.
ما در مورد هر بخش از مراحل صحبت خواهیم کرد:
ادامه مطلب را در پست بعدی دنبال کنید.
