一、你平日在浏览器输入网址这个方式，叫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文件构建渲染树，等到渲染树构建完成后，浏览器开始布局渲染树并将其绘制到屏幕上。
总结
从你输入网址，到网页出现这个看似简单且短的时间过程中，原来背后是牵涉这么多的步骤及概念，这真不简单喔。通过写这篇文章，对前端这条热门面试题目，也有初步的了解了。
本文是小弟学习前端写有关于从你输入网址，到网页出现，这过程到发生了什么的博文，请大家多多指教。如有任何意见及交流，可在下方留言，谢谢！
网友评论