- 瀏覽器向DNS服務器查找輸入URL對應的IP地址。
- DNS服務器返回網站的IP地址。
- 瀏覽器根據IP地址與目標web服務器在80端口上建立TCP連接
- 瀏覽器獲取請求頁面的html代碼。
- 瀏覽器在顯示窗口內渲染HTML。
- 窗口關閉時,瀏覽器終止與服務器的連接。
這其中最有趣的是第1步和第2步(域名解析)。我們輸入的網址(域名)是IP地址的一個別名, 在一個DNS內,一個域名對應一個IP地址。域名系統(DNS) 的工作就是將域名與它的IP地址對應起來。DNS是分布式的,同時也是具有層級關系的。
一個域名服務器雖然只記錄一個小的子網內的主機名和IP地址, 但所有的域名服務器聯合起來工作,就能將全網內的域名與它們的IP地址對應起來。 這也就意味着,如果一個域名服務器無法找到某個請求域名所對應的IP地址, 它就會向其它的域名服務器發出請求進行尋找。
WEB前台的優化規則
一、盡量減少 HTTP 請求
有幾種常見的方法能切實減少 HTTP 請求:
1、 合並腳本跟樣式文件,如可以把多個 CSS 文件合成一個,把多個 JS 文件合成一個。
2、 CSS Sprites 利用 CSS background 相關元素進行背景圖絕對定位,把多個圖片合成一個圖片。
二.使用瀏覽器緩存
在用戶瀏覽網站的不同頁面時,很多內容是重復的,比如相同的JS、CSS、圖片等。如果我們能夠建議甚至強制瀏覽器在本地緩存這些文件,將大大降低頁面產生的流量,從而降低頁面載入時間。
根據服務器端的響應header,一個文件對瀏覽器而言,有幾級不同的緩存狀態。
1、服務器端告訴瀏覽器不要緩存此文件,每次都到服務器上更新文件。
2、服務器端沒有給瀏覽器任何指示。
3、在上次傳輸中,服務器給瀏覽器發送了Last-Modified或Etag數據,再次瀏覽時瀏覽器將提交這些數據到服務器,驗證本地版本是否最新的,如果為最新的則服務器返回304代碼,告訴瀏覽器直接使用本地版本,否則下載新版本。一般來說,有且只有靜態文件,服務器端才會給出這些數據。
4、服務器強制要求瀏覽器緩存文件,並設置了過期時間。在緩存未到期之前,瀏覽器將直接使用本地緩存文件,不會與服務器端產生任何通信。
我們要做的是盡量強制瀏覽器到第四種狀態,特別是對於JS、CSS、圖片等變動較少的文件。
三.將腳本放在底部
腳本放在頂部帶來的問題,
1、 使用腳本時,對於位於腳本以下的內容,逐步呈現將被阻塞
2、 在下載腳本時會阻塞並行下載
放在底部可能會出現JS錯誤問題,當腳本沒加載進來,用戶就觸發腳本事件。
要綜合考慮情況。
四.使用外部的JS和CSS
將內聯的JS和CSS做成外部的JS、CSS。減少重復下載內聯的JS和CSS。