URL到整个页面加载完毕显示在屏幕上的整个流程

URL到整个页面加载完毕显示在屏幕上的整个流程

1. 输入地址
2. 浏览器查找域名的IP地址
3. 浏览器向web服务器发送一个http请求
4. 服务器的永久重定向响应
5. 浏览器跟踪重定向地址
6. 服务器处理请求
7. 服务器返回一个Http响应
8. 浏览器显示HTML
9. 浏览器发送请求获取嵌入在HTML中的资源（图片、音频、视频、css、js等）

1.输入地址

当我们输入网站地址的时候，浏览器就开始智能匹配的url，他会从我们的历史记录，书签等地方去查询我们可能会输入的url，然后显示出来

2.浏览器查找域名的IP地址

1. 请求一旦发起，浏览器首先解析这个域名，一般先查看本地的hosts文件，如果有和查找域名相对应，就直接返回hosts文件里的ip地址
2. 如果没有在hosts文件里面找到对应的ip地址，浏览器就发请求本地的DNS服务器（本地的DNS服务器一般是网络接入服务器供应商提供，比如中国电信和中国移动）
3. DNS请求到达本地DNS服务器后，本地DNS服务器先递归查询自己的缓存，如果缓存里有该记录，则直接返回结果。如果没有，需要向DNS根服务器查询
4. 根DNS服务器并没有记录具体的域名和IP地址对应关系，而是告诉本地DNS服务器去哪个域服务器查询，返回该域服务器的地址。这是一个迭代过程
5. 本地DNS服务器继续先域服务器发送请求，域服务器收到请求后也不是返回域名和ip地址对应关系，而是返回域名的解析服务器的地址给本地DNS服务器
6. 最后，本地DNS服务器向域名的解析服务器发出请求，这时就可以收到一个域名和IP地址对应关系，本地DNS不仅要把IP地址返回给电脑，还要将这个对应关系保存在缓存中，以便下次用户查询可以加快网络访问

3.浏览器向Web服务器发送一个HTTP请求

拿到域名对应的IP地址后，浏览器会向服务器发起TCP连接请求，建立TCP/IP连接，这个过程涉及到三次握手

4.服务器的永久重定向

服务器会给浏览器响应一个301永久重定向的响应，这样浏览器就会访问“http://www.baidu.com/” 而非“http://baidu.com/”。

涉及到引擎排名，一个页面有两个地址，搜索引擎会认为有两个网站，造成搜索链接减少从而降低排名，重定向可以把两个地址归到同一个网站排名下

拓展：

1. 301,302都代表重定向，301代表旧地址已经被永久的移除了（旧地址上的资源不可再访问），30代表临时重定向（旧地址资源还是可以访问的）

2. 重定向原因：

   1. 网站结构调整
   2. 网页被移到新地址
   3. 网页拓展名改变

3. 什么时候进行301或302跳转

   如果只是临时移动到一个新位置可以使用302，如果是永久性重定向就要使用301

   301跳转场景

   • 域名到期不想续费，想换个域名
   • 在搜索引擎的搜索结果中出现了不带www的域名，而带www的域名却没有收录，这个时候可以用301重定向来告诉搜索引擎我们目标的域名是哪一个。

5.浏览器跟踪重定向地址

浏览器对正确的地址发起http请求

6.服务器处理请求

后端从在固定的端口接收到TCP报文开始，它会对TCP连接进行处理，对HTTP协议进行解析，并按照报文格式进一步封装成HTTP Request对象，供上层使用。

当有多个服务器的时候可以使用Nginx，先请求到Nginx，Nginx再请求应用服务器，然后将结果返回给客户端，这里Nginx的作用是反向代理服务器。同时也带来了一个好处，其中一台服务器万一挂了，只要还有其他服务器正常运行，就不会影响用户使用。

7.返回一个HTTP响应

响应主要有三部分组成，响应行，响应头，响应正文

响应行返回，协议版本，状态描述，状态代码

具体一些状态码

8.浏览器显示HTML

浏览器在还没有完全接受全部HTML文档时，就开始渲染页面

webkit渲染过程

解析html构建dom树 —> 构建render树 —>布局render树 —> 绘制render树

浏览器首先会解析HTML文件和构建DOM树，然后解析CSS生成render树，渲染完后开始布局渲染树并绘制到屏幕上，涉及到重排重绘

性能优化：细说浏览器渲染的重排与重绘

9.浏览器发送请求获取嵌入在 HTML 中的资源（如图片、音频、视频、CSS、JS等等）

在显示HTML时，往往需要获取其他地址内容标签，这些地址都要经历一个和HTML读取类似的过程。所以浏览器会在DNS中查找这些域名，发送请求，重定向等等…

参考文献

https://www.cnblogs.com/xianyulaodi/p/6547807.html#_label3