你看到百度首页时发生了什么 _百度

文章插图

你打开浏览器输入www.baidu.com于是百度首页就出现了，但你知道这中间经历了怎样复杂的一个互联网技术的全过程吗？

网络上成千上万的服务器，浏览器怎么找到百度服务器在哪儿？
浏览器怎么从百度服务器拿到的首页内容？
拿到的内容怎么就整齐漂亮地展示在我们面前了呢？
输入了关键词页面是怎么切换到搜索结果的呢？

今天就带你深入到互联网的技术世界畅游一番。
百度的IP地址当我们在浏览器地址栏输入www.baidu.com以后，浏览器是怎么找到百度服务器在哪儿呢？浏览器首先要找到www.baidu.com对应的IP地址。www.baidu.com只是网站的名字，专业术语叫做‘域名’ 。IP地址相当于网站的身份证号。
百度的IP是多少呢？用你的windows打开一个命令行窗口。输入
ping www.baidu.com-t

文章插图

你看，百度的IP地址是14.215.177.38
你试试在浏览器地址栏输入这个IP地址呢。是不是也看到了百度的首页？

文章插图

DNS服务器那么，是谁告诉我们百度的IP地址呢？这就是DNS服务器。我们要上网冲浪，必须要设置DNS服务器的IP 。聪明的你马上会想：那DNS服务器的IP地址又是多少呢？
看这个：
https://zhuanlan.zhihu.com/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’里面的内容全部复制下来，保存到本地的一个baidu.html里面。然后直接打开本地的这个baidu.html，可以看到完全一样的效果。（相当于复制了一个百度首页）

文章插图

为什么还有那么多网络包刚才的‘Response’截图里面左侧可以看到除了首页的HTML，还有一大堆其它网络包。这是为什么呢？
可看到很多网络包都是xxxx.css 。css是HTML的伴侣，用来指定页面上的各种元素的样式（颜色、大小、位置等等），HTML+CSS就可以让浏览器把页面精美的呈现在我们面前。
那图片呢？对的，图片在HTML里面都是地址，还需要浏览器一个个地下载下来，所以还有很多网络包都是xxxxx.png
最后还有一部分xxxxx.js 。JS也是HTML的伴侣，是一些代码，用来动态控制页面里面的样式、逻辑、交互等等。比如当我们点击‘百度一下’按钮的时候，就是JS在处理接下来的事情了。
百度首页有多大目前你已经知道我们并非只是几次网络包就把百度首页搞定了。那我们的浏览器打开一次百度首页到底发生了多大数量的网络传输呢？也就是我们常说的占用了多少的带宽。