从输入URL到看到页面“CRP关键节点的性能优化【HTTP网络层面】
浏览器一共进行七个步骤：
- URL解析
- 缓存检查
- DNS解析
- TCP的三次握手
- HTTP传输
- TCP的四次挥手
- 渲染页面
URL解析
- 传输协议：HTTP / HTTPS(SSL) / FTP(文件上传）…
- 域名：顶级、一级、二级…
- 端口号：0~65535 区分同一台服务器上的不同服务 [默认端口号：HTTP: 80 HTTPS: 443 FTP: 21] 默认端口号是浏览器处理的
- 问号参数：可以把一些信息传递给服务器“get系列”；也可以实现两个页面之间的信息通信；SPA单页面中，实现组件和组件之间的通信；…
- HASH哈希值：锚点定位；HASH路由；…
编码问题：URL中特殊内容的编码
- encodeURI decodeURI 编译能力弱，只是把URL地址中的中文或者空格等编译 “用于整个URL的编译”
- encodeURIComponent decodeURIComponent 编译能力强，还可以多编译一些特殊符号“用于传递参数的某个值编译”
- escape unescape 只适合客户端之间的通信和编码
axios.get(`http://www.xxx.com/api/list?name=${encodeURIComponent('雪之下雪乃')}&from=${encodeURIComponent('http://www.weixin.com/')}&lx=1`);
缓存检查
缓存检查针对静态资源文件，例如：html/css/js/图片…
缓存位置：内存、硬盘
F5普通刷新：TAB页卡没关闭，先检测内存，再检测硬盘是否有缓存
重新打开页面：直接检测硬盘中是否有缓存
CTRL + F5强制刷新：不检测任何缓存，直接向服务器发送请求
DNS解析【域名解析】
在DNS服务器上，基于域名找到服务器的外网IP，后面我们就可以基于服务器的外网IP找到服务器了
DNS解析也有缓存
- 从本地缓存中找时用的是递归查询
- 从DNS服务器上查找时用的时迭代查找
一次DNS解析大概20ms~120ms之间
服务器拆分优势： - 资源的合理利用
- 抗压能力加强
- 提高HTTP并发
TCP三次握手
在拿到外网IP后，我们开始建立客户端和服务器端连接的通道“TCP通道”
- TCP：稳定的网络通信协议【图稳定】
- UDP：不稳定的网络通信协议【图个快，例如音视频的传输】
TCP作为一种可靠传输控制协议，其核心思想：既要保证数据可靠传输，又要提高效率
数据传输
HTTP报文 - 请求报文
- 响应报文
TCP四次挥手
断开TCP连接通道
- connection：keep-alive 长连接，在一定时间内，如果建立连接之后，可以保证连接通道不关闭，这样可以提高传输效率
性能优化汇总
- 利用缓存
- 对于静态资源文件实现强缓存和协商缓存（扩展：文件有更新，如何保证及时刷新？）
- 对于不经常更新的接口数据采用本地存储做数据缓存（扩展：cookie/localStorage/vuex|redux 区别？）
- DNS优化
- 分服务器部署，增加HTTP并发性（导致DNS解析变慢）
- DNS Prefetch（预先载入）
- TCP的三次握手和四次挥手
- 数据传输
- 减少数据传输的大小
- 内容或者数据压缩（webpack等）
- 服务器端一定要开启GZIP压缩（一般能压缩60%左右）
- 大批量数据分批次请求（例如：下拉刷新或者分页，保证首次加载请求数据少）
- 减少HTTP请求的次数
- 资源文件合并处理
- 字体图标
- 雪碧图 CSS-Sprit
- 图片的BASE64
+…
- CDN服务器“地域分布式”
- 采用HTTP2.0
网络优化是前端性能优化中的重点内容，因为大部分的消耗都发生在网络层，尤其是第一次页面加载，如何减少等待时间很重要“减少白屏的效果和时间“
- LOADING 人性化体验
- 骨架屏：客户端骨屏 + 服务器骨架屏
- 图片延迟加载
- …
|