1 减少HTTP请求

（1） 图片相关

• 图片地图

• CSS Sprites 和图片地图一样，可以合并图片。将多个图片合并到一个单独的图片中。区别：图片地图中的图片必须是连续的，css Sprites 没有这个限制

• 内联图片。即将图片转换成base64格式。在src中引用
  例如：
  <img src='data:img/jpg;base64,....>
  由于data:URL是内联在页面中的，在跨越不同页面时不会被缓存，因此不要去内敛公司Logo,因为编码过的Logo会导致页面变大。这种情况下，可以使用css将内联图片作为背景，将该css规则房子外部样式表中，这意味着数据可以缓存在样式表内部。

（2）合并脚本和样式表

适当的合并，要考虑代码模块化

2 使用内容发布网络（使用CDN）

CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。

添加Expires头

图片和js或css 缓存nginx.conf里配置

http{
    ...
    server {
        server_name xx.xx.com;
        listen 8443 ssl;
        listen 8080;
 
        location ~* ^.+/.(jpg|jpeg|gif|png|bmp)$ {
        expires 30d; //30天
        break;
        }
       location ~* ^.+/.(js|css)?${
       expires 30d;
       }
    }
}

Expires头使用一个特定的时间，它要求服务器和客户端的
时钟同步。
Cache-control使用max-age指定组件被缓存多久。
Cache-Control: max-age=315000000
若同时使用max-age ,和expires,max-age指令将重写Expires头

4 压缩组件

image.png

5 将样式表放在顶部

使用Link标签将样式表放在文档Head 中。

6 将脚本放在底部

7 避免css表达式

8 使用外部JavaScript 和Css

这样JavaScript 和Css文件有机会被浏览器缓存起来。

9 通过使用Keep-alive和较少的域名来减少DNS查找。

10 精简JavaScript

11避免重定向

12 移除重复脚本

13配置ETag

14 使用Ajax可缓存