什么是前端性能?
从用户键入网页地址开始,到用户看到完整的页面位置,所消耗的时间,我们称之为页面响应速度,提升这个速度,就是提升性能。
分析这个过程:
1.带宽限制:页面频繁的与服务器交互,产生的流量受到用户带宽的制约
2.浏览器限制:浏览器对同一域名下的资源请求并发量有限制,这里引用一篇相关文章https://www.cnblogs.com/sunsky303/p/8862128.html
3.DNS限制:域名在DNS查询时消耗一定的时间
4.http请求限制:一个页面的http请求越多速度越慢
5.服务端限制:资源读取消耗的时间
带宽限制
随着三大运营商不断改善用户带宽,绝大部分用户已经不再受到带宽问题的限制。
浏览器限制
将静态资源部署到独立的服务器,相当于将一部分请求更换了域名,这种方案是非常常见的,比如很多内容分发网络CDN就是其中一种。但缺点是费用比较高,属于从硬件上进行解决。
DNS限制
该方法暂不讨论
http请求限制
方法1:减少http请求次数,使用压缩工具如webpack对css和js进行压缩,图片使用雪碧图,合并多余的接口
方法2:减小http请求体积,对静态资源进行去cookie处理
服务端限制
方法1:一般的服务器使用固态硬盘对资源进行存储,可以使用高速内存存储的服务,例如varnish高速缓存服务器来搭建静态资源服务
方法2:如果你的服务是http1.0协议,可以考虑升级为http2.0,http2.0协议可以开启server push功能加速静态资源,在请求一个静态资源时其相关联的静态资源将会被服务端推到客户端,无需再次请求