前端性能优化
一,加快通信(请求)速度
二,加快数据处理速度
渲染方式、数据处理,后端、网络通信相关的所有内容;
入手:基于http请求响应的这一系列过程,有两个方面入手:
一,如何让网络通信更快,发请求更快?
尽量用http2不要用http1;首先http2有头部压缩机制,谷歌专门提出一个HPACK压缩算法,传一个索引表(只存常用头信息),辅助哈夫曼编码来encode头id;其次http2真正实现了多路复用(2进制帧传数据);
服务器层面:物理距离无法更改,但是如果有多个服务器,选择近距离的服务器,但是如果最近点负载过高,就选择次近点;CDN: content delivery network服务器通信层面;原理像物流仓库
如果只能http1,以下方法用来优化http1:
合并资源(雪碧图),减少http请求数量,避免不停建立链接
域名分片:HTTP 里“并发连接”(concurrent connections),也就是同时对一个域名发起多个长连接,用数量来解决质量的问题。
如果每个客户端都想自己快,建立很多个连接,用户数×并发数就会是个天文数字。服务器的资源根本就扛不住,或者被服务器认为是恶意攻击,反而会造成“拒绝服务”。HTTP 协议和浏览器不是限制并发连接数量吗?好,那我就多开几个域名,比如 shard1.chrono.com、shard2.chrono.com,而这些域名都指向同一台服务器 www.chrono.com,这样实际长连接的数量就又上去了
缓存机制(强缓存,协商缓存)。做法:第一次请求后,服务器给客户端设置头部cache-control或者expires,让客户端自己决定下次请求是否触发强缓存;客户端第二次请求时头部有if-modified-since给自己设定时间,服务器再根据lastmodified判断是否触发协商缓存;
用算法进行数据压缩(gzip、br)
代码文件压缩:HTML/CSS/JS中的注释,空格,长变量名等等,webpack打包工具;less/sass等
静态资源:字体图标,缩小尺寸,使用jpg/webp格式
头与报文:http1.1压缩头部,http2就有这个机制;
二, 服务器如何让数据处理更快,处理数据,回复请求更快?
- 服务器端AB分析工具,没有深入学习,学node时再学这个吧
客户端如何让数据处理更快,客户端拿到数据后,怎么更快显示
- 优化前端代码:
- 渲染方案:不用纯客户端渲染(CSR),而是辅助服务器渲染(SSR),比如把首屏,先在服务器端把用到的css/html/css整合成一段html字符串,客户端接收到这一串字符串之后就能直接显示,避免了多次请求等待响应;