当先锋百科网

首页 1 2 3 4 5 6 7

当我们输入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. 合并图层,将页面呈现给用户面前

转载于:https://www.cnblogs.com/zuoci/p/7248755.html