前端性能优化

1. 更快的网络通信

• 客户端和服务端之间，请求或响应时 数据在路上的时间让它更快

服务器通信层面：
① cdn：内容分发网络，全球各地都建立服务器，挑选最佳节点（就近/网络负载较低）请求服务器。核心：全局负载均衡、缓存系统

② 减少请求次数
由于客户端与服务器建立连接、释放连接耗费时间，所以尽量减少请求次数。

• 资源合并 （css sprite）在http2上不好
• 域名分片-多域名：js、css部署在不同的域名上

数据传输层面
缓存
① 强缓存
<- cache-control: max-age=600
<- expires: Mon，14 Sep 2020 09:02:20 GMT
② 协商缓存
<- last-modified: Fri，07 Aug 2020 02:35:59 GMT
-> if-modified-since: Fri，07 Aug 2020 02:35:59 GMT
<- etag: W/“5f2cbe0f-2382”
-> if-none-match: W/“5f2cbe0f-2382”

压缩

• 数据压缩：gzip与新的br

• 代码文件压缩：HTML/CSS/JS中的注释、空格、长变量名等等

• 静态资源：字体图标,去除元数据,缩小尺寸及分辨率，使用jpg或者webp格式

• 头与报文：http1.1中减少不必要的头、减少cookie数据量

HTTP2比HTTP1更快速：
头部压缩、二进制帧、链路复用

2. 更高效的数据处理

• 服务器接到请求之后，更快的整理出客户端需要的数据
• 客户端收到响应的数据后，更快的给用户展示 以及 交互时更快的处理

前端代码层面

1. HTML语义化标签加强DOM解析
2. 多使用伪元素，减少JS多DOM的查找遍历
3. 能用HTML/CSS 实现的效果就不要用JS
4. 逻辑与展示解耦，避免不必要的JS引擎启动
5. 减少作用域查找和闭包,避免==，使用块级作用域

3. 其他性能优化

客户端渲染方案（CSR）

• “白屏”时间更长，用户体验不好
• HTML中无内容，SEO不友好

服务的渲染方案（SSR）
主流的服务的渲染方案：
next.js --> react
Nuxt.js --> vue

静态站点生成方案（SSG）

总结：

更快网络通信方面比如：CDN做全局负载均衡、CDN缓存、域名分片、资源合并、雪碧图、字体图标、http缓存，以减少请求；还有gzip/br压缩、代码压缩、减少头信息、减少Cookie、使用http2、用jpg/webp、去除元数据等等。

更快数据处理方面比如：SSR、SSG、预解析、懒加载、按需引入、按需加载、CSS放上面、JS放下面、语义化标签、动画能用CSS就不用JS、事件委托、减少重排、等等代码优化