前端性能优化之-35黄金定律
网页内容
- 减少http请求次数
- 减少DNS查询次数
- 避免页面跳转
- 缓存ajax
- 延迟加载
- 提前加载
- 减少dom元素数量
- 根据域名划分内容
- 减少iframe数量
- 避免404
服务器
- 使用cdn
- 添加expires或cache-control报文头
- gzip压缩传输文件
- 配置etags
- 尽早flus输出
- 使用get ajax请求
- 避免空的图片src
cookie
- 减少cookie大小
- 页面内容使用无cookie域名
css
- 将样式表置顶
- 避免css表达式
- 用link代替@import
- 避免使用filters
javascript
- 将脚本置底
- 使用外部js和css文件
- 精简js和css
- 去除重复脚本
- 减少dom访问
- 使用智能事件处理
图片
- 优化图像
- 优化css sprite
- 不要在html中缩放图片
- 使用小且可缓存的favicon.ico
移动客户端
- 保持单个内容小于25kb
- 打包组建建成符合文档
.
减少http请求
80%的相应时间都是在下载网页内容(images,js
,css,falsh等),减少请求次数是缩短响应时间的关键
1.合并css,js 压缩
2.合并图片(精灵图)CSS Sprites
3.Image Maps: 也是将多幅图拼在一起,然后通过坐标来控制显示导航。这里有个经典的例子,选中图片中的某个人就会将你带到不同的链接
https://www.cnblogs.com/lei2007/archive/2013/08/16/3262897.html
https://www.jianshu.com/p/fe32ef31deed
https://www.cnblogs.com/slightFly/p/11881333.html
https://blog.csdn.net/qq_38045106/article/details/84782401
https://www.cnblogs.com/liuqing576598117/p/10303708.html
https://segmentfault.com/a/1190000019404454?utm_source=tag-newest
https://baijiahao.baidu.com/s?id=1635093315169254640&wfr=spider&for=pc
https://blog.csdn.net/weixin_45556713/article/details/101452701
https://www.cnblogs.com/xsilence/p/10916845.html
https://blog.csdn.net/qq_37939251/article/details/100031285
https://www.jianshu.com/p/c85662560161
https://www.jianshu.com/p/57fa1b0aad44
https://www.jianshu.com/p/1896789fc8a8
https://www.jianshu.com/p/41075f1f5297
https://blog.csdn.net/weixin_34261739/article/details/91472725
https://www.cnblogs.com/shy1766IT/p/11080658.html
https://www.cnblogs.com/lyhomepage/p/5867762.html
https://www.cnblogs.com/changlon/p/10165053.html