从浏览器输入url到页面加载(十一)数据返回浏览器

63 阅读2分钟

数据经过漫长的流转,终于要从服务端返回给浏览器了,这一节我们继续看一下,数据到了浏览器端,会有哪些故事会发生呢。

1 Content-Type的作用

数据到达客户端机器后,仍然是那一老套,网卡接受到数据,将电信号转为数字信号,然后CPU指挥网卡驱动将数字信号转为可用的数据信息。

然后到了浏览器呢,就需要重点看一下Content-Type这个类型了,因为不管哪种浏览器,对于文字、图片、视频、文件等这些东西,渲染规则都会不一样,使用的方法也不同。所以就需要Content-Type来区分显示。

例如Content-Type: text/html

/ 这个斜杠左侧表示主类型,右侧表示子分类,是具体的数据类型。再比如Content-Type: image/gif,大概就是这个意思。

不仅如此,我们文档顶部一般会设置charset="utf-8",或者gb2312啥的,这都是需要浏览器识别的,还有Xhtml等。

2 HTML标签和布局以及系统字体的展示

比如显示一些文本,图片,浏览器自身具有支持展示这些内容的能力。但如果遇到复杂的布局,标签之间的嵌套,各种CSS的样式布局等情况,浏览器就需要解释这些标签的含义,解析CSS样式,样式与布局相结合,最终才能按指定的样式渲染出网页来。

再比如我们有时候需要显示不同的字体,操作系统那么多种字体呢。这还需要浏览器与操作系统相配合,使得屏幕哪个地方显示什么字体这些操作。

3 图片等网络标签

文字,样式这些倒还好,但是遇到一些网络标签。例如图片,视频等网络文件,他们带有src这样的属性,属性值很可能是一个网络地址。

遇到这种标签,浏览器就需要向对应的服务端发送请求,这个过程就和我们输入url地址再到浏览器的过程是一样的。

但例如gif图片,JS文件,CSS文件这种特殊的传输数据,其实你会发现,他们在下载之前,是经过服务器压缩过的,区分resource size和transferred over network的体积。

image.png

意思就是为了使下载过程变快,服务器压缩了文件,比如一个JS文件的源文件体积是46.7kB,然后服务器压缩到32.1k, 等浏览器下载完成后,再解压成46.7kB,然后浏览器才能真正解析这些JS内容,再加载,再与DOM交互。