你打開瀏覽器輸入www.baiduu.com于是百度首頁就出現了，但你知道這中間經歷了怎樣復雜的一個互聯網技術的全過程嗎？

• 網絡上成千上萬的服務器，瀏覽器怎么找到百度服務器在哪兒？
• 瀏覽器怎么從百度服務器拿到的首頁內容？
• 拿到的內容怎么就整齊漂亮地展示在我們面前了呢？
• 輸入了關鍵詞頁面是怎么切換到搜索結果的呢？

今天就帶你深入到互聯網的技術世界暢游一番。

百度的IP地址

當我們在瀏覽器地址欄輸入www.baiduu.com以后，瀏覽器是怎么找到百度服務器在哪兒呢？瀏覽器首先要找到www.baiduu.com對應的IP地址。www.baiduu.com只是網站的名字，專業術語叫做‘域名’。IP地址相當于網站的身份證號。

百度的IP是多少呢？用你的windows打開一個命令行窗口。輸入

ping www.baiduu.com-t

你看，百度的IP地址是14.215.177.38

你試試在瀏覽器地址欄輸入這個IP地址呢。是不是也看到了百度的首頁？

DNS服務器

那么，是誰告訴我們百度的IP地址呢？這就是DNS服務器。我們要上網沖浪，必須要設置DNS服務器的IP。聰明的你馬上會想：那DNS服務器的IP地址又是多少呢？

看這個：http://zhuanlan.zhihu.com/origin/p/90403282

國內有很多互聯網服務商都提供了DNS服務器，這些DNS服務器是互通的，都可以查詢到任意域名的IP地址。

那你現在上網用的是哪個DNS服務器呢？ 這個就要看你的路由器里面的設置。我們安裝電信寬帶時，電信路由器里面就已經設置好電信的DNS（14.114.114.114）。所以你才能順利地上網。不信你可以進入到自家路由器的設置界面去看看。

GET首頁內容

瀏覽器拿到了域名的IP，就可以通過IP跟百度服務器通話了。首先會發送GET請求，告訴百度服務器，我要訪問你，請給我首頁。

chrome瀏覽器，右鍵‘檢查’，進入調試模式，切換到‘network’標簽頁，你可以看到這個對話的內容：）

‘Request Method’表示對話的方式是GET，可以看到‘Remote Address’就是百度服務器的IP。

百度服務器回復了什么

那百度服務器回復了瀏覽器什么呢？切換到‘response’標簽頁，可以看到回復的內容：

回復的內容就是首頁的HTML。HTML是專用于網頁的語言格式，包含了頁面上要顯示的各種內容、其它額外內容的地址、你看不到的一些搜索優化的標簽、隱藏在頁面背后的一些代碼動作。。。這就是我們常說的前端開發要去搞的事情了。

我們把‘Response’里面的內容全部復制下來，保存到本地的一個baiduu.html里面。然后直接打開本地的這個baiduu.html，可以看到完全一樣的效果。（相當于復制了一個百度首頁）

為什么還有那么多網絡包

剛才的‘Response’截圖里面左側可以看到除了首頁的HTML，還有一大堆其它網絡包。這是為什么呢？

可看到很多網絡包都是xxxx.css。css是HTML的伴侶，用來指定頁面上的各種元素的樣式（顏色、大小、位置等等），HTML+CSS就可以讓瀏覽器把頁面精美的呈現在我們面前。

那圖片呢？對的，圖片在HTML里面都是地址，還需要瀏覽器一個個地下載下來，所以還有很多網絡包都是xxxxx.png

最后還有一部分xxxxx.js。JS也是HTML的伴侶，是一些代碼，用來動態控制頁面里面的樣式、邏輯、交互等等。比如當我們點擊‘百度一下’按鈕的時候，就是JS在處理接下來的事情了。

百度首頁有多大

目前你已經知道我們并非只是幾次網絡包就把百度首頁搞定了。那我們的瀏覽器打開一次百度首頁到底發生了多大數量的網絡傳輸呢？也就是我們常說的占用了多少的帶寬。

從調試模式的監控結果可以看到一共有105個網絡包，總共2.3MB，3秒左右完成了百度首頁的顯示。

每次都會下載圖片嗎

你可能會想一個問題，瀏覽器每次都把頁面上的所有圖片都下載一遍，很浪費帶寬啊。比如百度首頁的logo大部分時間都是這個（除了一些節日），我今天開百度明天開百度或者一天開幾次百度，都要下載這個logo嗎？

互聯網技術世界可是很先進的，當然不會。瀏覽器都有cache也就是緩存技術，任何一個網站第一次訪問時，瀏覽器都會對網站的重要資源（如css、js、圖片等）生成本地緩存，后面再訪問這個網站時，如果是相同資源就不會從網絡下載了，而是直接使用本機的緩存。

所以，某個網站，你第一次訪問時，一定是最慢的。

所以，你的電腦隨著訪問的網站越多，C盤空間會越來越吃緊（瀏覽器cache通常都在c盤，例如chrome的cache通常位于：C:UsersAdminAppDataLocalGoogleChromeUser DataDefaultCache

cache技術減少了網絡消耗，加速了頁面的呈現速度，但有時也會因為cache技術導致一些問題。例如百度更換了logo.png的內容，但瀏覽器還在用cache里的logo.png，于是你看到的還是舊的logo。

所以聰明的程序員會在HTML里面對重要的資源都加上?v=1.14，當網站有改動時就修改版本號來告訴瀏覽器這個資源的版本號更換了，請從服務器獲取最新的資源文件而非使用本地的。

總結一下

以上就是我們看到百度首頁的完整技術過程，當然這里面沒有深入到網絡協議層展開講，那就更加復雜了。

至少你現在知道從輸入地址到頁面出現，背后都發生了什么。