前端面试考官：从你输入网址，到网页出现，这过程到发生了什么？

2018-03-03 本文已影响0人 Guohanzhong

一、你平日在浏览器输入网址这个方式，叫URL。

URL 是什么？

正式名称为 Uniform Resource Locator (简称：URL) ，中文称为统一资源定位符，就是访问网络上的资源的途径。你在网络上看到的网页，影片，图片等一切资源都是通过URL去访问或获取。

就像现实生活一样，你通过地址门牌去找到不同的地方。

URL 一般格式如下：

协定型式://伺服器位址:埠号（必要时需加上埠号）/路径/档名

以本文章URL为例： http://www.jianshu.com/u/123

http:// 是与web伺服器通讯采用http协议协定型式
www.jianshu.com是简书伺服器域名地址
u/123 是所访问的文件存在于伺服器上的路径档名

URL 协定型式主要用作不同的传输方式与内容类型，以下是最常见到的形式：

http 超文本传输协定资源，是网路最广泛的协定之一，专门负责HTML网页的发布与接收。就像你目前观看的本文章
https 用加密传送的超文本传输协定，传输的网页经过加密，现普遍采用，有关加密资料可参见这里
ftp 档案传输协定，负责档案传输，可以进行档案共享
mailto 电子邮件位址，专门负责电子邮件的传输，@是电子邮件必须有的

更多的协定型式可参考这里

二、当你输入网址后，发生了什么？

先了解什么是 IP 地址

正式名称为 Internet Protocol (简称：IP) ，中文称为网际协议。每个处于互联网中的设备都有 IP 地址，以实现相互通讯。例如127.0.0.1是代表本机的 IP。IP 又分为区域网 IP 和公网 IP。简单而言：

区域网 IP 属于非注册地址，专门为组织机构内部使用，通过网际网路是不能访问私有IP的，就如你公司中的内联网。
公网 IP 则是需要注册，通过它直接访问网际网路，在任何地方只有能连网都能访问公网 IP。

理论上，我们知道 IP 地址，就可以访问网络上的网页等资源。但恐怕你也记不了这些难辨认又没有意思的数字吧。于是就有域名的出现。

你输入的网址名称就是域名

域名就是把 IP 地址语义化，使人容易记忆及辨认。利用域名对应 IP 地址。

以 http://www.jianshu.com 为例，浏览器不会知道 www.jianshu.com 到底是在网络哪个位置，它需要查找 www.jianshu.com 这个域名背后对应所在伺服器的 IP 地址，才能找到目标。这个过程叫域名解析。

三、进行域名解析

当你输入网址后，浏览器会进行以下一系列流程，透过域名伺服器(Domain Name Server, DNS) ，去进行域名解析，查找域名是对应哪个 IP 地址，最后从该 IP 地址获取网页等网络资源。

查找浏览器缓存

如果你先前在浏览器曾经到访过网站。浏览器会缓存DNS记录一段时间，这样就找到对应的 IP 地址。域名解析结束。如果未曾到访过网站就会继续进行域名解析。

查找系统缓存

从电脑系统中 Hosts 的文件查找有没有DNS记录，是否有相关的对应的 IP 地址。如果没有，域名解析继续。

查找路由器缓存

如果有其他设备使用的路由器曾经到访过网站。路由器也会缓存DNS记录，是否有相关的对应的 IP 地址。如果没有，域名解析继续。

查找 ISP DNS 缓存

以上还是没有，就会向你的网络供应商 (Internet Service Provider, ISP) 查找有没有相关DNS记录。

查找根域名伺服器供应商

ISP DNS 缓存还是没有，就会向根域名伺服器供应商，查找相关对应的 IP 地址。根域名伺服器把请求转发给下一级，直到找到对应的IP为止。

为什么修改 DNS 为 114.114.114.114 或 8.8.8.8 可以解决电脑上不了网的问题？

8.8.8.8 是谷歌提供的DNS伺服器的 IP 地址，114.114.114.114 是国内电信网络供应商。如果我们网页显示不了，就说明我们以上一系列流程都找不到相关 IP 地址，你可以尝试直接从谷歌或电信提供的DNS伺服器中查找相关的 IP 地址

什么是DNS挟持？

例如：以上1－5流程中，其中hosts或缓存资料遭篡改，导致域名解析到不正确的IP地址，导致访问错误的 IP 地址。如将一个银行域名指向不正确的 IP 地址，造成威胁

四、当域名解析成功，找到相关 IP 地址，接下来到Web伺服器处理请求

每台伺服器上都会安装处理请求的应用：Web server。常见的web server 有apache、nginx、IIS、Lighttpd等。

当 web serve r接收到一个 HTTP 请求 (request)，便会进行一个网站处理流程，最后产生一个 HTML 的响应(response)给浏览器。

伺服器内网站处理流程

网站处理是实际后台处理的工作。后台开发现在有很多框架，但大部分都还是按照MVC设计模式进行搭建的。

MVC是一个设计模式，将应用程序分成三个核心部件：

模型（model），视图（view），控制器（controller）

MVC的处理过程：

每一个用户输入的请求
首先被路由接收，再交由控制器决定用哪个模型来进行处理
将用户输入的指令数据传给模型进行
进行业务逻辑判断，按需要向数据库存取
根据业务逻辑选择视图
控制器用业务逻辑相应的数据填入视图模型
将处理好的视图模版的HTML交回控制器
生成 HTML 字符串返给浏览器处理，并通过显示页面呈现给用户。

五、最后伺服器将处理好的HTML，交给浏览器处理，最后显示在你的屏幕上

接下来就是浏览器进行处理，伺服器将处理好的HTML字符串交给浏览器后被一句句读取解析。过程主要分为

载入，解析，渲染

载入
由于浏览器对 HTML 页面加载顺序是从上而下的。如果加载过程中遇到外部 css (如下）

<html>
<head>
<script type="text/javascript" src="style.js"></script>
<script type="text/javascript" src="style1.js"></script>
<script type="text/javascript" src="style2.js"></script>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
hello, world!
</body>
</html>

浏览器另外发出一个请求，来获取 CSS 文件。遇到图片资源，浏览器也会另外发出一个请求，来获取图片资源。但必须留意当文档加载过程中遇到 Javascript(js) 文件（如上例），HTML 文档加载解析渲染同步，不仅要等待文档中 js 文件加载完毕，还要等待解析执行完毕，才可以恢复 HTML 文档的渲染线程，导致 styles.css 样式文件和<body>标签都无法被加载，这会影响到页面加载的速度，带来不良用户体验。

解析，渲染
浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树，然后解析CSS文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。

总结

从你输入网址，到网页出现这个看似简单且短的时间过程中，原来背后是牵涉这么多的步骤及概念，这真不简单喔。通过写这篇文章，对前端这条热门面试题目，也有初步的了解了。

本文是小弟学习前端写有关于从你输入网址，到网页出现，这过程到发生了什么的博文，请大家多多指教。如有任何意见及交流，可在下方留言，谢谢！