這個問題問的真是很好,于是希望認認真真的去回答一下。當然,某些知識是百度的來,也結合了日常工作中的一些東西,希望這個回答在我前端學習一段時間再回來看的時候能夠會心一笑就好。
希望體現的知識點:頁面\網絡\HTTP\Nginx\加密\算法
Step1.瀏覽器查找域名的IP地址(DNS)(忽略網絡部分)
通過遞歸搜索方式,查找域名對應的IP地址。一般的DNS服務器中都會有.com域名的緩存。緩存刷新時間通常是10分鐘。
大多數DNS服務器使用Anycast來獲得高效低延遲的DNS查找。 Anycast可以自行百度百科,我并不懂,不深挖。
Step2.瀏覽器給Web服務器發送了一個HTTP請求
HTTP連接最顯著的特點是客戶端發送的每次請求都需要服務器回送響應,在請求結束后,會主動釋放連接,它是一種“短連接”,要保持客戶端程序的在線狀態,需要不斷地向服務器發起連接請求。
HTTP請求類似于:
在這里我們可以看到,HTTP請求頭信息包含的信息:
Accept:
接受類型。這里顯示可以接受任何類型的返回。
Accept-Encoding:
gzip,deflate. 聲明瀏覽器可以接受的編碼類型。這里可以看到,接受的編碼類型為gzip和deflate,這也是常見的HTTP壓縮技術。了解不深入,不繼續拓展。
Accept-Language: Zh-CN,zh:q=0.8;en-US;q=0.5,en;q=0.3
瀏覽器可以接受的語言類型。這里可以看到分別為中文,英文。其中,q代表用戶偏好程度。
Connection:keep-alive
拓展:Keep-alive.
Http1.0中,官方沒有規定連接的工作方式,此時必須添加keep-alive,保持連接一直存活。從1.1開始,默認即為連接Keep-alive,此時除非聲明close,否則將一直處于alive狀態。
Cookie
沒法細說,先略過。此處暫時理解為存儲用戶信息和Token的用途。
Host :www.baidu.com
主機名。沒法細說。
Referer:***
告訴HTTP協議,我是從哪個頁面過來的,以便于服務器進行處理。
User-Agent:***
用戶使用的各種瀏覽器端信息。
Step3:301永久重定向+跟蹤重定向地址
URL規范化需要使用。百度到的301重定向作用為,一是為了URL規范化并集中權重不讓權重分散、二是為了網站改版,將舊版本的頁面的所有指標全部轉移到新版本的頁面上。這里我了解的同樣有限,不做深挖。暫時理解為有利于網站改版與SEO,繼續跟蹤重定向以便獲得
Step4:服務器端接收到了信息
這個我個人還是以我比較熟悉的Nginx來進行說明(Apache未了解過。)簡單的說,就是收到一個請求,并進行了處理。但是怎么處理的呢?網上搜了一圈,沒有找到太多的回答。于是嘗試自己作答一下。以下均為個人理解,不保證正確性。
我們知道,Nginx分為Master進程和Worker進程。HTTP請求是由Work進程處理的,具體步驟如下:
Worker進程調用事件模塊——建立TCP連接——根據配置文件交由HTTP框架處理——接受請求的HTTP包頭——根據location配置調用HTTP模塊處理請求——處理請求——發送HTTP響應時一次調用所有HTTP過濾模塊——根據配置文件決定如何處理(是否進行HTTP過濾),是 則進行HTTP過濾,否則直接返回。
在獲取HTTP頭部之后,將其存儲進headers這個ngx_list_t鏈表,進行值判斷,并進行Hash值校驗。如果hash為0,則表明不是合法的頭部。同時判斷HTTP頭部值是否為"uploadFile",如果不是,也不是正確的頭部。
進行頭部判斷后,開始獲取HTTP包體。HTTP包體的長度由于未事先聲明,有可能非常大。如果試圖一次性調用并全部讀取完,那么肯定會阻塞該Worker進程。Nginx HTTP框架提供了一種方法來異步地接收包體,方法名為ngx_http_read_client_request_body。調用它只是說明要求Nginx開始接收請求的包體,并不表示是否已經接收完,當接收完所有包體后,post_handle指向的回調方法會被調用。換句話說,ngx_http_read_client_request_body返回時既有可能已經接收完請求中所有的包體,也有可能還沒開始接收包體。結束的標志是什么呢?返回NGX_DONE.
Step5:服務器發回HTML響應
請求處理完畢后,開始發送HTTP響應,告知Client端已經處理完畢。響應主要包括響應行,響應頭部,包體三部分。具體的不多說,只是要注意,返回的類型值為Text/html,通知客戶端以HTML格式進行包處理。
Step6:頁面渲染,開始顯示
了解的不多也不懂。此處放一張圖吧,來自知乎。