从制定计划，到前后端的开发，最后到测试以及上线，历时4个月，5173首页前端性能优化项目终于顺利上线，并达到了预期的性能优化目标。这次的项目并不是改版，而是原来首页的设计和功能不变，只做重构和优化。虽然项目名叫前端的性能优化，但也并不仅仅是前端单方面的工作，要想彻底的把优化做好，就需要前后端的通力配合。
历史背景
老首页应该是09年上线的，首页也是各部门争夺资源的地方，大家都想在首页有一席之地，各部门在首页都有各自的小豆腐块，如果有新项目的上线，大多是打补丁的方式，并且唯一的规范就是能保证功能正常运行，至于性能方面，那是很遥远的事。苦逼的是开发人员，每次有首页的修改都是担惊受怕的，怕改了这个那个又出问题，历史原因造成的问题越来越多。
最先看不下去的应该是前端人员，因为首页在不断的修修补补中，性能已经差到前端人员觉得很没面子的地步了。但是看不下去也仅仅是看不下去，没法采取实质性的措施来改善，因为这牵涉到各部门的利益，也如上面说的，优化不仅仅在于前端，于是前端人员也只能向上面反映问题。到了今年，终于领导也看不下去了，某领导在海外访问我司的818和5173首页，对比起来前者首页很快(插播一句，818首页前端开发人员也正是我^_^)，后者首页很慢，差别较大。于是在领导重视的推动下，5173首页的前端性能优化项目才经过批准，开发人员终于可以放手大胆的折腾了。
问题分析
在动手前要制定计划，制定计划要从解决实际问题出发，先来看看老首页的问题，这是我在制定计划时收集的相关数据：
1、请求数过多，其中CSS外链数有12个，JavaScript外链数竟有41个;
2、页面总体积过大，很多静态资源都没加gzip，动态站点的JS甚至都没有压缩过;
3、资源占用严重，在IE6下滚动页面时CPU占用率高达80%以上，内存泄漏也很严重;
4、广告系统，广告图片都是以document.write的方式在加载，页面堵塞的情况很严重;
5、页面有7个iframe;
6、数据源接口混乱;
7、页面加载速度过慢，有白屏现象，首屏完成加载很慢;
上面的数据让你很震惊，这也说明了有很大的优化空间。找出了问题所在，接下来才有具体的实施方向。总之，无论是常规的方法，亦或是奇淫技巧，目标只有三个字，“快，更快”。
评论