20170809-从URL输入到页面展现

从URL输入到页面展现

1.输入URL

• URL:统一资源定位符，是对可以从互联网上得到的资源的位置和访问方法的一种简洁的表示。

• URL包含以下几部分：协议、服务器名称(或IP地址)、路径、参数和查询。

• 举例说明：

• 常用协议：

协议	中文名称	默认端口号
http	超文本传输协议	80
https	用安全套接字层传送的超文本传输协议	443
ftp	文件传输协议	21
TELNET	远程终端协议	23

如果地址不包含端口号，根据协议的默认端口号确定一个。

2.根据URL，在本地DNS缓存中查找域名对应的IP地址

浏览器和操作系统在获取网站域名的实际IP地址后会对其IP进行缓存，在短时间内重复访问同一域名时，会直接在DNS缓存中读取域名对应的IP地址，以减少网络请求的损耗（先在浏览器DNS缓存中查找，如果没有找到，则会在操作系统DNS缓存中查找）。浏览器和操作系统都有一个固定的DNS缓存时间，其中Chrome的过期时间是1分钟，在这个期限内不会重新请求DNS。Chrome浏览器看本身的DNS缓存时间比较方便，在地址栏输入:

chrome://net-internals/#dns

就可以查看本地DNS缓存：

3.查询hosts文件

• 如果在本地DNS缓存中没有找到域名对应的IP地址，则会查询hosts文件，看其中是否已经有与当前域名对应的 IP 地址，如果有就会直接采用，如果没有，那么就得由DNS服务器进行域名解析完成域名与IP的转换工作。

4.域名解析

• 域名系统DNS(Domain Name System)：用来把人们使用的域名转换为IP地址的系统。它是一个联机分布式数据库系统，采用客户服务器方式。

• 域名到IP地址的解析：当浏览器需要把域名解析为IP地址时，会调用解析程序，并成为DNS的一个客户，把带解析的域名放在DNS请求报文中，以UDP用户数据报方式发送给本地域名服务器可以是路由器或者是运营商服务器）。本地域名服务器在查找域名后，把对应的IP地址放在回答报文中返回。浏览器在获取相应的IP地址后即可进行下一步的通信。

• 若本地域名服务器查找不到对应的IP，则此域名服务器就暂时成为DNS中的另一个客户，并向其他域名服务器发出查询请求。这种过程直至找到能够回答该请求的域名服务器为止。

5.浏览器与服务器建立连接，并发送请求给服务器

• 当浏览器得到域名对应的IP地址后，则会使用TCP协议，和服务器建立连接（三次握手）。

• 和服务器建立连接后，浏览器则会使用相关协议(http或https)，向服务器发送请求。

• HTTP协议请求方法主要有：get、post、put、delete等几种方式。

6.服务器收到请求并处理，最后返回结果

• 服务器是一台安装系统的机器，常见的系统如Linux、windows server 2012，系统中安装的处理请求的应用叫Web server。常见的Web服务器有 Apache、Nginx、IIS、Lighttpd，Web服务器接收用户的请求，或者接受请求反向代理到其他Web服务器。

• (以MVC框架为例)当服务器收到来自用户的请求后，首先Controller(控制器)根据用户的请求调用相应的Model(模型)去处理用户请求相关的业务逻辑(包括对数据库的增删改查)，然后将处理结果传递给对应的View(视图)，构造显示页面(HTML文件)。最后服务器使用HTTP响应返回相应的资源(HTML文件)。

7.浏览器处理响应

• 浏览器收到来自服务器的响应后，会将响应中的HTML字符串一句句读取解析，解析到link标签后重新发送请求下载css文件，解析到script标签后重新发送请求下载js文件，并执行代码，解析到img标签后重新发送请求获取图片资源。

• 浏览器根据html、css计算得到渲染树，结合相关js的执行结果，最终将网页绘制到屏幕上，。

• 在查找资料的过程中，看到一篇简单易懂还挺有趣的文章：

HTML页面加载和解析流程

1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；

2. 浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS文件；

3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；

4. 浏览器继续载入html中＜body＞部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；

5. 浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；

6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器需要回过头来重新渲染这部分代码；

7. 浏览器发现了一个包含一行Javascript代码的＜script＞标签，赶快运行它；

8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个＜div＞ （style.display=”none”）。突然少了这么一个元素，浏览器不得不重新渲染这部分代码；

9. 终于等到了＜/html＞的到来，浏览器泪流满面……

10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下＜link＞标签的CSS路径；

11. 浏览器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。

• 其他相关资料：《how browsers work》