前言
都说前端入门容易，但其实想做好前端会发现很多知识需要掌握的，基本有这几大块， JavaScript ， CSS ， HTML， 框架， 计算机网络， 浏览器原理， 数据结构， 前端工程化等等，每一个大块下面还有很多的小知识点。前端涉及的的知识点多，且繁杂。那么体系化就是其中学习前端一个很重要的一个要点，所以本系列的目的就是梳理每一个知识在前端体系化中的位置
每个专栏会针对一个大的结构，创建起我对前端的理解，每个专栏会首先有一张图概括当前问题，同时会挖掘出其中包含的知识点，同时会创建系列文章来对每一个知识点来详细探讨。当前这个专栏是 《深入理解从用户输入到网页显示期间发生什么？》
一、流程图
下图从用户输入到页面显示我们来了解这期间发生了什么
具体步骤：
- 用户输入
- 浏览器进程判断是否符合 URL 规则，符合的会加上协议等，进行访问，不符合的会使用默认浏览器引擎搜索，组装为完整的 URL
- 浏览器进程把 URL请求 通过进程通信发送给网络进程。
- 网络进程检测是否有缓存
有缓存：判断是否过期，一般通过 Expires 和 Cache-Control这两个字段
缓存分为强缓存和协商缓存，强缓存不会向服务器请求验证，通过上面的两个标识，如果上面两个标识过期就会向服务器验证，就是协商缓存，如果没有更新就会返回304，告诉浏览器直接使用 - 在发送请求前就会查找是否存在主机 ip 地址，这里包含到浏览器缓存，本机缓存，hosts文件，路由器缓存，isp DNS缓存中查找
- 如果也还是没有就会进行 DNS域名解析，浏览器解析 URL 获取到协议，主机名，端口，path等，接着会组装一个 HTTP 请求报文（带解析的域名会放在这个 DNS 请求报文里，会使用 UDP ）来获取服务器的 ip地址
- 接着判断是否为 https ，是的话会先建立 TLS 连接
- 不是 https 或者建立 TLS连接之后就会与服务器通过三次握手建立 TCP连接发送 HTTP请求
- 服务器接收解析请求头的信息，将请求转发到服务程序
- 服务器检查HTTP请求头是否包含缓存验证信息如果验证缓存新鲜，返回304等对应状态码
- 处理程序读取完整请求并准备HTTP响应
- 服务器将响应报文通过TCP连接发送回浏览器
- 浏览器接收HTTP响应，然后根据情况选择关闭TCP连接或者保留重用，通过四次挥手关闭TCP连接。
- 网络进程解析响应信息，检测状态码，如果是2XX，就会继续处理请求，如果是其他就会根据响应码做相应的处理。
- 如果为2XX，就会检测响应类型Content-Type，如果是字节流类型，则将该请求提交给下载管理器，该导航流程结束，不再进行后续的渲染，如果是html则通知浏览器进程准备渲染进程准备进行渲染。
- 接着到浏览器分配渲染进程，检测当前的 URL 是否和之前打开的渲染进程的根域名相同，是的话会复用进程，不是的话会重新创建个新的渲染进程。
- 渲染进程准备好后，就到了提交 “文档”。
提交文档的文档是指网络进程返回的响应数据
“提交文档”的消息是由浏览器进程发出的，渲染进程接收到“提交文档”的消息后，会和网络进程建立传输数据的“管道”。 - 等文档数据传输完成之后，渲染进程会返回“确认提交”的消息给浏览器进程。
浏览器进程在收到“确认提交”的消息后，会更新浏览器界面状态，包括了安全状态、地址栏的URL、前进后退的历史状态，并更新Web页面。 - 这时候完成页面的显示了
补充关于缓存那部分的处理：
二、涉及的知识点
知识点系列文章
- 计算机基础-进程与线程以及携程
文章介绍进程和线程以及他们的区别，以及进程间通信的方式，同时简单说了下携程。便于我们理解浏览器程序中我们打开网页，进程的表现过程。 - HTTP1.0/1.1/2.0 的起源和区别以及HTTP协议简介
文章介绍 HTTP 的基本知识，同时还有个个版本的区别，以及请求头 / 响应头信息。同时对状态码，请求方法做一些介绍。 - 计算机网络-应用层的DNS与HTTP
介绍应用层中的 DNS，以及DNS如何查询获取主机 IP ，和 ID 的缓存 - 简单趣味理解HTTPS为什么安全
介绍为什么需要 HTTPS ，以及HTTPS 如何实现安全传输。 - 计算机网络-运输层（UDP/TCP协议）
这篇介绍到的内容就很多了，包含面试常问的UTP和TCP他们的区别，以及我们网络中的核心 TCP协议，涵盖三次握手和四次挥手，TCP实现可靠传输等问题。
三、总结
每一篇文章仅仅代表当前我的认识，如有疏漏非常感谢大佬们指出，感激不尽！！！同时我自身也会去不断的完善和补充每一篇文章的内容！！
3340
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
