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

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

目录

1 Content-Type的作用

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

3 图片等网络标签

---

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的体积。

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