界面优化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 Evaluation ，Use Object/Array Literals，Don’t Repeat Work，Use the Fast Parts，NativeMethods

          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端的性能测试也是需要进一步积累的方向。