前端性能优化
两大优化方向: 更快的网络通信 更快的数据处理
网络通信方面
一. 应用 cdn
CDN (内容散发网络)
是将源站内容散发至最靠近用户的节点，使用户可就近获得所需内容，进步用户拜访的响应速度和成功率。解决因散布、带宽、服务器性能带来的拜访提早问题，实用于站点减速、点播、直播等场景。
原理是 就近向本地左近的服务器发动申请 (能够了解为士兵不必从大本营那调兵, 能够从当地的据点或兵营调兵)
就是差不多这个意思
二. 优化申请数据
建设连贯相当消耗性能
①为了缩小发送申请的次数
资源合并 — 应用雪碧图 (原理就是将多个照片资源放到同一张图外面, 例如 icon 图标放到同一张照片外面)
将多张图片合并到一张图片后，只需一次网络申请就能够将所需的资源全副下载，减小建设连贯的耗费，在挪动端尤为显著
②放慢申请速度
采纳域名分片 – 多域名
大多数浏览器容许并发 6 - 8 申请
为了能够同时下载超过该限度数的资源， 域名分片 会将内容拆分到多个子域中。当应用多个域来解决多个资源时，浏览器可能同时下载更多资源，从而缩短了页面加载工夫并改善了用户体验。
大略意思是 一个域名能够申请下载 6 - 8 个数据, 我将域名拆分成多个二级子域名 这样每个二级子域名都能够并发多个申请, 并且能够同时下载多个所需的资源
三. 设置缓存
大体是 强缓存和协商缓存
强缓存:
强缓存就是给资源设置个过期工夫，客户端每次申请资源时都会看是否过期；
只有在过期才会去询问服务器
协商缓存 : 协商缓存就是须要客户端和服务器两端进行交互的。
总结:
每次用户失常关上这个页面，浏览器会判断缓存是否过期，没有过期就从缓存中读取数据；
然而有一些 “ 聪慧 ” 的用户会点击浏览器左上角的刷新按钮去刷新页面，
这时候就算资源没有过期（1 年没这么快过），浏览器也会间接去申请服务器，
这就是额定的申请耗费了，这时候就相当于是走协商缓存的流程了
协商缓存过程:
发申请 –> 看资源是否过期 –> 过期 –> 申请服务器 –>
服务器比照资源是否真的过期 –> 没过期 –> 返回 304 状态码 –> 客户端用缓存的老资源。
具体可看: 彻底弄懂强缓存与协商缓存
** 四. 数据压缩
压缩 html/js/css 网上工具有很多, 就是将外面代码外面的正文空格等等都删掉 个别 webpack、vite 等编译时都会帮咱们压缩
动态资源的压缩我举荐 tinypng 压缩 png 或 jpg 文件
如果采纳 http2 的话, 那之前的资源合并和域名分片就不须要做了, 因为 http2 做的更好
http2 对性能的优化