前端性能优化

前端性能优化

一,加快通信(请求)速度
二,加快数据处理速度

渲染方式、数据处理，后端、网络通信相关的所有内容；

入手：基于http请求响应的这一系列过程，有两个方面入手：

一,如何让网络通信更快，发请求更快？

1. 尽量用http2不要用http1；首先http2有头部压缩机制，谷歌专门提出一个HPACK压缩算法，传一个索引表（只存常用头信息），辅助哈夫曼编码来encode头id；其次http2真正实现了多路复用（2进制帧传数据）；

2. 服务器层面：物理距离无法更改，但是如果有多个服务器，选择近距离的服务器,但是如果最近点负载过高，就选择次近点；CDN: content delivery network服务器通信层面；原理像物流仓库

   如果只能http1，以下方法用来优化http1：

3. 合并资源（雪碧图），减少http请求数量，避免不停建立链接

4. 域名分片：HTTP 里“并发连接”（concurrent connections），也就是同时对一个域名发起多个长连接，用数量来解决质量的问题。

   如果每个客户端都想自己快，建立很多个连接，用户数×并发数就会是个天文数字。服务器的资源根本就扛不住，或者被服务器认为是恶意攻击，反而会造成“拒绝服务”。HTTP 协议和浏览器不是限制并发连接数量吗？好，那我就多开几个域名，比如 shard1.chrono.com、shard2.chrono.com，而这些域名都指向同一台服务器 www.chrono.com，这样实际长连接的数量就又上去了

5. 缓存机制（强缓存，协商缓存）。做法：第一次请求后，服务器给客户端设置头部cache-control或者expires，让客户端自己决定下次请求是否触发强缓存；客户端第二次请求时头部有if-modified-since给自己设定时间，服务器再根据lastmodified判断是否触发协商缓存；

   

6. 用算法进行数据压缩（gzip、br）

7. 代码文件压缩：HTML/CSS/JS中的注释，空格，长变量名等等，webpack打包工具；less/sass等

8. 静态资源：字体图标，缩小尺寸，使用jpg/webp格式

9. 头与报文：http1.1压缩头部，http2就有这个机制；

二, 服务器如何让数据处理更快，处理数据，回复请求更快？

1. 服务器端AB分析工具，没有深入学习，学node时再学这个吧

客户端如何让数据处理更快，客户端拿到数据后，怎么更快显示

1. 优化前端代码：

2. 渲染方案：不用纯客户端渲染（CSR）,而是辅助服务器渲染（SSR），比如把首屏，先在服务器端把用到的css/html/css整合成一段html字符串，客户端接收到这一串字符串之后就能直接显示，避免了多次请求等待响应；