从制定打算，到前后真个开辟，最后到测试以及上线，用时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、页面加载速度过慢，有白屏现象，首屏完成加载很慢；

上面的数据让你很震惊，这也说明了有很年夜的优化空间。找出了问题所在，接下来才有具体的实施标的目的。总之，无论是常规的体例，亦或是奇淫技能，目标只有三个字，"快，更快"。

具体实施

虽然粗看页面的内容其实不是很多，可是具体到功能模块，都是很费时吃力的。我们老年夜有一句很经典的话，"通常我会问面试人员一个问题，如果你独自来做5173首页的前端工作，多久能完成？如果谜底只有一个星期，要么是没看过页面，要么就是很不专业。"我就独自花了一个多月的时间才完成首页的前端开辟工作。下面来讲说具体的实施吧。

HTML&CSS 的重构

页面的设计和功能没有变动，可是HTML页面仍是要做完全的重构，这里我也测验测验了使用 HTML5 的新标签来对页面进行布局。CSS 的重构也是天经地义的，原来有12个外链的 CSS，这些都要统统干失落的，有些模块如果不止首页有用到，就需要模块化，该放到公用文件就放到公用文件中，在开辟的时候可以分多个模块，然后使用 @import到一个文件中，打包发布的时候再归并成一个文件。这需要掌控好一个度，即要公道操纵缓存，又要避免单文件过年夜，同时也要做好模块化。

老首页有很多 CSS 选择器太长的问题，可能一个 CSS 选择器的组合长达6-7个也是常有的事，CSS 选择器太长不但仅是性能方面的影响，同时也因为 CSS 权值的关系，给后期维护带来了很多的麻烦。应该多使用 class 来定义选择器，再加上 tag 选择器的组合，最多3个选择器的组合就可以满足绝年夜大都的需求了，别的在 CSS 的编写方面制止使用 id 选择器和 !important，养成杰出的 CSS 编写习惯很重要。

JavaScript 的重构

JavaScript的重构太迫切了，原来竟有41个 JavaScript 外链文件，当然这些外链也包含了15个告白的外链，告白的优化我稍后再说，可是还剩下26个外链 JavaScript。这些臃肿不堪的 JavaScript文件便是造成页面加载梗塞的元凶，也是系统资源占用的蛀虫，这是整个项目的难点之一。