手记

用户打开浏览器,输入 baidu.com,页面展示百度首页。整个过程发生了什么?

这个过程大致流程总结如下:

  1. 输入baidu.com,回车

  2. 域名解析

  3. 浏览器与服务器建立连接

  4. web浏览器发送HTTP请求

  5. web服务器处理请求并返回HTTP响应

  6. 浏览器接收HTTP响应

  7. 浏览器渲染页面

1 输入baidu.com,回车

2 域名解析

域名系统(英文:Domain Name System,缩写:DNS)是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库,能够使人更方便地访问互联网。  ——维基百科

浏览器首先按以下顺序检查缓存中的DNS记录,如果存在即返回对应的IP

  1. 浏览器缓存

  2. 系统缓存(hosts文件)

  3. 路由器缓存

  4. ISP缓存

如果请求的URL不在缓存中,本地域名服务器会向根域名服务器发送一个请求。如果不存在,转发给下一级查询,顺序如下:

  1. 根域名服务器

  2. COM顶级域名服务器

  3. baidu.com域名服务器

域名解析

3 浏览器与服务器建立连接

一旦浏览器收到正确的IP地址,它将与服务器建立TCP连接。使用称为TCP/IP三次握手的过程建立此连接以进行数据传输。

三次握手

4 浏览器发送HTTP请求

建立TCP连接后,就可以开始传输数据了。浏览器将发送HTTP请求。

baidu.com HTTP请求报文

5 服务器处理HTTP请求

web服务器接收HTTP请求,由控制层处理逻辑,从数据库取得模型,视图层组装页面,返回HTTP响应


MVC

6 服务器返回HTTP响应

HTTP响应

状态码:

  • 1xx 指示信息–表示请求已接收,继续处理。

  • 2xx 成功–表示请求已被成功接收、理解、接受。

  • 3xx 重定向–要完成请求必须进行更进一步的操作。

  • 4xx 客户端错误–请求有语法错误或请求无法实现。

  • 5xx 服务器端错误–服务器未能实现合法的请求。

7 浏览器渲染页面

浏览器至上而下解析HTML字符串,碰到link,src,img等外部资源时发起请求加载静态资源并缓存。但是碰到一般的Js会挂起渲染过程等待下载并执行完毕。
浏览器根据HTML和CSS计算得到模型树,绘制到屏幕上。


WebKit渲染过程



作者:饥人谷_chen
链接:https://www.jianshu.com/p/97974d29940a


4人推荐
随时随地看视频
慕课网APP