深入了解输入网址到展示网站发生什么

---

前言

都说前端入门容易，但其实想做好前端会发现很多知识需要掌握的，基本有这几大块， JavaScript ， CSS ， HTML， 框架， 计算机网络， 浏览器原理， 数据结构， 前端工程化等等，每一个大块下面还有很多的小知识点。前端涉及的的知识点多，且繁杂。那么体系化就是其中学习前端一个很重要的一个要点，所以本系列的目的就是梳理每一个知识在前端体系化中的位置

每个专栏会针对一个大的结构，创建起我对前端的理解，每个专栏会首先有一张图概括当前问题，同时会挖掘出其中包含的知识点，同时会创建系列文章来对每一个知识点来详细探讨。当前这个专栏是 《深入理解从用户输入到网页显示期间发生什么？》

---

一、流程图

下图从用户输入到页面显示我们来了解这期间发生了什么

具体步骤：

1. 用户输入
2. 浏览器进程判断是否符合 URL 规则，符合的会加上协议等，进行访问，不符合的会使用默认浏览器引擎搜索，组装为完整的 URL
3. 浏览器进程把 URL请求 通过进程通信发送给网络进程。
4. 网络进程检测是否有缓存
   有缓存：判断是否过期，一般通过 Expires 和 Cache-Control这两个字段
   缓存分为强缓存和协商缓存，强缓存不会向服务器请求验证，通过上面的两个标识，如果上面两个标识过期就会向服务器验证，就是协商缓存，如果没有更新就会返回304，告诉浏览器直接使用
5. 在发送请求前就会查找是否存在主机 ip 地址，这里包含到浏览器缓存，本机缓存，hosts文件，路由器缓存，isp DNS缓存中查找
6. 如果也还是没有就会进行 DNS域名解析，浏览器解析 URL 获取到协议，主机名，端口，path等，接着会组装一个 HTTP 请求报文（带解析的域名会放在这个 DNS 请求报文里，会使用 UDP ）来获取服务器的 ip地址
7. 接着判断是否为 https ，是的话会先建立 TLS 连接
8. 不是 https 或者建立 TLS连接之后就会与服务器通过三次握手建立 TCP连接发送 HTTP请求
9. 服务器接收解析请求头的信息，将请求转发到服务程序
10. 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码
11. 处理程序读取完整请求并准备HTTP响应
12. 服务器将响应报文通过TCP连接发送回浏览器
13. 浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重用，通过四次挥手关闭TCP连接。
14. 网络进程解析响应信息，检测状态码，如果是2XX，就会继续处理请求，如果是其他就会根据响应码做相应的处理。
15. 如果为2XX，就会检测响应类型Content-Type，如果是字节流类型，则将该请求提交给下载管理器，该导航流程结束，不再进行后续的渲染，如果是html则通知浏览器进程准备渲染进程准备进行渲染。
16. 接着到浏览器分配渲染进程，检测当前的 URL 是否和之前打开的渲染进程的根域名相同，是的话会复用进程，不是的话会重新创建个新的渲染进程。
17. 渲染进程准备好后，就到了提交 “文档”。
    提交文档的文档是指网络进程返回的响应数据
    “提交文档”的消息是由浏览器进程发出的，渲染进程接收到“提交文档”的消息后，会和网络进程建立传输数据的“管道”。
18. 等文档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程。
    浏览器进程在收到“确认提交”的消息后，会更新浏览器界面状态，包括了安全状态、地址栏的URL、前进后退的历史状态，并更新Web页面。
19. 这时候完成页面的显示了

补充关于缓存那部分的处理：

二、涉及的知识点

知识点系列文章

1. 计算机基础-进程与线程以及携程
   文章介绍进程和线程以及他们的区别，以及进程间通信的方式，同时简单说了下携程。便于我们理解浏览器程序中我们打开网页，进程的表现过程。
2. HTTP1.0/1.1/2.0 的起源和区别以及HTTP协议简介
   文章介绍 HTTP 的基本知识，同时还有个个版本的区别，以及请求头 / 响应头信息。同时对状态码，请求方法做一些介绍。
3. 计算机网络-应用层的DNS与HTTP
   介绍应用层中的 DNS，以及DNS如何查询获取主机 IP ，和 ID 的缓存
4. 简单趣味理解HTTPS为什么安全
   介绍为什么需要 HTTPS ，以及HTTPS 如何实现安全传输。
5. 计算机网络-运输层（UDP/TCP协议）
   这篇介绍到的内容就很多了，包含面试常问的UTP和TCP他们的区别，以及我们网络中的核心 TCP协议，涵盖三次握手和四次挥手，TCP实现可靠传输等问题。

---

三、总结

每一篇文章仅仅代表当前我的认识，如有疏漏非常感谢大佬们指出，感激不尽！！！同时我自身也会去不断的完善和补充每一篇文章的内容！！