年夜拟定打算，到前后端的开发，最后到测试以及上线，历时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 的重构
恰是这些各类延迟加载内容的奇淫技巧在最年夜限度上晋升了网页首屏的加载速度。可是延迟加载内容带来的副浸染需要声名，对于一些斗劲主要的内容，需要考虑到对 seo 的影响。
前端能做得根基都说完了，再来说说处事端的优化工作吧。原本处事端供给给前端的数据源都是年夜各个站点过来的，前端需要跟各个部门的开发人员打交道，而且他们供给的数据源在机能上也斗劲慢。经由协商抉择将各数据源汇总到一台中心处事器上，前端统一年夜这台中心处事器中去取数据，处事器端之间的通信都加上必然的缓存时刻，这样就解决了数据源慢和不统一的问题。
年夜头梳理了四级联动搜索的营业逻辑，并对四级联动搜索的交互功能做优化，增强用户体验。这个模块的 ajax 交互功能较多，最年夜的 JSON 数据包竟然有94.4KB，此时合理的操作当前页面的缓存功能($.fn.data)很主要。体积最年夜的 JSON 数据包在页面 Dom Ready 后进行加载，然后拼装第一屏的 HTML 代码并缓存，当用户按字母索引选择游戏的时辰再到已加载完的 JSON 数据包中寻找响应的数据去拼装 HTML 代码，然后缓存该索引的 HTML 代码。如不美观接下来再选择区、服、生意类型时，再各处事器去取响应的 JSON 数据，拼装成 HTML 代码后进行缓存，此时只缓存最后一次的选择结不美观。
便平易近中心也同样是首页营业逻辑很复杂的模块，涉及到良多的ajax交互以及表单的操作。各个TAB中的表单是按照请求的JSON数据来生成HTML结构的，原本是每次点击TAB城市请求一次数据，然后生成HTML结构，每切换一次TAB都要请求，再生成，这真得很二。同样的数据和结构只要请求一次，并生成一次即可，这种一再的操作是赤裸裸的华侈资本。该模块的JavaScript原本请求的动态站点的文件，没有做缓存也没做过压缩，每次页面加载都在这里梗阻一小会。这里的处事端的数据源接口也很乱，开发人员缺乏规范化数据接口的概念。这里的诸多问题，我已无力吐槽了。最后也是年夜头梳理蛋痛的营业逻辑，重构代码。
推荐阅读
跟着搜索引擎算法的不竭进级，我们可以发现算法朝着加倍垂青站内优化的标的目的，事理很简单无论你的外链何等的强年夜，无论你的收录何等的高量，假如你的站内设置无法知足访客的需求，不能让访客对劲的话，即使优化>>>详细阅读
本文标题：<b>网站分析：5173首页前端性能优化实践</b>
地址：http://www.lgo100.com/a/22/20120606/66113.html
网友点评
精彩导读
科技快报
品牌展示