تکنولوژی
وقتی یک سایت را باز میکنیم دقیقاً چه اتفاقی میافتد؟
تا حالا فکر کردهاید وقتی آدرس یک سایت را وارد میکنید و Enter میزنید، پشت پرده چه اتفاقی رخ میدهد؟ در این مقاله مسیر یک درخواست را از DNS و سرور تا Backend، Database و نمایش نهایی صفحه بررسی میکنیم.
- 4.5/5.0
- 14دقیقه
- آخرین بروزرسانی ۰۴ مرداد ۱۴۰۵
هر روز بارها یک آدرس را در مرورگر وارد میکنیم، دکمه Enter را میزنیم و چند لحظه بعد، یک صفحه کامل مقابل ما ظاهر میشود.یک وبسایت با تصاویر، متنها، دکمهها و انیمیشنها.
همه چیز آنقدر سریع اتفاق میافتد که شاید هیچوقت به این فکر نکرده باشیم که پشت همین اتفاق ساده، چه فرآیند پیچیدهای در حال اجراست.
فرض کنید در مرورگر خود آدرس یک سایت را وارد میکنید:
و Enter را میزنید.
- در همین لحظه، مرورگر شما باید بفهمد این سایت دقیقاً کجاست.
- باید آدرس آن را به یک IP تبدیل کند.
- باید با سرور ارتباط برقرار کند.
- اگر ارتباط امن باشد، باید یک اتصال رمزنگاریشده ایجاد شود.
- سپس یک درخواست به سرور ارسال میشود.
- سرور درخواست را پردازش میکند.
- ممکن است به دیتابیس دسترسی پیدا کند.
- اطلاعات موردنیاز را آماده کند.
- و در نهایت پاسخ را برای مرورگر شما ارسال کند.
اما ماجرا هنوز تمام نشده است.مرورگر باید این پاسخ را دریافت کند، فایلهای HTML، CSS و JavaScript را پردازش کند و در نهایت همه آنها را به صفحهای تبدیل کند که شما روی نمایشگر خود میبینید.
همه این اتفاقات در مدت بسیار کوتاهی رخ میدهند.اما سؤال اینجاست:
از لحظهای که Enter را میزنیم تا زمانی که صفحه سایت را میبینیم، دقیقاً چه اتفاقی میافتد؟
در این مقاله قرار است قدمبهقدم سفر یک درخواست را دنبال کنیم؛ از مرورگر شما شروع میکنیم، به DNS و سرور میرسیم، وارد دنیای HTTP و Backend میشویم و در نهایت میبینیم مرورگر چگونه پاسخ سرور را به یک صفحه قابل مشاهده تبدیل میکند.پس بیایید ببینیم پشت پرده باز شدن یک سایت چه میگذرد. 🚀
🔎 مرحله اول: مرورگر چگونه آدرس سایت را پیدا میکند؟ (DNS)
وقتی شما در مرورگر خود یک آدرس مثل:
را وارد میکنید، اولین سؤالی که برای سیستم ایجاد میشود این است:
این سایت دقیقاً کجاست؟کامپیوترها برخلاف انسانها، با نامهایی مثل google.com یا bytemasters.ir ارتباط برقرار نمیکنند.آنها برای پیدا کردن یک سیستم در شبکه از چیزی به نام IP Address استفاده میکنند.برای مثال، یک سرور ممکن است یک آدرس IP مانند:
192.0.2.10
داشته باشد.اما تصور کنید اگر برای باز کردن هر سایت مجبور بودیم یک عدد طولانی را حفظ کنیم، استفاده از اینترنت بسیار سخت میشد.اینجاست که DNS وارد ماجرا میشود.
🌐 DNS چیست؟
DNS مخفف Domain Name System است.به زبان ساده، DNS مثل یک دفترچه تلفن بزرگ برای اینترنت عمل میکند.در دنیای واقعی، شما نام یک شخص را در مخاطبین گوشی پیدا میکنید و شماره او را دریافت میکنید.
در اینترنت هم همین اتفاق میافتد:
نام دامنه → آدرس IP سرور
یعنی DNS به مرورگر کمک میکند بفهمد:
«این سایتی که کاربر درخواست کرده، روی کدام سرور قرار دارد؟»
🧩 وقتی Enter را میزنیم چه اتفاقی برای DNS میافتد؟
فرض کنید شما آدرس یک سایت را وارد کردهاید.مرورگر ابتدا بررسی میکند آیا قبلاً اطلاعات این دامنه را ذخیره کرده است یا نه.اگر پاسخ را پیدا نکند، درخواست به بخشهای مختلف ارسال میشود.بهصورت ساده، مسیر میتواند اینگونه باشد:
Browser Cache
⬇️
Operating System Cache
⬇️
DNS Resolver
⬇️
Root DNS Server
⬇️
TLD Server
⬇️
Authoritative DNS Server
در نهایت IP مربوط به دامنه پیدا میشود و مرورگر میفهمد باید با کدام سرور ارتباط برقرار کند.
🏛️ سرورهای DNS چه نقشی دارند؟
شاید تصور کنید یک سرور بزرگ وجود دارد که تمام آدرسهای اینترنت را نگهداری میکند.
اما اینترنت اینگونه کار نمیکند.DNS یک سیستم توزیعشده است که از بخشهای مختلف تشکیل شده.
برای مثال:
Root Serverها
اولین مرحله در پیدا کردن مسیر هستند و مشخص میکنند اطلاعات مربوط به چه پسوندی باید بررسی شود.
مثلاً:
.com
.ir
.org
TLD Serverها
این سرورها مسئول پسوندهای دامنه هستند.مثلاً برای یک دامنه با پسوند .com، سرور مربوط به .com بررسی میشود.
Authoritative DNS Server
این سرور اطلاعات نهایی دامنه را نگهداری میکند و IP واقعی سایت را برمیگرداند.
⚡ آیا DNS همیشه این مسیر را طی میکند؟
خیر.اگر اطلاعات دامنه قبلاً در Cache ذخیره شده باشد، مرورگر میتواند خیلی سریعتر به نتیجه برسد.Caching یکی از دلایل مهم سرعت بالای اینترنت است.سیستمها اطلاعاتی را که احتمالاً دوباره لازم دارند، برای مدتی ذخیره میکنند تا مجبور نباشند هر بار کل مسیر را طی کنند.
🎯 چرا یک برنامهنویس باید DNS را بداند؟
شاید DNS در نگاه اول یک موضوع شبکهای به نظر برسد، اما برای توسعهدهندگان وب اهمیت زیادی دارد.
مشکلاتی مثل:
- چرا سایت بعد از تغییر هاست باز نمیشود؟
- چرا دامنه به سرور جدید وصل نشده؟
- چرا API در محیط Production کار نمیکند؟
- چرا یک سرویس برای بعضی کاربران در دسترس نیست؟
گاهی ریشه در تنظیمات DNS دارند.یک برنامهنویس حرفهای لازم نیست متخصص شبکه باشد، اما باید بداند بخشهای مختلف وب چگونه با هم ارتباط برقرار میکنند.چون یک وبسایت فقط چند فایل HTML و CSS نیست.پشت هر صفحهای که میبینیم، مجموعهای از سیستمها در حال همکاری هستند.و بعد از پیدا شدن آدرس سرور، مرحله بعد شروع میشود:چگونه مرورگر با آن سرور ارتباط برقرار میکند؟اینجاست که وارد دنیای TCP و TLS میشویم. 🔐
🔐 مرحله دوم: مرورگر چگونه با سرور ارتباط برقرار میکند؟ (TCP و TLS)
حالا که مرورگر توانسته آدرس IP سرور را پیدا کند، یک سؤال مهم وجود دارد:
چگونه باید با آن سرور ارتباط برقرار کند؟
این ارتباط شبیه یک مکالمه بین دو سیستم است.مرورگر شما باید بتواند اطلاعات را ارسال کند، پاسخ دریافت کند و مطمئن شود دادهها سالم و درست منتقل شدهاند.اینجاست که دو تکنولوژی مهم وارد داستان میشوند:TCP و TLS
📡 TCP؛ ساختن یک مسیر قابل اعتماد
TCP مخفف Transmission Control Protocol است.وظیفه TCP این است که یک ارتباط قابل اعتماد بین کلاینت (مرورگر) و سرور ایجاد کند.اما چرا به یک پروتکل جداگانه نیاز داریم؟چون اینترنت همیشه یک مسیر مستقیم و کاملاً امن نیست.اطلاعات در اینترنت به بستههای کوچکتر تقسیم میشوند و ممکن است از مسیرهای مختلفی عبور کنند.
TCP کمک میکند:
- بستههای اطلاعاتی گم نشوند.
- ترتیب دریافت دادهها درست باشد.
- اگر بخشی از اطلاعات به مقصد نرسید، دوباره ارسال شود.
- ارتباط بین دو طرف پایدار بماند.
به زبان ساده:TCP باعث میشود مرورگر و سرور بتوانند یک گفتوگوی قابل اعتماد داشته باشند.
🤝 سه مرحله معروف TCP Handshake
برای شروع ارتباط، TCP یک فرآیند به نام Three-Way Handshake انجام میدهد.
این فرآیند سه مرحله دارد:
۱. SYN
مرورگر یک پیام برای سرور ارسال میکند:
«سلام، میخواهم یک ارتباط با تو ایجاد کنم.»
۲. SYN-ACK
سرور پاسخ میدهد:
«پیامت را دریافت کردم، من هم آماده ارتباط هستم.»
۳. ACK
مرورگر تأیید میکند:
«خوب است، ارتباط برقرار شد.»
حالا دو سیستم آماده هستند که اطلاعات واقعی را رد و بدل کنند.
🔒 TLS؛ ایجاد ارتباط امن
اگر فقط TCP داشته باشیم، ارتباط برقرار میشود؛ اما اطلاعات بهصورت رمزنگاریشده منتقل نمیشوند.اینجاست که TLS وارد میشود.TLS مخفف Transport Layer Security است و وظیفه آن امن کردن ارتباط است.وقتی شما سایتی را با:
https://
باز میکنید، یعنی ارتباط شما با سرور توسط TLS محافظت میشود.
🛡️ TLS چه کاری انجام میدهد؟
TLS سه وظیفه مهم دارد:
🔐 رمزنگاری اطلاعات
اطلاعاتی که بین مرورگر و سرور منتقل میشوند، برای افراد دیگر قابل خواندن نیستند.
مثلاً وقتی رمز عبور خود را وارد میکنید، این اطلاعات به شکل قابل فهم در اینترنت منتقل نمیشوند.
✅ اطمینان از هویت سرور
مرورگر باید مطمئن شود واقعاً به همان سایتی وصل شده که درخواست کرده است.
اینجاست که گواهیهای SSL/TLS وارد میشوند.
مرورگر بررسی میکند:
«آیا این سرور واقعاً متعلق به این دامنه است؟»
🛡️ جلوگیری از تغییر اطلاعات
TLS کمک میکند دادهها در مسیر انتقال دستکاری نشوند.
یعنی اگر اطلاعاتی از سرور به مرورگر ارسال میشود، مطمئن باشیم همان اطلاعات اصلی دریافت شده است.
🌐 پس HTTPS دقیقاً چیست؟
خیلیها فکر میکنند HTTPS یک تکنولوژی کاملاً جدا از HTTP است.
اما در واقع:
HTTPS = HTTP + TLS
یعنی همان پروتکل HTTP، اما روی یک ارتباط امن رمزنگاریشده.
پس وقتی شما یک سایت را باز میکنید، معمولاً مسیر کلی اینگونه است:
کاربر
⬇️
مرورگر
⬇️
DNS (پیدا کردن IP)
⬇️
TCP (ایجاد ارتباط)
⬇️
TLS (امن کردن ارتباط)
⬇️
HTTP (ارسال درخواست)
حالا مرورگر و سرور آماده هستند تا درباره چیزی که کاربر میخواهد صحبت کنند.و اینجا وارد یکی از مهمترین بخشهای دنیای وب میشویم:
HTTP Request و HTTP Response؛ زبان ارتباط بین مرورگر و سرور. 🚀
📡 مرحله سوم: درخواست HTTP؛ مرورگر چه چیزی برای سرور میفرستد؟
حالا که مرورگر آدرس سرور را پیدا کرده و یک ارتباط امن ایجاد شده، وقت آن است که درخواست اصلی را ارسال کند.
اما مرورگر دقیقاً چه چیزی برای سرور میفرستد؟اینجا HTTP وارد ماجرا میشود.
HTTP یک پروتکل ارتباطی است که مشخص میکند مرورگر و سرور چگونه با یکدیگر صحبت کنند.
وقتی شما یک صفحه وب را باز میکنید، مرورگر یک HTTP Request به سرور ارسال میکند.
این درخواست معمولاً شامل اطلاعاتی مثل:
- آدرس موردنظر (URL)
- نوع درخواست (GET، POST، PUT، DELETE و ...)
- اطلاعات مرورگر و کاربر (Headers)
- دادههای ارسالی کاربر (در صورت نیاز)است.برای مثال، وقتی وارد صفحه محصولات یک فروشگاه میشوید، مرورگر ممکن است یک درخواست GET ارسال کند و بگوید:«سرور، اطلاعات محصولات این صفحه را برای من ارسال کن.»یا وقتی یک فرم ثبتنام را ارسال میکنید، یک درخواست POST ایجاد میشود که اطلاعات کاربر را به سرور میفرستد.
🖥️ سرور چه پاسخی میدهد؟
بعد از دریافت درخواست، سرور آن را بررسی میکند و یک HTTP Response برمیگرداند.
این پاسخ میتواند شامل موارد مختلفی باشد:
- کد HTML یک صفحه
- اطلاعات JSON برای یک API
- فایل تصویر یا ویدئو
- پیام خطا
همچنین یک کد وضعیت (Status Code) ارسال میشود که نتیجه درخواست را مشخص میکند.
مثلاً:
200 OK
یعنی درخواست موفق بوده است.
404 Not Found
یعنی چیزی که درخواست کردهاید پیدا نشده است.
500 Internal Server Error
یعنی مشکلی در سمت سرور رخ داده است.
در واقع هر بار که یک صفحه باز میکنید، پشت پرده یک گفتوگوی ساده اما بسیار سریع اتفاق میافتد:
مرورگر:
«من این اطلاعات را میخواهم.»
سرور:
«این هم پاسخ درخواست شما.»
اما پشت همین پاسخ ساده، ممکن است اتفاقات زیادی رخ داده باشد؛ مثل اجرای کدهای Backend، بررسی دسترسی کاربر و دریافت اطلاعات از دیتابیس.و حالا باید ببینیم:
وقتی درخواست به سرور میرسد، Backend و Database چه کاری انجام میدهند؟ 🚀
🖥️ مرحله چهارم: وقتی درخواست به Backend میرسد چه اتفاقی میافتد؟
حالا درخواست HTTP به سرور رسیده است.اما سرور قرار نیست فقط یک فایل را تحویل مرورگر بدهد.
در بسیاری از سایتها، پشت پرده یک Backend قرار دارد که وظیفه پردازش درخواستها و اجرای منطق برنامه را بر عهده میگیرد.فرض کنید وارد حساب کاربری خود میشوید.مرورگر اطلاعات ورود شما را ارسال میکند و Backend باید بررسی کند:
- آیا این کاربر وجود دارد؟
- آیا رمز عبور صحیح است؟
- آیا کاربر اجازه دسترسی به این بخش را دارد؟
برای پاسخ به این سؤالات، Backend ممکن است به Database مراجعه کند.مثلاً اطلاعات کاربر از دیتابیس خوانده میشود، بررسیهای لازم انجام میگیرد و نتیجه به Backend برمیگردد.سپس Backend پاسخ مناسب را آماده میکند و برای مرورگر ارسال میکند.
این فرآیند میتواند چیزی شبیه این باشد:
Browser
⬇️
HTTP Request
⬇️
Backend
⬇️
Database
⬇️
Backend
⬇️
HTTP Response
⬇️
Browser
البته در پروژههای واقعی ممکن است سرویسهای بیشتری بین این بخشها وجود داشته باشند؛ اما مفهوم اصلی همین است.برای مثال، در یک پروژه میتوان از Django، Node.js یا Laravel برای Backend استفاده کرد و اطلاعات را در دیتابیسهایی مانند PostgreSQL یا MongoDB ذخیره کرد.حالا که پاسخ سرور به مرورگر رسیده، یک مرحله مهم دیگر باقی مانده است:
مرورگر چگونه این اطلاعات را به صفحهای تبدیل میکند که ما میبینیم؟ 🎨
🎨 مرحله پنجم: مرورگر چگونه صفحه سایت را نمایش میدهد؟
تا اینجا مرورگر درخواست خود را ارسال کرده و پاسخ سرور را دریافت کرده است.
اما این پاسخ هنوز همان صفحهای نیست که ما روی نمایشگر میبینیم.
حالا مرورگر باید کدهای دریافتی را پردازش کند و آنها را به یک صفحه قابل مشاهده تبدیل کند.
در این مرحله چند فناوری مهم وارد ماجرا میشوند:
- HTML برای ساختار صفحه
- CSS برای ظاهر و طراحی
- JavaScript برای رفتار و تعاملات
مرورگر ابتدا HTML را پردازش میکند و ساختار صفحه را به شکل یک درخت به نام DOM ایجاد میکند.
سپس CSS را بررسی میکند تا مشخص شود هر بخش از صفحه چگونه باید نمایش داده شود.
بعد از آن، مرورگر این اطلاعات را ترکیب میکند و فرآیند Rendering را انجام میدهد تا عناصر صفحه در موقعیت مناسب قرار بگیرند و روی نمایشگر نمایش داده شوند.اگر JavaScript هم در صفحه وجود داشته باشد، موتور JavaScript مرورگر آن را اجرا میکند.
برای مثال:
- باز شدن منوی موبایل
- اعتبارسنجی فرم
- نمایش یک Modal
- دریافت اطلاعات جدید از API
- تغییر محتوای صفحه بدون Reload
همه میتوانند با JavaScript انجام شوند.
- در نهایت، چیزی که کاربر میبیند نتیجه همکاری چند بخش مختلف است:
- DNS پیدا میکند سایت کجاست.
- TCP و TLS ارتباط را برقرار و امن میکنند.
- HTTP درخواست و پاسخ را منتقل میکند.
- Backend منطق برنامه را اجرا میکند.
- Database اطلاعات را ذخیره و بازیابی میکند.
و در نهایت Browser همه چیز را پردازش کرده و به صفحهای تبدیل میکند که شما میبینید.و همه این اتفاقات، در کسری از ثانیه رخ میدهند! 🚀
⚡ چرا بعضی سایتها سریعتر از بقیه باز میشوند؟
شاید برایتان پیش آمده باشد که یک سایت را باز میکنید و تقریباً بلافاصله صفحه نمایش داده میشود، اما سایت دیگری چندین ثانیه برای بارگذاری زمان نیاز دارد.با اینکه هر دو سایت ممکن است از اینترنت و مرورگر یکسانی استفاده کنند، عملکرد آنها میتواند کاملاً متفاوت باشد.دلیل این تفاوت به عوامل مختلفی بستگی دارد.
برای مثال:
- حجم فایلهای JavaScript و CSS
- اندازه و نحوه فشردهسازی تصاویر
- سرعت سرور
- نحوه طراحی Backend
- استفاده از Cache
- استفاده از CDN
- تعداد درخواستهای مرورگر
- نحوه رندر شدن صفحه
توسعهدهندگان میتوانند با تکنیکهایی مانند Lazy Loading، بهینهسازی تصاویر، Code Splitting و استفاده صحیح از Cache، زمان بارگذاری صفحات را کاهش دهند.همچنین معماری برنامه نیز اهمیت زیادی دارد.برای مثال، روشهایی مانند SSR، SSG و CSR میتوانند بسته به نوع پروژه، تأثیر متفاوتی روی تجربه کاربر داشته باشند.در نهایت، سرعت یک سایت فقط به «سرعت اینترنت» یا «قدرت سرور» وابسته نیست.از لحظهای که کاربر آدرس سایت را وارد میکند تا زمانی که صفحه را میبیند، مراحل زیادی طی میشود و بهینهسازی هرکدام از این مراحل میتواند روی عملکرد نهایی تأثیر بگذارد.به همین دلیل، ساخت یک سایت سریع فقط به معنی نوشتن کد کمتر نیست؛ بلکه به معنی طراحی درست کل مسیر از مرورگر تا سرور و دوباره بازگشت اطلاعات به مرورگر است.
💡دیدگاه بایت مسترز؛ فقط کد ننویس، سیستم را ببین
در بایت مسترز باور داریم برنامهنویسی فقط نوشتن کد نیست.وقتی یک برنامهنویس بداند پشت باز شدن یک سایت چه اتفاقاتی رخ میدهد، نگاه او به توسعه نرمافزار تغییر میکند.
دیگر فقط به این فکر نمیکند که:
«چطور این قابلیت را پیادهسازی کنم؟»
بلکه میپرسد:
«این قابلیت چگونه با بخشهای دیگر سیستم ارتباط برقرار میکند؟»
از مرورگر و شبکه گرفته تا Backend و Database، هر بخش از یک محصول نرمافزاری به بخشهای دیگر وابسته است.ما معتقدیم یادگیری برنامهنویسی زمانی عمیقتر میشود که بتوانیم این ارتباطها را درک کنیم؛ چون وقتی تصویر بزرگ را ببینیم، تصمیمهای بهتری میگیریم و فقط به اجرای کدها محدود نمیشویم.هدف ما در بایت مسترز این است که برنامهنویسی را فقط به عنوان یادگیری زبانها و فریمورکها نبینیم.بلکه یاد بگیریم چطور فکر کنیم، چطور سیستمها را درک کنیم و چطور چیزی بسازیم که واقعاً کار میکند.چون یک برنامهنویس خوب فقط کد نمینویسد؛او میداند کدی که نوشته، در دنیای بزرگتر نرمافزار چه نقشی دارد. 💙
🎯 جمعبندی؛ پشت یک کلیک ساده چه دنیایی وجود دارد؟
هر بار که یک سایت را باز میکنیم، شاید فقط یک صفحه را ببینیم؛ اما پشت همین اتفاق ساده، مجموعهای از فناوریها و سیستمهای مختلف در کنار یکدیگر کار میکنند.
از پیدا کردن آدرس سایت با DNS گرفته تا برقراری ارتباط با سرور، ارسال درخواستهای HTTP، پردازش اطلاعات در Backend، ارتباط با Database و در نهایت نمایش صفحه توسط مرورگر.
همه این مراحل در مدت بسیار کوتاهی اتفاق میافتند.
شناخت این فرآیندها شاید برای شروع برنامهنویسی ضروری نباشد، اما هرچه در مسیر توسعه نرمافزار جلوتر برویم، درک این ارتباطها اهمیت بیشتری پیدا میکند.
چون وقتی بدانیم پشت پرده چه اتفاقی میافتد، دیگر فقط کد نمینویسیم؛ بلکه بهتر میفهمیم چیزی که ساختهایم چگونه در دنیای واقعی کار میکند.
و شاید جذابترین بخش دنیای وب همین باشد:
یک کلیک ساده از طرف کاربر، میتواند آغاز سفری باشد که در کسری از ثانیه، از مرورگر شروع میشود، به سرورها و دیتابیسها میرسد و دوباره به صفحهای برمیگردد که مقابل چشمان ما ظاهر شده است. 🌐🚀
