页面加载过程解析

1. 资源组成:

• 一个html页面由html、css、js、图片、文本、等静态资源组成.
• 是通过http/https从服务器拿过来的资源.

2. 一个请求url资源加载过程:

• 第一步:url解析 a. 提取出相关信息.
• 第二步:DNS查询 a. 拿到上面得到的域名去DNS查询对应的IP.
• 第三步:资源请求 a. 带着所有信息去这个IP地址上请求资源,再把服务器返回的资源下载下来.
• 第四步:浏览器解析 a. 浏览器根据不同的类型做不同方式的解析.

3. url结构解析:

http://www.test.com:80/list?id=1#title

①. 组成:
   协议  +      域名     +  端口  +  路径  +  参数  +  哈希
   http     www.test.com     80      list     id=1    #title

②. 协议:
   如http、https、ftp

③. 域名 + 端口:
   a. 域名可以查找服务器位置(相当于房子).
   b. 端口类似房子的门.有默认端口,如http为80.

④. 路径:
   a. 服务器接到请求后,根据路径去定位资源的位置.
   b. 如:list在nginx上找到一个规则找到对应的资源.

⑤. 参数:
   a. 用来传递请求资源的特点,表示要查询id为1的数据.

⑥. 哈希:
   a. 前端页面的锚点,用于标记页面位置,对于后端作用不大.

4. DNS查询:

• DNS查询的过程: a. 在互连网,资源都是用ip地址来定位的,先要把域名转化为ip地址. b. 在做DNS查询时,浏览器传过去一个要解析的域名,经过DNS查询,这个域名会对应一个IP地址.
• DNS缓存的位置: a. DNS缓存有很多地方,如浏览器、路由器、DNS服务器,根据不同的网络层级. b. DNS缓存的时间也不一样,一般越靠近用户的节点缓存的时间越短.

(1). DNS优化:

<link rel="dns-prefetch" href="//test.com">

a. 在页面一加载时,就会立刻将href指向的域名做DNS查询并且缓存起来.
b. 等到真正请求域名资源时,可以省去了DNS查询的时间.从而提高页面的加载速度.