复习：从输⼊⽹址到页⾯显⽰的详细过程（超详细）
从输⼊⽹址到页⾯显⽰的详细过程：这是⼀道我们熟知的⾯试题，每次⾯试前都要复习⼀下。但其实不⽌是应付⾯试，这些知识对于我们前端成长的道路⾮常重要。下⾯我就给⼤家具体讲解⼀下经过了哪些步骤。做全⽹最全⾯的总结！
前⾔
⾸先，先简单总结⼀下⼤概过程，然后再进⾏详细解释，包括相关的⼀些技术的讲解。
⼤概过程总结
1、输⼊⽹址
2、DNS解析
3、建⽴tcp连接
4、客户端发送HTPP请求
5、服务器处理请求　
6、服务器响应请求
7、浏览器展⽰HTML
8、浏览器发送请求获取其他在HTML中的资源。
OSI七层模型
咱们前端就只需要关注⾯向⽤户的 应⽤层，表⽰层，会话层 就够了！
1.总体层⾯
1. 输⼊地址
当我们开始在浏览器中输⼊⽹址的时候，浏览器其实就已经在智能的匹配可能得 url 了，他会从历史记录，书签等地⽅，到已经输⼊的字符串可能对应的 url，然后给出智能提⽰，让你可以补全url地址。
2. DNS解析
⾸先我们要知道，所有要上线的⽹站都不能直接暴露ip地址，都要设置⼀个域名来映射⾃⼰的ip地址。 那么当我们输⼊⽹址，也就是域名的时候，是需要⼀个⽅法来将域名转换成ip地址的，这样才能访问ip
地址对应的电脑上的部署的⽹站。
域名与ip地址通过DNS进⾏转换。DNS（域名系统）是互联⽹的⼀项服务，它作为将域名和IP地址相互映射的⼀个分布式数据库，能够使⼈更⽅便地访问互联⽹。
那么DNS解析域名的过程是啥呢？
浏览器缓存>> 本地dns（通信运⾏商机房）根dns》顶级域名服务器》权威域名服务器
1. ⼀般来说，浏览器会⾸先查看本地硬盘的 hosts ⽂件，看看其中有没有和这个域名对应的规则，如果有的话就直接使⽤ hosts ⽂件⾥
⾯的ip 地址。
2. 如果在本地的 hosts ⽂件没有能够到对应的 ip 地址，浏览器会发出⼀个 DNS请求到本地DNS服务器 。本地DNS服务器⼀般都是
你的⽹络接⼊服务器商提供，⽐如中国电信，中国移动。
3. 查询你输⼊的⽹址的DNS请求到达本地DNS服务器之后，本地DNS服务器会⾸先查询它的缓存记录，如果缓存中有此条记录，就可以
直接返回结果，此过程是递归的⽅式进⾏查询。如果没有，本地DNS服务器还要向DNS根服务器进⾏查询。
4. 根DNS服务器没有记录具体的域名和IP地址的对应关系，⽽是告诉本地DNS服务器，你可以到域服务器上去继续查询，并给出域服务
器的地址。这种过程是迭代的过程。
5. 本地DNS服务器继续向域服务器发出请求，在这个例⼦中，请求的对象是域服务器。域服务器收到请求之后，也不会直接
返回域名和IP地址的对应关系，⽽是告诉本地DNS服务器，你的域名的解析服务器的地址.
6. 最后，本地DNS服务器向域名的解析服务器发出请求，这时就能收到⼀个域名和IP地址对应关系，本地DNS服务器不仅要把IP地址返
回给⽤户电脑，还要把这个对应关系保存在缓存中，以备下次别的⽤户查询时，可以直接返回结果，加快⽹络访问。
3、建⽴TCP链接
在拿到域名对应的IP地址后，会以随机端⼝（1024~~65535）向WEB服务器程序80端⼝发起TCP的连接请求，这个连接请求进⼊到内核的TCP/IP协议栈（⽤于识别该连接请求，解封包，⼀层⼀层的剥开），还有可能要经过Netfilter防⽕墙（属于内核的模块）的过滤，最终到达WEB程序，最终建⽴了TCP/IP的连接，对于客户端与服务器的TCP链接，必然要说的就是『三次握⼿』。       
客户端发送⼀个带有SYN标志的数据包给服务端，服务端收到后，回传⼀个带有SYN/ACK标志的数据包以⽰传达确认信息，最后客户端再回传⼀个带ACK标志的数据包，代表握⼿结束，连接成功。
通俗化之后就是：
客户端：⽼弟我要跟你链接
服务端：好的，同意了
客户端：好嘞
4、游览器向WEB服务器发起Http请求
建⽴TCP连接之后，发起HTTP请求，请求⼀般分为三部分
请求⽅法URI协议/版本
请求头(Request Header)
请求正⽂
5、服务器端处理
服务器端收到请求后的由web服务器（准确说应该是http服务器）处理请求，诸如Apache、Ngnix、IIS
等。web服务器解析⽤户请求，知道了需要调度哪些资源⽂件，再通过相应的这些资源⽂件处理⽤户请求和参数，并调⽤数据库信息，最后将结果通过web服务器返回给浏览器客户端。
6、关闭TCP链接
为了避免服务器与客户端双⽅的资源占⽤和损耗，当双⽅没有请求或响应传递时，任意⼀⽅都可以发起关闭请求。与创建TCP连接的3次握⼿类似，关闭TCP连接，需要4次挥⼿。
通俗化表达就是：
客户端：⽼弟，我这边没数据要传了，咱们关闭链接吧
服务端：好的，接收到了，我看看我这边还有没有要传的
服务端：我这边也没有了，关闭吧
客户端：好嘞
7、游览器解析资源
对于获取到的HTML、CSS、JS、图⽚等等资源。
浏览器通过解析HTML，⽣成DOM树，解析CSS，⽣成CSS规则树，然后通过DOM树和CSS规则树⽣成渲染树。渲染树与DOM树不同，渲染树中并没有head、display为none等不必显⽰的节点。
在解析CSS的同时，可以继续加载解析HTML，但在解析执⾏JS脚本时，会停⽌解析后续HTML，这就会出现阻塞问题，关于JS阻塞相关问题，这⾥不过多阐述，后⾯会单独开篇讲解。
8、游览器布局渲染
根据渲染树布局，计算CSS样式，即每个节点在页⾯中的⼤⼩和位置等⼏何信息。HTML默认是流式布局的，CSS和js会打破这种布局，改变DOM的外观样式以及⼤⼩和位置。这时就要提到两个重要概念：repaint和reflow。
repaint：屏幕的⼀部分重画，不影响整体布局，⽐如某个CSS的背景⾊变了，但元素的⼏何尺⼨和位置不变。
reflow： 意味着元件的⼏何尺⼨变了，我们需要重新验证并计算渲染树。是渲染树的⼀部分或全部发⽣了变化。这就是Reflow，或是Layout。
有些情况下，⽐如修改了元素的样式，浏览器并不会⽴刻 reflow 或 repaint ⼀次，⽽是会把这样的操作积攒⼀批，然后做⼀次 reflow，这⼜叫异步 reflow 或增量异步 reflow。
有些情况下，⽐如 resize 窗⼝，改变了页⾯默认的字体等。对于这些操作，浏览器会马上进⾏ reflow。
2.浏览器架构层⾯
浏览器架构知识：
在讲浏览器架构之前，先理解两个概念，进程和线程。
进程（process）是程序的⼀次执⾏过程，是⼀个动态概念，是程序在执⾏过程中分配和管理资源的基本单位，线程（thread）是CPU调度和分派的基本单位，它可与同属⼀个进程的其他的线程共享进程所拥有的全部资源。
简单的说呢，进程可以理解成正在执⾏的应⽤程序，⽽线程呢，可以理解成我们应⽤程序中的代码的执⾏器。⽽他们的关系可想⽽知， 线程是跑在进程⾥⾯的，⼀个进程⾥⾯可能有⼀个或者多个线程，⽽⼀个线程，只能⾪属于⼀个进程。
⼤家都知道，浏览器属于⼀个应⽤程序，⽽应⽤程序的⼀次执⾏，可以理解为计算机启动了⼀个进程，进程启动后，CPU会给该进程分配相应的内存空间，当我们的进程得到了内存之后，就可以使⽤线程进⾏资源调度，进⽽完成我们应⽤程序的功能。
⽽在应⽤程序中，为了满⾜功能的需要，启动的进程会创建另外的新的进程来处理其他任务，这些创建出来的新的进程拥有全新的独⽴的内存空间，不能与原来的进程内向内存，如果这些进程之间需要通信，可以通过IPC机制（Inter Process Communication）来进⾏。
不同的浏览器使⽤不同的架构，下⾯主要以Chrome为例，介绍浏览器的多进程架构。
在Chrome中，主要的进程有4个：
浏览器进程 (Browser Process)：负责浏览器的TAB的前进、后退、地址栏、书签栏的⼯作和处理浏览器的⼀些不可见的底层操作，⽐如⽹络请求和⽂件访问。
渲染进程 (Renderer Process)：负责⼀个Tab内的显⽰相关的⼯作，也称渲染引擎。
插件进程 (Plugin Process)：负责控制⽹页使⽤到的插件
网页html下载GPU进程 (GPU Process)：负责处理整个应⽤程序的GPU任务
下⾯开始分析键⼊url到页⾯展⽰的流程：
这个过程主要依靠三个进程的配合：浏览器进程， ⽹络进程，渲染进程。
浏览器进程： 主要负责⽤户交互，⼦进程管理和⽂件储存等功能。
⽹络进程： ⾯向渲染进程和浏览器进程等提供⽹络下载功能。
渲染进程： 把从⽹络下载的 HTML、JavaScript、CSS、图⽚等资源解析为可以显⽰和交互的页⾯。
整个过程主要有以下⼏个步骤：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。