URL（Universal Resource Locator）：统一资源定位符。俗称网页地址或者网址。URL用来表示某个资源的地址。
URL主要由以下几个部分组成： a.传输协议 b.服务器c.域名 d.端口e.虚拟目录 f.文件名 g.锚 h.参数
基本流程
1，查询IP（以IP的存放位置从下网上依次往上查）
这里可以搞一个cdn处理。
。浏览器dns缓存
。客户端本地hosts文件
cdn有一个负载均衡，可以请求距离比较近且不是很忙的的dns服务器
。本地dns服务器
。根dns服务器
2，建立TCP链接 ，接入服务器
浏览器（发送后进入SYN_SENT状态） ————（发送syn包 同步序列编号（Synchronize Sequence Numbers））————》服务器
服务器收到浏览器发来的SYN包，并进行确认，同时自己也发送一个SYN即SYN+ACK包并进入SYN_RECV状态
第三次握手：客户端收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。
完成三次握手，客户端与服务器开始传送数据。这样就保证了，每次传送数据都会准确到达目标设备了
tcp断开链接执行四次挥手
3，浏览器发起http请求
4，服务器接受到浏览器发送的请求，做出响应
5，浏览器拿到数据，解析数据内容渲染页面
。构建DOM树（优化点：1，标签语义化。2，避免多层嵌套）字节流（bytes）通过UTF-8转换为字符集（characters）通过w3c规范（指定的令牌）把标签转换为（Tokens）。（符合w3c规范的能更快解析，不符合的需要判断是不是我的标签，不是还要特殊处理）。 然后转化为node节点最后转化为dom树
。cssom树 （优化点：减少选择器层级（选择器从右到左渲染））通过link（异步） @import（同步，减少使用）基于http请求拿到字节流 --》 字符集--》标签通过词法解析--》 cssom树
。将DOM树和CSSOM树合成渲染树
。根据合成的渲染树，计算他们在设备视口（viewport）的确切位置和大小，这个计算阶段就是回流 =》 布局（layout）或重排（reflow）
。根据渲染树以及回流得到的几何信息，得到节点的绝对像素 =》 绘制或者珊格话
页面的渲染是在render tree 树生成之后 而render tree 的生产是通过 DOM tree 和 CSSOM 树合并生成的。所以html 和css都是阻塞页面渲染的东西
作者：未成年面包_d036
链接：https://www.jianshu.com/p/d19396cf6c2e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
HTTP协议是在TCP协议之上的，所以建立一个HTTP连接就需要一次三次握手的过程。但是HTTP有持续连接和非持久连接的区分，就是HTTP请求首部里面的Connection字段，如果是Connection:Keep-Alive就表示持续连接，除非一方主动断开，客户端和服务器的网络连接是持续的，也就是多个HTTP请求都是这一个网络连接；如果是Connection:close，一个HTTP请求在获得HTTP响应后连接就会断开，在下一次HTTP请求时就会有另外一次HTTP连接，也就会再有一个三次握手的过程。
性能优化
代码书写的优化
1，标签语义化，
2，减少dom结构层级嵌套的太深
3，避免css层级太深
4，把css资源提前请求加载 import link style。减少使用import的应用方式，因为他是同步的回阻塞主线程的执行
5，减少操纵DOM 或者使用doucumentFragment一次性插入DOM节点中，减少重绘和回流的触发
DNS优化
1，DNS预解析
2，采用CDN
数据缓存
1，对于静态之源文件实现强缓存与协商缓存
2，对于不经常更新的接口数据采用本地缓存与数据缓存
数据传输
一，减少数据传输的大小
1，利用工具如webpack对于传输内容进行压缩
2，服务端开发GZIP压缩，一般能压缩60%左右
3，大批量数据分批次请求（懒加载）
二，减少http请求的次数
1，资源文件合并处理（精灵图）
2，小图片转成base64,当时可能会增加图片的大小1/3
HTTP1.1 虽然在串行请求可以通过 Connection: keep-alive 复用同一个 TCP 连接，如果是并行发送多个请求，会建立多个连接，但是浏览器一般限制会限制同一域名下最多同时可以建立6个连接。
• 请求阻塞：在并发请求达最大限制时，请求必须等到上一个请求完成后，才可以复用这个 TCP 发出下一个请求，所以会受到前面请求的阻塞。
• 线头阻塞：请求响应的顺序必须和请求发送的顺序一致，如果后发送的请求响应完成了，也要等前面的阻塞的请求返回。
多路复用：允许同时通过单一的 HTTP2.0 连接发起的多重请求 - 响应消息，连接通道是共享的
HTTP2.0 的传输是基于二进制帧的，每个 TCP 连接中，都有多个双向流通的流，每个流都有独一无二的标识和优先级，而流就是由二进制帧组成的。二进制帧会标识自己是属于哪个流的，所以这些流可以交错传输，在接收端根据帧头组装成完整的信息，解决线头堵塞的问题。
头部压缩：HTTP1.x 的 header 中带有大量的信息，每次都要重复发送，HTTP2.0 使用 HPACK 算法对 header 数据进行压缩，减少需要传输的 header 大小，通讯双方各自缓存一个头部字典表，可以差异化更新头部，减少需要传输数据的大小