原网址：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头)，该时间代表资源过期的时间。过期就重新请求，不过期就继续使用
屏幕快照 2019-08-09 下午3.36.56.png
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、减少重定向（减少请求次数）
屏幕快照 2019-08-09 下午5.44.18.png
12、移除重复脚本
13、配置实体标签
ETag：实体标签属于HTTP协议，受web服务支持
浏览器向服务器请求，服务器通过ETag做对比，看是否变化。若无变化返回304
14、使用AJAX缓存
POST：每次都执行，不被缓存
GET：同一地址不重复执行，可以被缓存
网友评论