本来只是想看一下前端的渲染和重绘回流,研究一下加载优化,然后就想着顺便过一下页面渲染前的步骤,发现涉及的东西还挺多的,就总结一下吧,下一章聊加载优化
大致步骤
1、浏览器的地址栏输入URL并按下回车。
2、浏览器查找当前URL是否存在缓存,并比较缓存是否过期。
3、DNS解析URL对应的IP。
4、根据IP建立TCP连接(三次握手)。
5、HTTP发起请求。
6、服务器处理请求,浏览器接收HTTP响应。
7、渲染页面,构建DOM树。
8、关闭TCP连接(四次挥手)。
先说URL,举个例子,常见的地址如:http://www.baidu.com ,一般由以下几部分组成
- protocol,协议头,譬如有http,ftp等
- host ,主机域名或IP地址
- port ,端口号
- path ,目录路径
- query ,即查询参数
- fragment ,即#键后面的hash值,一般用来定位到某个位置
NDS解析
按下回车,浏览器发起请求,如果URL是域名而不是IP地址,将会进行DNS解析
ip地址是网络上标识站点的数字地址,为了方便记忆,采用域名来代替IP地址标识站点地址
DNS是计算机域名的缩写,它是由解析器和域名服务器组成的
解析步骤
-
浏览器先检查本地hosts文件是否有这个网址映射关系,如果有就调用,直接完成域名解析
-
如果没找到则会查找本地DNS解析器缓存,如果查找到则返回
-
上一步没有,浏览器会调用解析程序,并成为DNS服务器的一个客户,把待解析的域名放在DNS的请求报文中,以UDP用户数据报的方式发给本地DNS服务器,如果本地DNS服务器查找到相应的域名对应的IP地址,就把对应的IP地址放在回答报文中返回
UDP 为应用程序提供了一种无需建立连接就可以发送封装的 IP 数据包的方法
-
如果还没找到,即本地DNS服务器不知道被查询域名的IP地址,由于主机向本地DNS服务器的查询是递归查询,所以此时,本地DNS服务器就会以DNS客户的身份向其他根DNS服务器继续发出查询请求报文。本地DNS服务器向根DNS服务器的查询是迭代查询,当找到相应域名的IP地址后,就会把这个结果返回给最初发起查询请求的浏览器
递归查询:在该模式下DNS服务器接收到客户机请求,必须返回一个准确的查询结果给客户机。如果该DNS服务器本地没有存储被查询的DNS信息,那么该服务器会(替客户机)询问其他服务器,并将返回的查询结果再返回给客户机。