最近开始学习前端，看了网上许多相关的文章，老师和已工作的朋友也都证实，“在浏览器中输入URL到整个页面显示在用户面前时这个过程中到底发生了什么”是绕不开的面试题之一。如果我被面试到这个题目，该如何回答呢？所以我来自问自答一番。
这个过程分为以下几个步骤：
1.域名解析
这里首先解释3个名词：
-
URL（Uniform Resource Locator）
统一资源定位符，即域名，也就是我们常说的网址。比如http://www.baidu.com 就是百度网站的URL。http超文字传输通讯协定是WWW万维网和浏览器最主要的沟通方式。www.google.com指服务器地址，必要时会加上端口号若为HTTP的默认值“:80”可省略。在WWW中想要连结到某个网页，便需要给浏览器一个位址，而URL在此的功能就是告知浏览器某个资源在哪个位置。 -
IP地址
IP是因特网中的每台连接到网络的计算机为实现相互通信而遵循的规则协议。互联网上每一台计算机的唯一标识是它的IP地址，形如202.108.22.5，IP地址并不方便记忆。 为了便于记忆或辨识，用户使用域名来登录网站，每个域名背后有对应的IP地址。每个网站就是靠IP来定位的。浏览器并不能识别URL是什么，因此URL输入后，浏览器首先要做得是域名解析。 -
DNS
DNS（Domain Name System，域名系统）是互联网的一项服务。 它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。DNS实际上充当了一个翻译的角色，实现了网址到IP地址的转换。
了解这几点，再讲网址到IP地址转换的过程就很容易理解了。
浏览器首次登陆或者相隔一段时间内登陆某个网站，解析过程如下：
（1）输入URL地址后，浏览器会从电脑C盘的hosts文件查找是否有存储DNS信息，查找是否有目标域名和对应的IP地址；
（2）从路由器的缓存DNS信息中查找；
（3）ISP DNS缓存查找，从网络服务商（比如电信）的DNS缓存信息中查找；
（4）经由以上三种查找方法还没查找到目标URL对应的IP的话，就会向根域名DNS服务器查找目标URL的对应IP，根域名服务器会向下级服务器转送请求，层层下发，直至找到对应IP并把它缓存到本地，供下次查询使用。
如果是近期登陆过的网站，本地浏览器会有DNS缓存，可以直接查找到IP地址。知道IP地址之后，通过IP地址查找到对应的服务器，浏览器将用户发起的http请求发送给服务器。
2.服务器处理用户请求
服务器是一台安装系统的机器。常见的服务器有Linux、Windows server 2012等。系统里安装的处理请求的软件叫Web server。
Web server是一个统一管控的工具。结合配置文件，Web server把接收到的用户请求交给网站代码，或者接受请求反向代理到其他Web server，然后返回后才程序处理的结果。
3.网站处理流程
网站处理，就是实际后台处理的工作。后台开发现在有很多框架，但大部分都还是按照MVC设计模式进行搭建的。
MVC是一个设计模式，将应用程序分成三个核心部件：模型（model）-- 视图（view）--控制器（controller），它们各自处理自己的任务，实现输入、处理和输出的分离。
（1）视图（view）
视图是用户看到并与之交互的界面。这是前端工作的主要部分。
（2）模型（model）
模型是将实际开发中的业务规则和所涉及的数据格式模型化，应用于模型的代码只需写一次就可以被多个视图重用。在MVC的三个部件中，模型拥有最多的处理任务。一个模型能为多个视图提供数据。
（3）控制器（controller）
控制器接受用户的输入并调用模型和视图去完成用户的需求。Controller处于管理角色，从视图接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示模型处理返回的数据。
总结而言，首先控制器接收用户的请求，并决定应该调用哪个模型来进行处理，然后模型用业务逻辑来处理用户的请求并返回数据，最后控制器用相应的视图格式化模型返回html字符串给浏览器，浏览器呈现网页给用户。因此，下一步就来到浏览器处理阶段。
4.浏览器处理
通过后台处理返回的html字符串结果会被浏览器读取解析，对应就是html页面加载、解析、渲染的工作。
（1）加载
HTML字符串被浏览器接受后被一句句读取解析，解析到link 标签后重新发送请求获取css；解析到 script标签后发送请求获取 js，并执行代码；解析到img 标签后发送请求获取图片资源。并同步进行加载解析。
（2）解析、渲染
解析的过程，其实就是生成解析树，即dom树。dom树是由dom元素及属性节点组成，加上css解析的样式对象和js解析后的动作实现。而渲染，就是将DOM树进行可视化表示。下一步就来到了绘制网页的工作阶段。
5.绘制网页
浏览器根据 HTML 和 CSS 计算得到渲染树，绘制到屏幕上，js 会被执行，由此最终完成了页面展示。
总结
这篇文章写得很纠结，很多步骤我自己心里知道是那么回事，但没有能力用自己的语言表述出来，只会照本宣科地把自己学的内容搬过来。这也跟我的计算机基础比较薄弱有关，以后会注意加强这一块的补充，把知识潜移默化到自己头脑中。
网友评论