首页 > 代码库 > 界面优化x步走

界面优化x步走

前一阵子,对系统界面做了些调优的工作。简单总结下:

1. js css压缩合并,老生常谈 ,前面blog也介绍了assets管理自动压缩的 机制。

2. 图片sprite png合并 就是将多个图片合并到一张图片上,减少了网络请求。

3. 图片优化,optipng-0.7.5.man.pdf 压缩图片到比较好的大小,经过仔细对比,感觉其实是减少了一些相近的颜色,统一替换。

4.  Defer parsing javascript ,其实就是将javascript滞后,不阻止页面加载,具体原理可以阅读《high performance javascript》,我做过一个简单的讲座,介绍了这本书,这里稍微展开下里面提及的一些优化方法

         1) javascript block ui 就是这个,滞后加载一些js

         2) 编程相关:a)减少全局变量,使用局部变量(scope chain 原理) b)减少DOM操作,批量进行DOM操作,缓存DOM对象避免多次跨越JS和DOM之间的桥梁  c)Reflow 和Repaint  减少,批量 ,缓存。少重绘回流。 d)算法控制,循环,duff设备算法 e) string和正则操作backtrace f)UI线程 ,Responsive Interfaces 队列更新机制,settimeout是插队列的时间,原则100毫秒,拆分长任务 g)Ajax技术 h)实践:Avoid Double EvaluationUse Object/Array LiteralsDon’t Repeat WorkUse the Fast PartsNativeMethods

          3)部署,工具  -  压缩合并,gzip,缓存js,CDN,敏捷部署

5.  Preload预加载,在比如首页加载完成后,下载下内部页面的部分common的js,提前让浏览器缓存起来。这方法主要是提升首次加载的响应。

6. nginx mod_gzip开启 注意js的mimetype

7. doing block task in the background 前面blog介绍了beanstalkd队列系统

8. model层数据请求cache php框架一般都有些自带的封装,比如基于apc memcache filecache等的

9. view层的cache

10. 默认进view的类似indexAction等,尽量少做一些数据获取之类的程序逻辑,而通过页面加载后的ajax回调来获取局部更新,使得页面进入更快。

11. CDN jquery jqueryui等

12. 常见的一些标准,css放在前面头部,避免加载完后reflow,给加expire header等

13. SQL优化,现在项目的sql还算简单

14. YSLOW Pagespeed等 分析网站:网站测速http://ce.cloud.360.cn/task网站安全检测http://webscan.360.cn/网站优化http://gtmetrix.com/


我们项目尚未做的,但也评分也ok的

1. HTML压缩。也许phalcon自己做了?没研究,评分过关了。

2. Profiling with XDebug ,xdebug之前的项目用过,这个项目暂时还没使用,主要输出php 方法的一些调用情况,使用时间什么的,玩的不好。。

3.  Unit testing -- PHPunit 测试代码。。木有资源做呀。。


感受:

1. 页面优化是一个不积跬步无以至千里的事情,一点点很小小的改进,逐步带来了大的提升。切记勿以善小而不为。

2. 同步可以实施的还有网站安全,以及SEO需要进一步加强

3. cache的优化可以说是提升最大的,在高并发多用户的loadrunner测试环境上充分体现了出来。web端的性能测试也是需要进一步积累的方向。


界面优化x步走