输入URI，按下回车发生了什么？

当咱们输入URL，按下回车发生了什么？ 这个题目很俗套- -可是是面试常常出现的题目了。今天听尼古拉斯•屌•大斌哥介绍关于从URI到浏览器呈现给咱们页面发生了什么。感受收获颇多。索性就翻阅了一些其余资料。在此总结下。这一夜也算是没白白浪费。

当咱们输入URL，发生了什么？

用一个例子来讲明把。当咱们打开 https://datura900607.github.io/home-automation/  这个网页的时候发生了什么？

经过URI定位到主机。

当咱们在浏览器输入url后，浏览器经过DNS服务器，将网站中的URl中的主机域名解析为，web服务器中所对应的IP地址。顺序差很少是：

• 先在浏览器缓存中查询，若是浏览器缓存中有就直接使用。
• 浏览器缓存中找不到 在系统缓存中查询。
• 系统缓存中没有在路由器缓存中查询。
• 路由器找不到在web服务器中查询，直到找到这个IP地址。

打包HTTP请求

好了,通过一番查询，咱们找到了我家居网站的IP地址：151.101.100.133:443 这是咱们打包的HTTP请求：

 

经过TCP协议，向服务器发送请求

经过TCP协议与Web服务器建立链接。(俗称三次握手)，向服务器发送请求

web服务器接收请求，交给相关进程处理

这里要根据后台语言不一样而分状况处理，我这个是HTML类型文件。web服务器接收请求后 找到服务器上相对应的html文件(通常是index.html)
若是后台语言是PHP类型，则web服务器在接收到用户的请求后将请求转交给PHP应用服务器来处理，（web服务器自己不能处理PHP动态语言文件）

服务器响应请求，经过TCP协议回传响应

这里由于此家居网站就是一个静态HTML。就直接找到HTML文件就会经过TCP协议回传了。若是是php文件。则还须要PHP应用服务器将PHP文件，翻译成HTML静态代码，传回Web服务器，而后再经过TCP协议回传响应。这是回传的响应head截图

 

浏览器接收响应，开始下载并渲染，将页面呈如今咱们面前

1. 解析HTML生成DOM树，
2. 解析CSS文件生成CSSOM树，并解析Javascript代码
3. CSS和DOM组合造成渲染树，
4. 进行布局，在浏览器中绘制渲染树中节点的属性(位置，宽度，大小等)
5. 绘制元素，绘制各个节点的可视属性(颜色背景等，此时可能会造成多个图层)
6. 合并图层，将页面呈现给用户面前