浅析浏览器输入URL到页面输出执行流程

本文是饥人谷学员的博客,原载于:浅析浏览器输入URL到页面输出执行流程
第一次用MarkDown语言写博文并发布于众,排版造成阅读不便处请多多谅解。

前言

此题经常作为前端工程师面试题出现,重要性不言而喻,同时也体现一个优秀前端工程师应该掌握该点的必要性。才疏学浅,如有语义不通之处,望请指出,鄙人将在第一时间内修正。

概念速览

URL(uniform resource location) : 统一资源定位符,用来作为互联网上各种资源的标识符,可理解为 身份证号 。

URL的基本结构: 协议名称 :// 服务器所在域名或者IP地址 : 端口号 / 所要访问的文件路径

注意点:浏览器为了保证安全性,设定了跨域保护策略, 即窗口之间的通信必须满足使用相同协议, 相同域或者子域, 相同端口, 因此深入理解URL各组成部分的含义有助于我们判断两个窗口之间是否能互相通信。

IP(Internet Protocol) :互联网中设备间进行通信都要遵从的一种协议,它规定了每台设备都要有且唯一的IP地址,用来标识自己在互联网中的地址。格式通常为XXX.XXX.XXX.XXX,不同网段下IP地址的范围也不同。如有兴趣者,请自行百度。

域名(Domain Name) :由于IP协议规定的纯数字IP地址在日常中难以记忆,因此人们便产生使用更加常见,好记的字符标识设备的地址,域名应运而生。一个域名就是一个更加容易记忆的目标主机的地址标识符。例如:百度的域名就为百度一下,你就知道,实际对应的IP地址为119.75.217.109

DNS(Domain Name System): 互联网中实际定位设备时还是使用IP地址来定位,因此产生了DNS,一种专门用来将域名转换为IP地址的协议,提供该协议服务的服务器就叫DNS服务器。

HTTP(HyberText Transfer Protocol) : 超文本传输协议,万维网中传输超文本都要遵从的一个协议,可以理解为HTML文件的传输就是靠它。

解答部分

地址解析阶段

用户在浏览器端输入URL后,浏览器先做第一件事情就是找到目标域名的IP地址,大致经过以下几个阶段:

1.查询 浏览器端的DNS缓存 中是否有目标域名的相关信息。
2.查询 本机的host文件 中是否有目标域名的信息。
3.查询本地的 路由器中的DNS缓存 中是否有目标域名的信息。
4.查询 ISP(互联网服务提供商,例如电信,移动)中的DNS服务器 中是否有目标域名的信息。
5.查询 根域名服务器 是否有目标域名的信息,如果没有,则传至 子域名服务器 进行查询, 以此递推 。
6.查询到目标IP地址后,则开始建立 TCP 三次握手 ,与目标服务器建立连接。
7.通过 HTTP 协议向目标主机发送请求。

请求处理及响应阶段

1.服务器端接受到请求后,根据路由将url中的地址进行重定向到服务器程序上的目标文件。

2.此处涉及到后台的MVC架构,大致如下:
URL中的文件地址部分经过服务器上的路由程序重定向到对应的控制器(controller)对象,控制器对象根据URL中指定的操作执行相关的逻辑并调用目标数据的模型(Model)对象,模型对象与数据库交互完成目标操作后,控制器将模型中反馈的数据填充到视图中。

3.视图部分(通常是HTML页面)作为HTTP响应发送到浏览器端。

视图解析阶段

1.浏览器开始解析目标HTML文件,执行流的顺序为自上而下。
2.HTML解析器将HTML结构转换为基础的DOM(文档对象模型),构建DOM树完成后,触发DomContendLoaded事件。
3.CSS解析器将CSS解析为CSSOM(层叠样式表对象模型),一棵仅含有样式信息的树。
4.CSSOM和DOM开始合并构成渲染树,每个节点开始包含具体的样式信息。
5.计算渲染树中个各个节点的位置信息,即布局阶段。
6.将布局后的渲染树显示到界面上。


注:图片等外部资源在解析阶段被加载,加载完毕后触发load事件

编辑于 2017-03-10

文章被以下专栏收录