首页 > 代码库 > 界面优化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 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端的性能测试也是需要进一步积累的方向。
界面优化x步走