基本流程：
1、用户在浏览器中输入url地址
2、浏览器解析域名得到服务器ip地址
浏览器会首先从缓存中找是否存在域名，如果存在就直接取出对应的ip地址，如果没有就开启一个DNS域名解析器。DNS域名解析器会首先访问顶级域名服务器，将对应的ip发给客户端；然后访问根域名解析器，将对应的ip发给客户端；最后访问本地域名服务器，得到最终的ip地址。
3、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完成第三次握手时，实际上客户端已经与服务器建立了连接，所以第三次握手的报文已经可以携带数据了。
4、客户端发送HTTP请求获取服务器端的静态资源
5、服务器发送HTTP响应报文给客户端，客户端获取到页面静态资源
6、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
7、浏览器解析文档资源并渲染页面
浏览器解析文档资源并渲染页面流程：（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窗口、改变了页面默认的字体等，这些操作会直接触发回流。编写代码时如何减少回流和重绘：（1）修改样式不要逐条修改，定义CSS样式的class，直接修改元素的className（2）不要将DOM节点的属性值放在循环中当成循环的变量（3）为动画的HTML元素使用fixed或absolute的position属性，修改它们的CSS就不会触发reflow（4）把DOM离线后修改，设置display：none或者clone元素到内存中，修改完成再显示回页面（5）不要使用table布局，一个微小的改变就可能引起整个table的重新布局3、性能优化（1）提升HTML的加载速度- 页面精简，删除不必要的内容，将内嵌的JS和CSS移至外部文件，使用压缩工具等- 减少文件数量，合并文件，减少请求次数- 减少域名查询，外部引入的资源尽量少使用不同的域名- 使用缓存，重用数据- 优化页面元素的加载顺序- 使用合法的标签- 根据浏览器类型选择合适的策略（2）编写合理的CSS- DOM的深度尽量浅- 使用合法的CSS属性- 不要为ID选择器指定类名或标签名- 避免使用后代选择器，尽量使用子选择器- 避免使用通配符（3）关于JS标签js标签的加载和执行特点：载入后立即执行，执行时会阻塞页面后续内容- 将所有的js标签放在页面底部，保证脚本执行前已完成DOM渲染- 尽可能合并脚本- 减少内联js的使用- 注意多个js标签的引入顺序- 使用defer属性，该属性可以使脚本在文档完全呈现以后再执行- 使用async属性，可以使当前脚本不必等待其他脚本的执行，也不必阻塞文档的呈现网络协议tcphttp
