性能优化实例

偶然发现老板在使用公司内部的OA系统时,任务管理界面加载速度非常慢,经常刷新之后过个几秒才能展示完所有数据。作为产品经理,保证用户的体验是非常重要的,在经过与老板的沟通后,决定优化这个地方。

前端页面优化

幸好还有点前端开发的底子,面对性能优化这个问题也没有太犯怵。使用Chrome的Developer Tools可以轻松搞清楚哪些地方需要优化。
1. 减少http请求
减少http请求能够减少多次TCP连接占用的时间、多次DNS解析/缓存查找占用的时间。

  1. 使用缓存
    可以使用CDN缓存或浏览器缓存,将css、js、img等静态文件,可以参考浏览器与cdn缓存

  2. 压缩html、css、js
    现在的前端开发环境,一般都会设置生成build包时,合并压缩js、css文件,所以影响较小。

  3. 按需加载
    通过使用Developer Tools发现,现在的OA系统确实存在同时加载内容过多导致加载时间过长的问题,下一步会放懒加载或者将过多的内容用多个tab去呈现的方式优化

  4. 代码优化
    代码优化相对麻烦些,像那些导致页面重绘重排的代码,比如盒模型样式改变等,这些基本都是不可避免的,只能在满足需求的情况向尽量减少类似定位属性浮动属性等的使用

后端性能优化

  1. 网页开启gzip
    网页开启gzip压缩后,能够大大减少数据的大小,从而显著提高网站访问速度。网站是否开启gzip可以通过一个在线小工具查看网页GZIP压缩检测,也可以通过Chrome浏览器的Developer Tools查看。
    开启gzip
    在Response Headers中,如果有Contnet-Encoding:gzip,则说明后端开启了gzip

  2. 接口延迟时间优化异步打印日志
    waiting_1
    waiting_2
    上面两张图可以看到接口的延迟比较长,除了读写db外,可能也有额外的同步io,比如大量日志打印的情况。
    因为我们的OA系统有数据记录的需求,所以需要看一下是不是日志使用同步的方式打印的,如果是的话改成异步打印。

  3. db优化
    大数据量查询db时,需要考虑orm框架本身的缓存机制,一级sql语句的写法是否合理。

总结

以上就是关于公司内部OA系统性能优化方面的小总结

发表评论

邮箱地址不会被公开。 必填项已用*标注