彻底理解从输入URL与页面展现

 阅读约 9 分钟

流程概述:

地址栏输入URL ——> 域名解析 ——> 服务器处理请求 ——> 浏览器处理响应 ——> 浏览器绘制网页

一.地址栏输入URL

认识URL

clipboard.png

URL定义:
(Uniform Resource Locator),统一资源定位符,用于定位互联网上的资源,实际上就是网站网址。

URL与URI:URI 属于 URL 更低层次的抽象,是一种字符串文本标准。就是说,URI 属于父类,而 URL 属于 URI 的子类。URL 是 URI 的一个子集。二者的区别在于,URI 表示请求服务器的路径,定义这么一个资源。而 URL 同时说明要如何访问这个资源(http://)。

URL标准格式:
URL由三部分组成:资源类型、存放资源的主机域名、资源文件名。

scheme://host.domain[:port]/path/filename
  • scheme - 定义因特网服务的类型。最常见的类型是 http、https、ftp等。

  • host - 定义域主机(省略时取默认值,http/https的默认主机是www)

  • domain - 定义因特网域名,比如w3school.com.cn

  • :port - 定义主机上的端口号(省略时取默认值,http的默认端口号是80)

  • path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)

  • filename - 定义文档/资源的名称

例如,我的segmentfault个人主页为 https://segmentfault.com/u/je... ,其中,https表示与web服务器通讯采用https协议,segmentfault的web服务器域名为www.segmentfault.com,省略了域主机host(www),端口号取了默认值80,/u指定了我的个人主页在服务器上的存放路径,/jerry_fe指定了我的个人主页在服务器中的文档名称。

端口号的存在意义:
一台主机常常会同时作为Web、FTP等服务器,端口编号用来告诉web服务器所在的主机要将请求交给哪个服务器。默认情况下http服务的端口为80,不需要在url中输入,如果web服务器采用的不是这一个默认端口,就需要写明服务器所用的端口。常见的协议默认端口如下:

协议类型 默认端口
http 80
ftp 21
https 443
telnet 23

认识IP地址

每个抛头露面的域名背后总有一个低调内敛的IP。
IP是因特网中每台计算机为实现相互通信而遵循的规则协议。每个处于互联网中的设备都有IP地址,每个网站就是靠服务器的IP地址来定位的。

域名可以理解成“为了方便记忆而为IP地址起的一个小名”,人们使用域名来登录网站,每个域名背后有对应的IP地址。

例如segmentfault的URL为https://segmentfault.com,其域名为 segmentfault.com,其实浏览器并不知道segmentfault.com是什么,要访问该网站,就需要查找segmentfault.com域名所代表的IP地址(即segmentfault网站服务器的IP地址),这个查找的过程即为域名解析

二.域名解析

域名解析是一个层级查找的过程:
查找浏览器缓存 ——> 查找操作系统缓存 ——> 查找路由器缓存 ——> 查找本地DNS缓存 ——> 递归查询
(DNS:域名和IP地址相互映射的一个分布式数据库)

具体来说:

  1. 查找浏览器缓存
    浏览器查找缓存中是否之前解析过并缓存了这个域名的IP地址。
    如果有,浏览器获得该IP,解析过程结束,如果没有,继续查找操作系统缓存。

  2. 查找操作系统缓存
    浏览器查找操作系统hosts文件中是否有目标域名和对应的IP地址。
    如果有,浏览器获得该IP,解析过程结束,如果没有,继续查找路由器缓存。

  3. 查找路由器缓存
    浏览器在路由器缓存中查找,路由器一般会有自己的DNS缓存。
    如果有,浏览器获得该IP,解析过程结束,如果没有,继续查找本地DNS缓存。

  4. 查找本地DNS缓存
    网络配置中都会有"DNS服务器地址"这一项,浏览器会把这个域名发送给这里设置的DNS服务器,也就是本地区的域名服务器,通常是提供给你接入互联网的应用提供商。114.114.114.114是国内移动、电信和联通通用的DNS。
    如果有,浏览器获得该IP,解析过程结束,如果没有,继续进行递归查找。

  5. 递归查找

    • 本地DNS服务器将目标域名转发到互联网上的根域

    • 根域将所要查询域名中的顶级域(比如www.baidu.com的顶级域就是com)的服务器IP地址返回给本地DNS。

    • 本地DNS根据返回的顶级域IP地址,向顶级域服务器发送目标域名,顶级域服务器再将域名中的二级域(比如www.baidu.com的二级域为baidu.com)的服务器IP地址返回给本地DNS。

    • 本地DNS根据返回的二级域IP地址,向二级域服务器发送目标域名,重复这样的过程,直到本地DNS获得完整的服务器IP地址,并返回给浏览器。
      下图展示了完整的递归查询过程:

    clipboard.png

浏览器获得完整的服务器IP地址后,域名解析环节完成。之后,浏览器通过IP地址查找到对应的服务器,并将用户发起的http请求发送给服务器。

三.服务器处理请求

服务器上安装了处理http请求的应用 —— web server,常见的web server产品有apache、nginx、IIS、Lighttpd等。

当web server接收到一个HTTP请求(request),会结合配置文件,把不同请求委托给服务器上处理对应请求的程序进行处理(例如CGI脚本、JSP脚本、servlets、ASP脚本、服务器端JavaScript、或者一些其它的服务器端技术等)。不管是哪种脚本,这些服务器端(server-side)程序都会产生一个http响应(response),例如送回一个HTML页面,来让浏览器可以展现。

完成处理过程的代码框架,大部分是按照MVC设计模式搭建的,实际处理过程如下图:

clipboard.png

MVC的处理过程是这样的:每个用户输入的请求,首先被控制器(C)接收,控制器决定用哪个模型(M)来处理,然后模型用业务逻辑来处理用户的请求,再然后控制器决定用哪个视图模型(V)来接收模型处理后的数据,最后由该视图模型对应的视图格式化模型来返回HTML字符串给浏览器。

四.浏览器处理响应

浏览器接收到后台返回的HTML字符串后,会依次经历:加载、解析、渲染。

  • 加载
    浏览器对一个html页面的加载顺序是从上而下的。
    当加载到外部css文件、图片等资源,浏览器会再发起一次http请求,来获取外部资源。
    当加载到js文件,html文档会挂起渲染(加载解析渲染同步)的线程,等待js文件加载、解析完毕才可以恢复html文档的渲染线程。

  • 解析
    解析文档是指将文档转化成为有意义的代码。
    HTML解析得到的是DOM树,也称节点树,如下图:

clipboard.png

css解析得到的是样式表对象,如下图:

clipboard.png

js是一种动态语言,无需编译,其解析过程即为其“预编译”、“预处理”过程。
深入理解浏览器的解析过程,请参阅[浏览器的工作原理:新式网络浏览器幕后揭秘][2]
  • 渲染
    构建渲染树的过程,就是将DOM树进行可视化表示。构建这棵树是为了以正确的顺序绘制文档内容。

五.浏览器绘制网页

绘制过程主要是html(结构)与css(样式)的结合,以及js(行为)动态效果的展现。
css是通过选择器与html结合的,html自身不带有任何样式。(之后会写css系列文章,欢迎围观)

主要参考文章:

基础进阶URL详解与URL编码
前端面试题:从url到页面展现,这之中发生了什么?
HTTP图解

阅读 2.6k更新于 2017-05-10

推荐阅读
JerryZ.FE
用户专栏

愿我可以带着最微薄的行李和最丰盛的自己,在世间流浪。

11 人关注
29 篇文章
专栏主页
目录