性能优化之yohoo雅虎军规

原网址: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:同一地址不重复执行,可以被缓存

* 前端性能检测工具:

.https://www.cnblogs.com/AustinAn/p/3747042.html

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。