为什么还有那么多网络包

刚才的‘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:\Users\Admin\AppData\Local\Google\Chrome\User Data\Default\Cache

cache技术减少了网络消耗，加速了页面的呈现速度，但有时也会因为cache技术导致一些问题。例如百度更换了logo.png的内容，但浏览器还在用cache里的logo.png，于是你看到的还是旧的logo。

所以聪明的程序员会在HTML里面对重要的资源都加上?v=1.14，当网站有改动时就修改版本号来告诉浏览器这个资源的版本号更换了，请从服务器获取最新的资源文件而非使用本地的。

以上就是我们看到百度首页的完整技术过程，当然这里面没有深入到网络协议层展开讲，那就更加复杂了。

至少你现在知道从输入地址到页面出现，背后都发生了什么。