前端性能优化--网络通信方面 (面试准备)

前端性能优化

两大优化方向: 更快的网络通信 更快的数据处理

---

网络通信方面

一.使用cdn

CDN (内容分发网络)
是将源站内容分发至最接近用户的节点，使用户可就近取得所需内容，提高用户访问的响应速度和成功率。解决因分布、带宽、服务器性能带来的访问延迟问题，适用于站点加速、点播、直播等场景。

原理是 就近向本地附近的服务器发起请求 (可以理解为士兵不用从大本营那调兵,可以从当地的据点或兵营调兵)
就是差不多这个意思

二.优化请求数据

建立连接相当耗费性能
①为了减少发送请求的次数
资源合并---使用雪碧图 (原理就是将多个照片资源放到同一张图里面,例如icon图标放到同一张照片里面)

将多张图片合并到一张图片后，只需一次网络请求就可以将所需的资源全部下载，减小建立连接的消耗，在移动端尤为明显

②加快请求速度
采用域名分片 --多域名

大多数浏览器允许并发6-8请求
为了可以同时下载超过该限制数的资源，域名分片会将内容拆分到多个子域中。当使用多个域来处理多个资源时，浏览器能够同时下载更多资源，从而缩短了页面加载时间并改善了用户体验。

大概意思是 一个域名可以请求下载6-8个数据,我将域名拆分成多个二级子域名 这样每个二级子域名都可以并发多个请求,并且可以同时下载多个所需的资源

三.设置缓存

大体是 强缓存和协商缓存

强缓存:
强缓存就是给资源设置个过期时间，客户端每次请求资源时都会看是否过期；
只有在过期才会去询问服务器

协商缓存 : 协商缓存就是需要客户端和服务器两端进行交互的。

总结:
每次用户正常打开这个页面，浏览器会判断缓存是否过期，没有过期就从缓存中读取数据；
但是有一些 "聪明" 的用户会点击浏览器左上角的刷新按钮去刷新页面，
这时候就算资源没有过期（1年没这么快过），浏览器也会直接去请求服务器，
这就是额外的请求消耗了，这时候就相当于是走协商缓存的流程了

协商缓存过程:
发请求-->看资源是否过期-->过期-->请求服务器-->
服务器对比资源是否真的过期-->没过期-->返回304状态码-->客户端用缓存的老资源。
具体可看:彻底弄懂强缓存与协商缓存

**四.数据压缩

压缩html/js/css网上工具有很多,就是将里面代码里面的注释空格等等都删掉 一般webpack、vite等编译时都会帮我们压缩

静态资源的压缩我推荐tinypng 压缩png或jpg文件

如果采用http2的话,那之前的资源合并和域名分片就不需要做了,因为http2做的更好
http2对性能的优化