Web性能优化

优化dns查询

尽量把资源都放在一个网站,如css、js,尽量减少域名,这样就可以减少dns查询

优化TCP连接

开启连接复用,在请求头里写keep-alive
使用HTTP/2.0的多路复用

发送HTTP请求

不滥用cookie,尽量减小cookie体积
使用cache-control(缓存),一段时间内不发送请求,用缓存文件
同时发送多个请求,如css和js,会同时下载提高效率,但和减少dns查询起冲突,所以文件少的时候,可以把所有资源放一个域名里,减少dns查询,但当文件多的时候可以把每8个文件放同一个域名里,这样8个文件以同时请求,减少了请求时间,

接收响应

ETag
服务器检查网页有无更新(md5),没有更新的话就返回304
GZip
用GZip把css、js压缩,再发送

优化js和css

不要把js、css写在html里,这样js、css文件就可以缓存
合并文件,把多个js合并成一个,减少请求数
把js和css文件都放在cdn,因为距离很远的请求费时很长,把文件放在cdn可解决距离的问题,还可以增加并发下载数
把css放在head里,js放在body最后,因为css不管放在哪都会阻塞html渲染,所以放在前面先下载,js放后面可以让html先显示,并且可以直接获取到节点(因为html已经加载完了)

延时加载(加薪)

首先只加载第一屏的内容,让用户可以很快看到第一屏,过20ms或者等用户往下滑再加载下面的内容
加个loading动画

预加载

如何测试一个网站

打开网站,打开控制台的Audits选项

更多性能优化查看