目录
- 步骤如下:
- 一、用户在浏览器搜索栏中输入`url`地址
- 二、浏览器解析域名得到`服务器ip地址`
- 浏览器解析域名得到服务器ip地址有哪些过程?
- 三、TCP三次握手建立客户端和服务器的连接
- 四、客户端发送HTTP请求获取服务器端的静态资源
- 五、服务器发送HTTP响应报文给客户端,客户端获取到页面静态资源
- 六、TCP四次挥手关闭客户端和服务器的连接
- 七、浏览器解析文档资源并渲染页面
 
 
 
- 其他细节知识补充:
- 1、`Render Tree`的生成
- 2、回流和重绘
- 3、性能优化
 
 
 
 
 
步骤如下:
一、用户在浏览器搜索栏中输入url地址
 
二、浏览器解析域名得到服务器ip地址
 

浏览器解析域名得到服务器ip地址有哪些过程?
第一步:检查浏览器缓存中是否缓存过该域名对应的IP地址,如果没有找到继续下一步
第二步:如果在浏览器缓存中没有找到IP,那么将继续查找本机系统是否缓存过IP,如果没有找到继续下一步
第三步:向本地域名解析服务系统发起域名解析的请求
如果在本机上无法完成域名的解析,那么系统只能请求本地域名解析服务系统进行解析,本地域名系统一般都是本地区的域名服务器,比如你连接的校园网,那么域名解析系统就在你的校园机房里,如果你连接的是电信、移动或者联通的网络,那么本地域名解析服务器就在本地区,由各自的运营商来提供服务。
第四步:当本地的域名服务器收到请求后,就先查询本地的缓存,如果有该纪录项,则本地的域名服务器就直接把查询的结果返回。
第五步:如果本地的缓存中没有该纪录,则本地域名服务器就直接把请求发给根域名服务器,然后根域名服务器再返回给本地域名服务器一个所查询域(根的子域)的主域名服务器的地址。
第六步:本地服务器再向上一步返回的域名服务器发送请求,然后接受请求的服务器查询自己的缓存,如果没有该纪录,则返回相关的下级的域名服务器的地址。
第七步:重复第六步,直到找到正确的纪录。
第八步:本地域名服务器把返回的结果保存到缓存,以备下一次使用,同时还将结果返回给客户机的客户端(浏览器)。
三、TCP三次握手建立客户端和服务器的连接

 因为HTTP是基于TCP的可靠传输,所以在发送http数据报之前,需要先进行TCP的三次握手建立连接。三次握手过程如下:
第一次握手:客户端—>服务端 ack=1,seq=x(x随机生成)
第二次握手:服务端—>客户端 ACK=1,ack=x+1,seq=y(y随机生成)
第三次握手:客户端—>服务端 ACK=1,ack=y+1,seq=x+1
第一次
 第一次握手:建立连接时,客户端发送syn包(seq=j)到服务器,并进入SYN_SENT状态,等待服务器确认;SYN:同步序列编号(Synchronize Sequence Numbers)。
 第二次
 第二次握手:服务器收到syn包,必须确认客户端的SYN(ack=j+1),同时自己也发送一个SYN包(seq=k),即SYN+ACK包,此时服务器进入SYN_RECV状态。
 第三次
 第三次握手:客户端收到服务器的SYN+ACK包,向服务器发送确认包ACK(ack=k+1),此包发送完毕,客户端和服务器进入ESTABLISHED(TCP连接成功)状态,完成三次握手。
 在上述过程中,还有3个重要概念略微提及:
(1)未连接队列
(2)Backlog参数
(3)半连接存活时间
完成第三次握手时,实际上客户端已经与服务器建立了连接,所以第三次握手的报文已经可以携带数据了。
PS:TCP 为什么三次握手而不是两次握手,SYN/ACK/FIN是什么?
 大小写的ack和ACK的区别:
 
四、客户端发送HTTP请求获取服务器端的静态资源
五、服务器发送HTTP响应报文给客户端,客户端获取到页面静态资源
六、TCP四次挥手关闭客户端和服务器的连接
数据传输完毕后,TCP会进行四次挥手断开连接,释放资源。四次挥手过程如下:
第一次挥手:客户端—>服务器 FIN=1,ack=1,seq=u 客户端状态变为FIN_WAIT_1
第二次挥手:服务器—>客户端 ACK=1,ack=u+1,seq=v 服务器状态变为CLOSE_WAIT,TCP进入半关闭状态
第三次挥手:服务器—>客户端 FIN=1,ACK=1,ack=u+1,seq=w 服务器状态变为LAST_ACK
第四次挥手:客户端—>服务器 ACK=1,ack=w+1,seq=u+1 客户端状态变为TIME_WAIT,此时TCP未释放,需要等待计时器计时完成后,客户端状态变为CLOSED
七、浏览器解析文档资源并渲染页面
浏览器解析文档资源并渲染页面流程:
(1)解析html资源,构建DOM Tree
(2)解析css资源,构建CSS Rule Tree
(3)JS通过DOM API和CSS OM API来操作DOM Tree和CSS Tree
(4)解析完成后综合DOM Tree和CSS Tree会生成Render Tree,计算每个元素的位置,这个过程就是回流(layout or reflow)
(5)调用操作系统Native GUI的绘制
(6)页面绘制完成
其他细节知识补充:
1、Render Tree的生成
 
DOM Tree和CSS Tree结合会生成Render Tree,是由可视化元素按照其顺序生成的树形结构,非可视化元素是不会出现到渲染树中的。
非可视化元素:head、display:none;(注意:visibility:hidden的元素会出现在渲染树中)
2、回流和重绘
回流(reflow,也叫重排、布局):某部分的变化影响了布局,浏览器需要重新渲染。(如元素大小、位置的改变)
重绘(repaint):元素的某一部分发生改变,尺寸、位置没有改变。(字体颜色、背景颜色的改变)
引起回流的几个主要原因:
- 网页初始化
- JS操作DOM树(增加、删除元素等)
- 某些元素的尺寸改变
- CSS属性的改变
浏览器的“dirty”系统:
为了避免页面细小的改变就引起回流和重绘,“dirty”系统会将这些改变操作积攒一批再进行操作,这又叫异步reflow或者增量异步reflow。有些特殊情况不会这么做:resize窗口、改变了页面默认的字体等,这些操作会直接触发回流。
编写代码时如何减少回流和重绘:
- 修改样式不要逐条修改,定义CSS样式的class,直接修改元素的className
- 不要将DOM节点的属性值放在循环中当成循环的变量
- 为动画的HTML元素使用position属性的fixed或absolute,修改它们的CSS就不会触发reflow
- 把DOM离线后修改,设置display:none或者clone元素到内存中,修改完成再显示回页面
- 不使用table布局,一个微小的改变就可能引起整个table的重新布局
3、性能优化
(1)提升HTML的加载速度
-  页面精简,删除不必要的内容,将内嵌的JS和CSS移至外部文件,使用压缩工具等 
-  减少文件数量,合并文件,减少请求次数 
-  减少域名查询,外部引入的资源尽量少使用不同的域名 
-  使用缓存,重用数据 
-  优化页面元素的加载顺序 
-  使用合法的标签 
-  根据浏览器类型选择合适的策略 
(2)编写合理的CSS
-  DOM的深度尽量浅 
-  使用合法的CSS属性 
-  不要为ID选择器指定类名或标签名 
-  避免使用后代选择器,尽量使用子选择器 
-  避免使用通配符 
(3)关于JS标签
js标签的加载和执行特点:载入后立即执行,执行时会阻塞页面后续内容
-  将所有的js标签放在页面底部,保证脚本执行前已完成DOM渲染 
-  尽可能合并脚本 
-  减少内联js的使用 
-  注意多个js标签的引入顺序 
-  使用 defer属性,该属性可以使脚本在文档完全呈现以后再执行
-  使用 async属性,可以使当前脚本不必等待其他脚本的执行,也不必阻塞文档的呈现



















