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文件有机会被浏览器缓存起来。