质量度量平台性能优化-3

时隔半年,继续写两篇对质量度量系统的性能优化。
刚开始做质量系统时,大家对前端的东西很不专业,写的代码比较乱,而且文件的组织格式也有问题。这里简单提一下,前段时间对前端做的2个优化点(其实就是填了前面的两个坑):
(1)页面所需静态文件(js/css)的精简:以前的老代码,将该系统所有的js/css都引入到了一个Base.html模板中,所有的页面都集成Base.html,这样可以在页面/js中随意调用存在的各种方法;两个很大的坏处是:每个页面都要加载很多(50+)的JS/CSS文件(当然第一次访问后,在本地缓存没过期的时候,其实也还好,影响不大)、JS中的全局变量可能被另外的JS中修改、覆盖从而产生bug(我们真的还遇到过)。
解决方法:对Base.html进行清理,删除对非公共的js/css等的加载;在具体的页面中,仅使用本页面用到的JS/CSS(而不是全部都引入)。

(2)外部JS本地化:我们使用Echarts这个库来画图表,老代码中调用echarts时,直接是用的baidu上的域名(如:http://echarts.baidu.com/build/echarts);问题就是在公司网络条件下访问echarts.baidu.com去下载js比较耗时(当然没有访问内网服务器上的JS快了)。
解决方法:将echarts下载到本地代码中,在调用时写本地相对路径,例如:

这个前端优化的效果是,一个页面的静态资源请求数下降了50%,不过在具体页面加载中优势不明显(因为在内网中且静态资源是nginx在支撑,js/css下载很快),页面响应时间大约从0.48s降低为0.43s。

另外,今后还可以做多个JS合并(减少请求个数)、然后将JS压缩Minify(减少数据传输量)。可以按照Yahoo的那个经典的web site加速的规则来优化:https://developer.yahoo.com/performance/rules.html

master

Stay hungry, stay foolish.

发表评论

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