ZB-022-01超详细网址输入url过程

浏览器输入url过程

  1. 当你打开一个网页的时候，这个世界上一定有一个地方处理这个请求，这个页面不可能凭空掉下来。
  2. 这个地方在那里呢？

这就不可避免的说：计算机网络的基础架构。

计算机网络的基础架构

在互联网上有很多很多的计算机，假设它们之间用网线连接起来。

通过运营商 联通/电信 连接到你家的小区里，然后在小区里跟你家里牵根线。此时你躺在床上拿着手机。

你的手机通过无线路由器，和这个网络相连的。

一个概念

在计算机世界里有很多很多的电脑，这个电脑就叫主机 HOST ，和你的笔记本没什么区别。把你的笔记本放机房里也可以充当一台主机。

因此,这个世界上有很多很多相连的计算机，我们称之为主机

每个主机有一个IP地址。

在IPV4的世界里，IP地址是 32位地址(4个字节),形如 192.118.112.3，IP地址就是网络上计算机的地址

这个地址可以唯一的定位一台计算机就是主机。

1个byte -128~127, 而无符号的byte最大值刚好是 255。

因此IP地址最大不超过255

32位可以存多少数字呢？

42亿个数字，也就是说这个世界上最多有42亿IPV4的IP地址，但是发展到现在 发现42亿的IP地址果然不够用。于是有了IPV6

但是，无论访问什么网站，我们都不会用IP地址

因为IP地址难记啊！

如果不难，请问 百度/淘宝 的IP地址是什么？

有一天你躺在床上在QQ上和妹子聊天

  • 你的手机必须知道和这个世界上一台主机(HOST)在通信,所以你必须知道这个主机的IP地址，但是IP地址很难记。

我们需要另一种服务DNS

DNS Domain Name Service 域名服务

当你网址输入 www.taobao.com的时候，

  1. 如果计算机不知道淘宝的主页在哪里，它就会向 DNS 请求查询 taobao.com
  2. dns会返回一个IP地址给你
  3. 此时通过这个地址你就可以访问淘宝了

本地HOST

如果你本地保存有 一个淘宝的映射，那么请求taobao.com的时候，就不会去查找DNS了

mac的host文件在 /etc/hosts,当你做如下修改的时候。

1
127.0.0.1   www.taobao.com

你再次访问 taobao.com 时，会直接到 127.0.0.1

端口

一台机子有很多的端口最多有65536个端口，如 mysql 3306。

在网线上传输的数据，每一个数据的数据包里面都指定了一个端口，指名和对应的端口通信。

HTTPS协议的默认端口是 443

HTTP协议的默认端口是 80

意思就是 你输入 http://www.taobao.com 和 http://www.taobao.com:80 没区别

相似的 你输入 https://www.taobao.com 和 https://www.taobao.com:443 没区别

端口指定了你通信的主机的归属地

更进一步，为什么输入网址后能看到绚丽多彩的页面呢？

最基本的通信协议有两种

  • TCP 传输控制协议
  • UDP 用户数据包协议(http协议里一般不用，不再详述)

TCP 可以想像成一条双向的高速公路,公路上跑的是数据

TCP 是基于 Stream 流的协议

TCP 是一个 全双工协议 ，比如 打电话，双方都可以同时说话。

半双工协议——对讲机。每个时刻只有一个对讲机说话。

TCP的本质就是

定义了字节流在网络上如何发送和接收

在TCP之上的协议——HTTP HyperText Transfer Protocol

HTTP就是丰富网络世界的基石，它定义了文本之外的东西如何被传输。

  • request
  • response

一个网址如何变成美轮美奂的页面呢？

浏览器是如何工作的

当你访问 www.taobao.com 时候，响应给你如下内容，但是页面却显示的是美轮美奂的页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="renderer" content="webkit" />
<title>淘宝网 - 淘！我喜欢</title>
<meta name="spm-id" content="a21bo" />
<meta name="description" content="淘宝网 - 亚洲较大的网上交易平台，提供各类服饰、美容、家居、数码、话费/点卡充值… 数亿优质商品，同时提供担保交易(先收货后付款)等安全交易保障服务，并由商家提供退货承诺、破损补寄等消费者保障服务，让你安心享受网上购物乐趣！" />
<meta name="aplus-xplug" content="NONE">
<meta name="keyword" content="淘宝,掏宝,网上购物,C2C,在线交易,交易市场,网上交易,交易市场,网上买,网上卖,购物网站,团购,网上贸易,安全购物,电子商务,放心买,供应,买卖信息,网店,一口价,拍卖,网上开店,网络购物,打折,免费开店,网购,频道,店铺" />
<link rel="dns-prefetch" href="//ald.taobao.com" />
<link rel="dns-prefetch" href="//gw.alicdn.com" />

<div>
。。。
</div>
</body>
</html>

当浏览器看到一个标签<html lang="zh-CN">的时候，就知道这是一个文档树，它会把它解析成一颗HTML树，然后决定它如何被显示。

HTML 规定了很多东西

  • 如 link 是一个 css
  • 如 script 是一段 js

当浏览器遇到如上内容的时候，浏览器就开始解析它，每当看到一个 link 就知道要去下载这个 css ,CSS规定了页面如何渲染，比如两个按钮之间的间距，背景色。

当这个 link 解析完成之后，就去解析下一个标签。

当浏览器看到 script的时候，它就知道自己要执行一段js代码。

当浏览器看到 img的时候，它就知道去把这个图片下载下来然后把它放在页面的某个位置上去。这就是为什么你访问 www.taobao.com 的时候，会发送许多许多你不知道的请求。

因为解析 如上 文档树的时候，发现里面还有许多许多东西需要加载，于是它就循环往复这个过程发起一个请求，拿到响应，直到把所有的事情都做完

一个问题，是整个HTML下载完毕就去解析，还是来一点响应就解析一点

  • 答案是 来一点解析一点

同步加载和异步加载

  • 浏览器一次返回所有的数据
  • 浏览器返回部分数据，使用 ajax 异步加载

只要浏览器能做到的，其他代码一定能做到