开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第4天，点击查看活动详情
从输入URL到页面展示发生了什么（偏前端）
相信大家对这个问题也不陌生，或多或少都在面试中遇到过。
这个问题为什么这么经典，是因为这个问题的考察的非常全面，从浏览器原理，到网络协议等等
大家也应该看过其它非常优秀去讲解原理的文章，这里我就不班门弄斧了
我主要从如何帮助大家更好的在面试的过程中去说出自己的理解，当然，大家如果有自己的理解则更佳
考察全面的好与坏
为什么会说考察的全面是有好和坏的呢？
当然，如果你对其中的知识点掌握的非常熟悉，那对于你来说，本文的内容你权当儿戏即可。
对于初学者，非科班出生的朋友来说，知识点太多，范围太大，很难去理解一些不太熟悉的方面，这是考察全面的不好之处，但是你对于其中一个知识点比较了解，再碰上面试官对这个知识点感兴趣，那这其实是你的大优势。
我的回答 （仅供参考）
-
在地址栏输入url按下回车之后，首先会进入DNS解析，找到这个url的域名
-
检查浏览器是否有缓存，如果命中强缓存，则直接读取本地资源，如果没有命中强缓存的话，会先建立TCP连接，查询是否需要更新资源，也就是协商缓存
-
通过三次握手，建立TCP连接，三次握手简单理解：
客户端发送 -syn报文-> 服务器接收 //客户端对服务器说：听得到吗？
服务器发送 -syn报文-ack报文-> 客户端接收 //服务器对客户端说：听到了，你能听到我说话吗？
客户端发送 -ack报文-> 服务器接收 //客户端对服务器说：okok，我们开始聊正事吧
-
发送HTTP/HTTPS请求，去获取html页面
-
服务器处理请求，返回http报文
-
浏览器下载数据，开始解析html，构建DOM树，解析CSS，构建CSS规则树，然后根据DOM树和CSS规则树来构造Render Tree 渲染树，然后进入布局阶段，遍历渲染树，绘制出整个页面
-
浏览器开始执行js脚本，发送ajax请求获取数据，处理事件循环等异步逻辑
-
最后进行四次挥手，关闭TCP连接，简单理解：
（客户端 或者服务器先发起都可以，我以客户端发起作为例子）
客户端发送 -fin报文-> 服务器接收 //客户端对服务器说：再见！
服务器发送 -ack报文-> 客户端接收 //服务器对客户端说：听到了
服务器发送 -fin报文-> 客户端接收 //服务器对客户端说：再见！
客户端发送 -ack报文-> 服务器接收 //客户端对服务器说：ok，听到了
最后
以上这就些就是我在面试中对于这个问题的回答示范，由于自己是对TCP协议，强缓存，协商缓存，事件循环机制，浏览器渲染比较了解，所以个人会在这方面多说一些
大家也可以根据自己的优势的方面多去展示自己的理解
文中如果有不足之处，欢迎指出
