浏览器显示网站的原理

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

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

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

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

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

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

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

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

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180708A0GLVG00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励