最近参与了一个基于微信公众号的项目,上线发布后,打开速度有较慢,用户体验很差,经过一番折腾总算达到了一个暂时可以接受的程度,归纳如下:
问题0:
通过配置NGINX日志和TOMCAT访问日志,进行分析查看处理速度,发现服务器处理速度很快,不是服务器端逻辑处理的问题。那么就是网络环境或者页面解析的问题;最终发现以下问题:
问题1:
页面跳转过多,对于G网络发起连接慢的环境会对速度体验造成巨大的问题;
处理办法:
1,去掉
项目中不必要的跳转;
问题2:
通过Chrome浏览器,查看页面的资源下载速度和连接数,获知JS,CSS资源很多导致连接数很大,amazeui相关CSS和JS很大,大大300K左右;
处理办法:
1,开启TOMCAT压缩,减少下发数据量; --效果不够明显;
2,合并相关的JS和CSS,通过压缩工具对JS和CSS进行再次压缩 ---过度压缩会导致以后开发成本加大,建议:有选择的压缩;
3,对比较大的图片通知美工进行压缩或者更换图片格式,尽量减小;
4,使用CSS Spirite技术,减少图片下载的连接数
问题3:
通过以上两个步骤的调优后速度有很大提升,但是还不尽如人意,尤其G网在网络不稳定的情况,问题更加明显,表现为时好时坏。
处理办法:
1,动静分离,使用阿里云CDN,将比较大的比较大的JS、CSS和IMG文件部署在CDN上,提供服务器的可用性;--更新问题通过添加版本 来保证清理缓存;
1,动静分离,使用阿里云CDN,将比较大的比较大的JS、CSS和IMG文件部署在CDN上,提供服务器的可用性;--更新问题通过添加版本 来保证清理缓存;
2,使用域名预解析和资源预加载,在登陆跳转页面对社区中用到的域名和部分资源进行预处理,充分利用跳转页;
3,加大域名解析的TTL时间,降低域名解析的时间;
4,配置NGINX缓存,将IMG资源文件在NGINX服务器进行缓存,减少到后端服务器获取的时间(虽然很小),设置浏览器过期时间,减少请求链接;
5,设置图片服务器缓存到期时间和CDN上静态资源缓存时间为30天;
问题4:
登陆过程中在网络不好的情况下,登陆跳转页面会有卡的感觉,分析后是因为服务器端使用了ACTION重定向,原本以为这个是服务器端的跳转,其实是通知客户端浏览器打开一个新的地址(唉。。。开发知识很重要)
处理方法:
1,修改页面请求方式,改为AJAX方式获取不在进行重定向
总结:
1,WEB应用开发不仅仅要保证服务器端处理速度足够快,还要保证前端页面加载和解析速度足够快;
1,WEB应用开发不仅仅要保证服务器端处理速度足够快,还要保证前端页面加载和解析速度足够快;
2,通过日志和分析工具来判断问题所在,针对问题去解决问题;
3,规范开发,学习各种开发方式,保证代码灵活,动静分离等。
其他资源:
1,前端速度检查工具
:
2,前端优化基本思路:
(2),
移动网站性能优化:网页加载技术概览
http://blog.jobbole.com/46599/
3,前端自动构建:
(1), 工具
http://www.gulpjs.com.cn/