原网址:https://developer.yahoo.com/performance/rules.html
翻译*:https://www.tuicool.com/articles/J3uyaa
1、减少http请求(雪碧图但图片不要过大)
减少从客户端到服务端的请求的内容(文字/图片/js/css)
2、使用CDN(内容分发网络)
内容分发网络:在离你最近的地方,放置一台性能好、链接顺畅的‘副本服务器’,以至于最快速度获取内容
3、添加Expires或者Cache-Control Http头(请求过的放在缓存,减少二次请求)
客户端请求后,服务器给客户端返回一个时间值(expire的http头),该时间代表资源过期的时间。过期就重新请求,不过期就继续使用
4、压缩文件Gzip
5、css样式放顶部
若放到底部,IE浏览器禁止了网页内容的顺序显示(网速低就白屏)火狐浏览器会出现html结构呈现,但无样式
6、js脚本放在底部
7、避免在css中使用Expressions(避免使用css表达式)
css表达式:页面显示和缩放、页面滚动、移动鼠标等都要重新计算一次
8、js和css文件位置灵活调整
写在html页面内:代码只应用于一个页面、脚本或样式少、不经常被访问
9、减少DNS查询
DNS查询:访问地址需要经过DNS查询,将地址映射成Ip地址(耗时20ms)
浏览器自带缓存,火狐和谷歌的缓存时间长,DNS的查询次数就少,节省时间
IE浏览器缓存时间短,能及时检测网址服务器的变化,保证正确性
使用时:
判断是多域还是单域
多域:将img、js、css等放在不同域名下(需要判断使用几个域名合适)
单域:所有都放在一个域名下
10、压缩js/css
11、减少重定向(减少请求次数)
12、移除重复脚本
13、配置实体标签
ETag:实体标签属于HTTP协议,受web服务支持
浏览器向服务器请求,服务器通过ETag做对比,看是否变化。若无变化返回304
14、使用AJAX缓存
POST:每次都执行,不被缓存
GET:同一地址不重复执行,可以被缓存