چگونه وب سایت بارگذاری می شود؟
مراحل یک صفحه وب نمایش داده می شود؟
یک درخواست زمانی ایجاد می شود که یک لینک کلیک شود.
صفحه و منابع آن (فایل ها) دانلود می شوند.
مرورگر وب از منابع صفحه برای ساخت صفحه استفاده می کند.
صفحه پس از آن به کاربر رندر می شود (نمایش داده می شود).
هر یک از مراحل فوق دارای اجزای مختلف و جزئیات است، اما این چهار مرحله مهمترین چیزهایی هستند که برای نشان دادن یک صفحه وب به یک کاربر اتفاق می افتد.
این مقاله هر یک از این مراحل را برای ارائه یک مرور کلی از آنچه در واقع اتفاق می افتد زمانی که یک صفحه وب در یک مرورگر نمایش داده می شود.
صحبت فنی
چهار گام ذکر شده در بالا اغلب از لحاظ فنی به ...
درخواست
واکنش
ساختن
رندر کردن
هر یک از این مراحل اغلب در طول بارگذاری صفحه چند بار انجام می شود.
درخواست
قبل از اینکه ما در مورد چه چیزی اتفاق می افتد زمانی که یک صفحه وب درخواست شده است، اجازه دهید نگاهی به آنچه باعث می شود یک صفحه وب در وهله اول درخواست شود.
رایج ترین شیوه درخواست یک صفحه وب زمانی است که یک لینک روی آن کلیک می شود، اما درخواست ها نیز هنگامی رخ می دهد که یک صفحه تجدید می شود یا زمانی که یک URL به مرورگر تایپ می شود.
لحظه ای که یک صفحه وب درخواست شده است نیز "شروع ناوبری" نامیده می شود.
این اساسا لحظه ای است که تمام روند نمایش یک صفحه آغاز می شود.
سند
هنگامی که یک پیوند کلیک شده یک درخواست برای یک سند ساخته شده است.
سند فایل صفحه وب است که فقط یک فایل متنی است. این در یک سرور وب (یک میزبان وب) قرار دارد.
این فایل اغلب از نوع "html." است، اما نوع فایل آن واقعا مهم نیست. مهم این است که یک فایل متنی از طریق مرورگر وب درخواست می شود.
پرونده با استفاده از یک سیستم به نام HTTP درخواست می شود.
در این مرحله ما نیازی به درک HTTP نداریم، فقط باید درک کنیم که یک مرورگر وب از یک سرور وب درخواست پرونده می کند.
پاسخ
وب سرور سپس فایل را به مرورگر وب فراهم می کند.
پاسخ به سادگی مرورگر چیزی است که درخواست کرده است.
اگر این یک صفحه وب ساده بود (فقط HTML)، مرحله درخواست و پاسخ بارگذاری صفحه کامل می شد.
با این حال، بسیاری از صفحات وب چیزهایی مانند تصاویر، CSS و جاوا اسکریپت دارند.
اینها منابع هستند و به منظور نمایش صفحه وب، مرورگر وب باید این منابع صفحه را نیز دریافت کند.
تجزیه
پس چگونه یک مرورگر وب می داند که آیا یک صفحه نیاز به منابع اضافی دارد؟
هنگامی که مرورگر سند دریافت کرده است (فایل HTML) آن را می خواند.
مرورگر وب به کل سند HTML نگاه می کند و به دنبال هر CSS، جاوا اسکریپت و تصاویری است که توسط صفحه مراجعه می شود.
اگر منابع در HTML یافت شود، مرورگر وب پس از آن هر یک از این منابع را از وب سرور درخواست می کند.
هنگامی که یک کامپیوتر یک فایل را به دنبال چیزی می خواند، آن را "تجزیه" می نامد
تصاویر، CSS و جاوا اسکریپت که مراجع فایل HTML را با مرورگر دانلود می کنند.
نحوه انتخاب این منابع و سفارشاتی که منابع دانلود می شود کمی پیچیده است و در مقاله دیگری توضیح داده خواهد شد. اگر کنجکاو هستید، من به مسیر رندر انتقادی نگاه می کنم.
هنگامی که مرورگر وب دارای منابع مورد نیاز است، می تواند صفحه را بسازد.
نحوه ایجاد مرورگر وب این است که ترکیبی از اطلاعات موجود در سند (فایل اصلی HTML) و اطلاعات موجود در منابع است.
اساسا سه مرحله وجود دارد که مرورگر برای ساخت یک صفحه نیاز دارد.
ساخت DOM
ساختن CSSOM
ساخت رندر درخت
ساخت DOM
DOM مخفف "Object Map Document" است. اساسا نقشه ای است که همه چیز در یک صفحه بر اساس HTML نمایش داده می شود. DOM نشان دهنده آنچه HTML می گوید با نقشه برداری از صفحه به شیوه ای رابطه ای.
ساخت CSSOM
CSSOM مخفف "CSS Object Map" است. اساسا نقشه ای از سبک هایی است که می بایست به قسمت های مختلف صفحه بر اساس CSS اعمال شود. CSSOM نقشه ای را که شیوه ها را با استفاده از سبک ها ارائه می دهد را نشان می دهد.
ساخت درخت رندر
درخت رندر اساسا DOM و CSSOM را می گیرد و آنها را برای ایجاد یک نقشه کامل از نحوه ایجاد و نقاشی در صفحه، ترکیب می کند.
رندر
پس از تمام مراحل فوق، مرورگر می تواند در نهایت چیزی روی صفحه نمایش بگذارد.
دو چیز اصلی وجود دارد که در اینجا اتفاق می افتد ...
رنگ
طرح بندی / Reflow
مرورگر در این نقطه می داند چه چیزی باید نمایش دهد (DOM) و در چه شیوه ای برای نمایش آن (CSSOM) و ارتباط بین آن دو (درخت رندر).
چیزی که نمی داند اندازه ای است که برای نمایش همه چیز و جایی که همه چیز در یک صفحه ظاهر می شود.
یک مثال از این ممکن است جایی باشد که div به نام "نوار کناری" قرار است 25٪ صفحه در سمت راست باشد.
هومم 25٪ چی؟
این قسمت طرح یا اصطلاحا نامیده می شود و اساسا جایی است که مرورگر تعیین می کند که صفحه نمایش چقدر بزرگ است و چگونه بر صفحه نمایش نمایش داده می شود.
رنگ
اکنون که تمام محاسبات انجام می شود، مرورگر می تواند چیزی را بر روی صفحه نمایش نشان دهد.
این رنگ نامیده می شود.
در این مرحله نهایی مرورگر هر گره را در درخت رندر به پیکسل های واقعی روی صفحه تبدیل می کند.
قرار دادن آن با هم
ما روند نمایش یک صفحه وب را به چهار قسمت تقسیم کردیم ...
درخواست
واکنش
ساختن
رندر کردن
