一·从输入url到页面展示到底发生了什么

最新推荐文章于 2024-07-22 06:48:36 发布

侯建豪

最新推荐文章于 2024-07-22 06:48:36 发布

阅读量455

点赞数

分类专栏：程序员的第一步文章标签： url 前端基础

程序员的第一步专栏收录该内容

1 篇文章 0 订阅

订阅专栏

第一步·在浏览器的地址栏中输入URL

　　首先我们要知道URL是什么，URL（Uniform Resource Locator），统一资源定位符，用于定位互联网上的资源，实际上就是网站网址。url的格式一般为：

协议类型://<主机名>:<端口>/<路径>/文件名

　　其中协议类型可以是http（超文本传输协议）、https、ftp（文件传输协议）、telnet（远程登录协议）、file等等、.//协议（与当前页面的协议保持一致）。而http是最常见的网络传输协议，https则是进行加密的网络传输。
　　例如，百度的URL为https://www.baidu.com/，其中，“http”表示与web服务器通讯采用http协议，百度web服务器域名为www.baidu.com，如果有其他的内容类似u/b473784d730c表示所访问的文件存在于web服务器上的路径。
　　url格式中主机名冒号后面的数字是端口编号，因为一台计算机常常会同时作为Web，FTP等服务器，端口编号用来告诉web服务器所在的主机要将请求交给哪个服务。默认情况下http服务的端口为80，不需要在url中输入，如果web服务器采用的不是这一个默认端口，就需要写明服务所用的端口。常见的协议默认端口如下：

协议类型	默认端口
http	80
ftp	21
https	443
telnet	23

IP是什么
　　IP是因特网中的每台连接到网络的计算机为实现相互通信而遵循的规则协议。每个处于互联网中的设备都有IP 地址，形如 192.168.0.1，而127.0.0.1代表本机的 IP。IP又分为局域网IP和公网IP。而局域网 IP 和公网 IP 是有差别的。每个网站就是靠IP来定位的。
　　当我们开始在浏览器中输入URL的时候，浏览器其实就已经在智能的匹配可能得URL了，他会从历史记录，书签等地方，找到已经输入的字符串可能对应的 URL，然后给出智能提示，让你可以补全URL地址。对于google的chrome的浏览器，他甚至会直接从缓存中把网页展示出来，就是说，你还没有按下 enter，页面就出来了。
　　为了便于记忆或辨识，人们使用域名来登录网站，每个域名背后有对应的IP地址。
　　比如对于 http://www.jianshu.com的URL，浏览器实际上不知道 www.jianshu.com到底是什么东西，需要查找www.jianshu.com网站所在服务器的IP地址，才能找到目标，这就是下文要说的域名解析。

第二步·域名解析

　　当用户在浏览器中输入url后,你使用的电脑会发出一个DNS请求到本地DNS服务器。本地DNS服务器一般都是你的网络接入服务器商提供，比如中国电信，中国移动,DNS请求到达本地DNS服务器之后会有以下几个步骤：

（１）查找浏览器缓存

　　浏览器会检查缓存中有没有这个域名对应的解析过的IP地址，如果缓存中有，这个解析过程就将结束。Chrome浏览器看本身的DNS缓存时间比较方便，在地址栏输入chrome://net-internals/#dns，就可以看到了，如下图：
　　

（２）查找操作系统缓存

　　如果用户的浏览器缓存中没有，浏览器会从hosts文件查找是否有存储DNS信息，查找是否有目标域名和对应的IP地址

（３）查找路由器缓存

　　如果系统缓存中也找不到，那么查询请求就会发向路由器，路由器一般会有自己的DNS缓存。

（４）查找ISP(Internet Service Provider) DNS 缓存

　　如果路由器缓存中也找不到，那么就查询ISP DNS 缓存服务器了。

（５）如果前面都找不到DNS缓存的话，会有以下几个步骤：

本地 DNS服务器将该请求转发到互联网上的根域（根域没有名字，在DNS系统中就用一个空字符串来表示。例如www.baidu.com.现在的DNS系统都不会要求域名以.来结束，即www.baidu.com就可以解析了，但是现在很多DNS解析服务商还是会要求在填写DNS记录的时候以.来结尾域名。）
根域将所要查询域名中的顶级域（比如要查询www.baidu,com，该域名的顶级域就是com）的服务器IP地址返回到本地DNS。
本地DNS根据返回的IP地址，再向顶级域（就是com域）发送请求， com域服务器再将域名中的二级域（即www.baidu.com中的baidu.com）的IP地址返回给本地DNS。
本地DNS再向二级域发送请求进行查询。
之后不断重复这样的过程，直到本地DNS服务器得到最终的查询结果，并返回到主机。这时候主机才能通过域名访问该网站。
下图能很好的说明这个迭代查询：
还有一种方法是递归查询，所谓递归查询：客户端主机查询的域名地址无法在本地域名服务器中找到，因此本地域名服务器就以DNS客户端的身份向其他根域名服务器发起请求，进行查询，而不是让客户端主机去一直查询；递归查询的结果要么是返回的IP地址，要么是报错，表示无法查询到地址，这种查询方法应用相对较少。
递归过程：主机→本地DNS服务器→其他DNS服务器（如：我要找一个苹果吃，找到了A，问A有没有，A说我帮你去找B，B可能有，果真B有，然后B将苹果给了A，A再将苹果给我，这就是递归）
迭代过程：本地DNS服务器→根服务器，本地DNS服务器→顶级域名服务器，本地DNS服务器→权限域名服务器；（如：我要找一个苹果，找到了A，A说我也没有，B可能有，你去找B吧；我又找B，B说我也没有，你去找C吧，我又去找C，终于找到了苹果，这就是迭代的过程）

　　我们都知道在我们的网络配置中都会有”DNS服务器地址”这一项，操作系统会把这个域名发送给这里设置的DNS，比如114.114.114.114,也就是本地区的域名服务器，通常是提供给你接入互联网的应用提供商。而114.114.114.114是国内移动、电信和联通通用的DNS。

第三步·服务器处理请求

　　每台服务器上都会安装处理请求的应用——Web server。常见的web server产品有apache、nginx、IIS、Lighttpd等。
　　当web server接收到一个HTTP请求(request)，会返回一个HTTP响应(response)，例如送回一个HTML页面。对于不同用户发送的请求，会结合配置文件，把不同请求委托给服务器上处理对应请求的程序进行处理（例如CGI脚本，JSP脚本，servlets，ASP脚本，服务器端JavaScript，或者一些其它的服务器端技术等）。
　　无论它们(脚本)的目的如何，这些服务器端(server-side)的程序通常产生一个HTML的响应(response)来让浏览器可以浏览。
　　那么如何处理请求？实际上就是后台处理的工作。后台开发现在有很多框架，但大部分都还是按照MVC设计模式进行搭建的。
处理的过程如下图：

　　MVC的处理过程是这样的：对于每一个用户输入的请求，首先被控制器接收，控制器决定用哪个模型来进行处理，然后模型用业务逻辑来处理用户的请求并返回数据，最后控制器确定用哪个视图模型，用相应的视图格式化模型返回html字符串给浏览器，并通过显示页面呈现给用户。

第四步·浏览器进行处理

　　接下来就是浏览器进行处理，通过后台处理返回的HTML字符串被浏览器接受后被一句句读取解析，html页面经历加载、解析、渲染。

加载
　　浏览器对一个html页面的加载顺序是从上而下的。如果加载过程中遇到外部css文件，浏览器另外发出一个请求，来获取css文件。遇到图片资源，浏览器也会另外发出一个请求，来获取图片资源。但是当文档加载过程中遇到js文件，html文档会挂起渲染（加载解析渲染同步）的线程，不仅要等待文档中js文件加载完毕，还要等待解析执行完毕，才可以恢复html文档的渲染线程。
解析
　　解析文档是指将文档转化成为有意义的结构，也就是可让代码理解和使用的结构。解析得到的结果通常是代表了文档结构的节点树，它称作解析树或者语法树，也就是DOM树。如下图：

css解析将css文件解析为样式表对象。如下图：

js解析文件在加载的同时也进行解析
　　如果想深入如何解析的话可以看浏览器的工作原理：新式网络浏览器幕后揭秘这篇文章
渲染
　　即为构建渲染树的过程，就是将DOM树进行可视化表示。构建这棵树是为了以正确的顺序绘制文档内容。