从输入 URL 到页面展示发生了什么事情

这是一道经典的前端面试题，在学习的过程中，我想如果通过自己的语言来描述出来印象会更加深刻。

什么是URL

URL(Uniform / Universal Resource Locator)统一资源定位符，如同在网络上的门牌，是因特网上标准的资源的地址。
URL的标准格式如下：
协议类型://服务器地址（必要时需加上端口号）/路径/文件名

例如：http://www.jianshu.com/users/78757d5285cd/timeline
协议：http
网络地址：www.jianshu.com
资源路径：users/78757d5285cd/timeline

流程

1. 浏览器中输入URL并回车

2. 浏览器查找域名的IP地址

1. 浏览器缓存 – 浏览器会缓存DNS记录一段时间
2. 系统缓存 - 从 Hosts 文件查找是否有该域名和对应 IP。
3. 路由器缓存 – 一般路由器也会缓存域名信息。
4. ISP DNS 缓存（互联网服务提供商的DNS缓存） – 比如到电信的 DNS 上查找缓存。
5. 如果都没有找到，则向根域名服务器查找域名对应 IP，根域名服务器把请求转发到下一级，直到找到 IP

3. 浏览器发送一个HTTP请求到web服务器

4. 服务器处理

• 常见的 web服务器有 Apache、Nginx、IIS、Lighttpd

• web服务器接收用户的Request 交给网站代码，或者接受请求反向代理到其他 web服务器

  
  
  

  web服务器.png

5. 网站处理

Paste_Image.png

URL中的文件地址部分经过服务器上的路由程序重定向到对应的控制器(controller)对象,控制器对象根据URL中指定的操作执行相关的逻辑并调用目标数据的模型(Model)对象,模型对象与数据库交互完成目标操作后,控制器将模型中反馈的数据填充到视图中。
视图部分(通常是HTML页面)作为HTTP响应发送到浏览器端。

6. 浏览器处理

HTML字符串被浏览器接受后被一句句读取解析
解析到link 标签后重新发送请求获取css
解析到 script标签后发送请求获取 js，并执行代码
解析到img 标签后发送请求获取图片资源

7. 绘制网页

将渲染好的页面图像显示出来，并开始响应用户的操作。

以上只是一个简单的流程，过程中还会涉及到很多问题。