了解从输入url到页面显示过程

2018-01-04 本文已影响0人鱼安酱

打开浏览器输入url，以https://www.baidu.com/为例，在搜索框中输入baidu.com到搜索完成后展示出搜索的结果界面，就是这篇文章主要讲述的内容。

1、在浏览器中输入url

URL是什么

统一资源定位符，也可称为网页地址，用于定位网上的资源。
url标准格式：协议类型:[//服务器地址[:端口号]][/资源层级UNIX文件路径]文件名[?查询][#片段ID]

网络协议

http：超文本传输协议，是一种用于分布式、协作式和超媒体信息系统的应用层协议。
https：超文本安全传输协议，是一种通过计算机网络进行安全通信的传输协议。对于用户来说https比http更安全，因为http是明文传输的。
ftp：文本传输协议，是用于在网络上进行文件传输的一套标准协议，使用客户/服务器模式。
file：计算机文件，是存储在某种长期储存设备或临时存储设备中的一段数据流，并且归属于计算机文件系统管理之下。简单来说就是自己计算机上的文件。

http://jirengu.com/blog
https://baidu.com/
//jirengu.com/static/imgs/a.png
file://Users/zyy/xiangmu/index.com

2、域名解析

以https://baidu.com/为例，在浏览器上输入baidu.com后，后台需要查找baidu.com网站所对应的IP地址。

域名：baidu.com就是域名

IP地址:

互联网上的每个设备都有对应的IP，一个网站可能有多个IP，但一个IP只能对应一个网站。baidu.com其中一个IP是175.964.800

有公网IP和内网IP之分

127.0.0.1代表本机的 IP

公网IP：（0.0.0.0----223.255.255.255)地址之间，除以上“局域网专用地址”和“特殊地址”以外的的地址即为公网地址。我们已经知道IP地址包括公网和专用（私有）两种类型，公网IP地址又称为可全局路由的IP地址，是在Internet中使用的IP地址，目前对企业来说主要是ISP提供的一个或几个C类地址；是原理还是一样的, 说白了，公网IP是互联网上认识的，私有的IP是互联网上不认识的，只有你自己知道的。公网IP一般是网络运营商分配的。包括固定的和自动分配的。一般大点的单位都是专线接入，是用的固定IP，小单位或者家用的，大多是ADSL这种自动分配的IP的。一般一个入网点使用一个IP！通常是N个局域网IP，通过路由器用一个公网IP对外上网。路由器负责数据包的转发

内网IP：内网也就是局域网，最直观的就是像网吧，公司内部的电脑用交换机，HUB，路由连起来的。再通过光钎。猫接入INTERNET的。内网IP就是国际上分配ip的时候，留出一部分ip，不在internat上用，用于内部局域网等，虽然功能一样，但不能在internat上使用。属于非注册地址，专门为组织机构内部使用。内网的计算机以NAT（网络地址转换）协议，通过一个公共的网关访问Internet。在互联网上，有一个叫做NAT的技术，是用来转换地址的，是为了解决公网IP不够用的问题而诞生的，比如说，你的主机IP地址是192.168.12.1，这个就是一个私有的IP，这个IP是不能被路由的，也就是互联网是不认的，这个时候，你去ISP，比如电信，申请一个公网的IP，比如200.176.23.4，这个时候，你在路由器上做个NAT，把你的私有IP和你的公网IP做个映射，你就可以上网了，但是现在我们一般采用的是NAPT，就是端口映射的技术，但在IP地址规划时，内网的计算机可向Internet上的其他计算机发送连接请求，但Internet上其他的计算机无法向内网的计算机发送连接请求。

域名解析的流程

浏览器缓存 – 浏览器会缓存DNS记录一段时间.
系统缓存 - 从 Hosts 文件查找是否有该域名和对应 IP.
路由器缓存 – 一般路由器也会缓存域名信息.
ISP DNS 缓存 – 比如到电信的 DNS 上查找缓存.
如果都没有找到，则向根域名服务器查找域名对应 IP，根域名服务器把请求转发到下一级，知道找到 IP.

3、服务器处理

服务器（server）：称为网络主机，是运行一些软件的计算机，这些软件是用于管理资源并为用户提供服务的计算机软件。一般来说，服务器通过网络对外提供服务。可以通过Internet对内网提供服务，也可以通过Internet对外提供服务。

服务器里安装用于处理请求的应用是Web server

Web服务器

两层含义：一台负责提供网页的电脑，主要是各种编程语言构建而成，通过HTTP协议传给客户端。一个提供网页的服务器程序。
常见的 web服务器有 Apache、Nginx、IIS、Lighttpd
web服务器接收用户的Request 交给网站代码，或者接受请求反向代理到其他 web服务器

web服务器

4、网站处理流程

MVC 模型(model)-视图(view)-控制器(controller)

网站处理流程

5、浏览器处理

html字符串被浏览器接收并进行读取解析
根据解析到的内容重新发送请求

解析到link 标签后重新发送请求获取css
解析到 script标签后发送请求获取 js，并执行代码
解析到img 标签后发送请求获取图片资源

根据html和css计算得到渲染树，并且显示，同时执行js