步骤如下：

一、用户在浏览器搜索栏中输入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）：元素的某一部分发生改变，尺寸、位置没有改变。（字体颜色、背景颜色的改变）

引起回流的几个主要原因：

1. 网页初始化
2. JS操作DOM树（增加、删除元素等）
3. 某些元素的尺寸改变
4. 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属性，可以使当前脚本不必等待其他脚本的执行，也不必阻塞文档的呈现