本文总结了前段时间针对前端开发后，进行的一系列优化速度过程进行总结，重点说明http协议以及针对nginx的配置；

web页面优化方法

1. css，js等的优化方法

• 尽量使用cdn中的css，js；
  浏览器同一个域名最大并发连接为6个，如果访问自己服务器上的资源，占用了并发连接数；延迟了后面数据的加载
• 使用defer 属性，异步加载script
• 优化图片加载
  使用雪碧图或者延迟加载图片

2. 开启nginx的压缩

server {
  gzip on;
}

3. cache-control
   通过chrome的开发者工具可以看到加载的时候，很多是304的响应码；这是因为第一次请求的时候nginx返回了资源的最近修改时间；last-modified；第二次请求的时候就会带上last-modified字段，变成if-modified-since字段；如果nginx发现本地文件的时间一致就返回304；

   
   屏幕快照 2018-10-24 15.33.50.png

这种方式毕竟还是需要一次http请求；如何减少http请求呢？

通过在nginx.conf中设置缓存时间，在http response header中加入cache-control字段，使得浏览器不再发送请求直接使用本地缓存；

 location ~* \.(jpg|jpeg|png|gif|webp) {
                expires 30d; #缓存30天
}
 location ~* \.(css|js) {
         expires 7d; #缓存七天
 }

屏幕快照 2018-10-24 16.20.01.png

4. etag
   这个nginx是默认打开的，如果要关闭要 加上 etag off;
   可以看到response header里面有一个etag字段；当第二次访问的时候，添加到If-None-match字段中；
   但是使用etag 需要服务器计算，会增加服务器的cpu使用；