浏览器显示网站的原理

不管是电脑的浏览器、手机的浏览器、还是平板设备的浏览器、他们都可以输入同一个网址，显示相同的网站，只是不同屏幕上显示同一个网站的样式不同，但是内容却是一样的。下面让我们看看同一个网站，在电脑上的显示和在手机上显示的效果吧。

第一张时电脑端的，效果如下（电脑屏幕比较大，所以只截图的这么一点）

第二张时手机端的，效果如下

可以看出，电脑的一行显示，在手机上变成了三行显示，这个是用的响应式布局，这个后续会讲。

不管是电脑上显示，还是手机上显示，它们显示的信息都是相同的，只是样式有一点不同，那你有没有想过，为什么同一个网站它既可以在电脑上显示、而且还可以在平板和手机上显示呢？我来告诉你为什么吧。不管是QQ也好，微信其他的什么也罢，只要你看到有一条线在从左往右加载（手机的顶端一般好看到这一条线），那么说明它多半内置了浏览器的功能，也就说明一个简单的问题，手机QQ什么的可以打开网站。不管是电脑上还是手机上网站的最终呈现形式是在浏览器上的。所以你的设备只要有浏览器（不管是电脑、手机、平板等等）都可以打开同一个网站，只是因为宽度不同，显示的样子不一样而已，但是信息完全相同。

下面是浏览器显示数据的过程

当用户输入一个网站并前往后，往往浏览器会出现一段空白的时间，然后才显示网站，那是因为浏览器做了上面的动作。

当用户输网址并前往的时候，浏览器会根据网址找到相应的ip地址的服务器，然后像服务器发起一个需要数据的请求，服务器接收到请求之后，它会根据请求获取相应的css、html、javascript文件和数据，然后再把信息传递给浏览器，浏览器接收到信息之后，对信息进行处理，然后变成网站展现给用户，在浏览器请求到浏览器处理接收到的数据这一段时间，就是浏览器加载的空白时间，这就是浏览器显示网站的原理。