• 天上不会掉馅饼,想要富起来,就要把别人的据为己有,能把别人的据为己有的问世间能有谁,能有几人,所谓的专家明白了吗。 2019-05-24
  • 南通如皋为应对督察“回头看”违法掩埋危险废物 2019-05-24
  • 专家写的都是错误的,都是自己闭门造车,想出来的。 2019-05-24
  • 海淀区西三旗地区2000余人共享首届冰雪欢乐节 2019-05-23
  • 请问,建立市场经济后,原计划经济哪里去?改革后,我们还在实行计划经济,为何没有提及? 2019-05-23
  • 宝鸡市陈仓区党员干部助力夏收帮扶困难群体 2019-05-22
  • 相思湖边包鱼粽 孝心满满全家欢 2019-05-22
  • 中日韩三国记者“环保行”联合采访——日本 2019-05-19
  • 王珂晒老婆刘涛青涩军装照 小脸肉嘟嘟 2019-05-18
  • 电影别得了票房丢了观众 2019-05-17
  • 2018年端午节假期交通事故起数、死亡人数同比下降 2019-05-16
  • 站在重要历史时刻的旁边  2019-05-16
  • 中国环渤海帆船拉力赛招商发布会在京举行 2019-05-15
  • 海尔发行境外上市外资股获批 2019-05-12
  • 邹市明:70岁仍希望站在拳击赛场 不是天才成功源于努力 2019-05-12
  • 网站快捷导航 | 联系我们 | Sitemap
    UR建站联系电话:0311-82065950
    营销型网站更赚钱

    北京11选5分布走势图:网站制作中的首页前端性能优化实践

    发表日期:2018-07-22T22:30:05 内容来源:UR建站官网

    北京十一选5走势图 www.jrkmk.com 从制定计划,到前后端的开发,最后到测试以及上线,历时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文件即是造成页面加载堵塞的元凶,也是系统资源占用的蛀虫,这是整个项目的难点之一。

      重新梳理了四级联动搜索的业务逻辑,并对四级联动搜索的交互功能做优化,增强用户体验。这个??榈?ajax 交互功能较多,最大的 JSON 数据包竟然有94.4KB,此时合理的利用当前页面的缓存功能($.fn.data)很重要。体积最大的 JSON 数据包在页面 Dom Ready 后进行加载,然后拼装第一屏的 HTML 代码并缓存,当用户按字母索引选择游戏的时候再到已加载完的 JSON 数据包中寻找相应的数据去拼装 HTML 代码,然后缓存该索引的 HTML 代码。如果接下来再选择区、服、交易类型时,再到服务器去取相应的 JSON 数据,拼装成 HTML 代码后进行缓存,此时只缓存最后一次的选择结果。

     

    网站制作中的首页前端性能优化实践://www.jrkmk.com/content/424.html
    seo优化:北京十一选5走势图 SEO见效付费倡导者、引领者!
    点击关闭
    展开
  • 天上不会掉馅饼,想要富起来,就要把别人的据为己有,能把别人的据为己有的问世间能有谁,能有几人,所谓的专家明白了吗。 2019-05-24
  • 南通如皋为应对督察“回头看”违法掩埋危险废物 2019-05-24
  • 专家写的都是错误的,都是自己闭门造车,想出来的。 2019-05-24
  • 海淀区西三旗地区2000余人共享首届冰雪欢乐节 2019-05-23
  • 请问,建立市场经济后,原计划经济哪里去?改革后,我们还在实行计划经济,为何没有提及? 2019-05-23
  • 宝鸡市陈仓区党员干部助力夏收帮扶困难群体 2019-05-22
  • 相思湖边包鱼粽 孝心满满全家欢 2019-05-22
  • 中日韩三国记者“环保行”联合采访——日本 2019-05-19
  • 王珂晒老婆刘涛青涩军装照 小脸肉嘟嘟 2019-05-18
  • 电影别得了票房丢了观众 2019-05-17
  • 2018年端午节假期交通事故起数、死亡人数同比下降 2019-05-16
  • 站在重要历史时刻的旁边  2019-05-16
  • 中国环渤海帆船拉力赛招商发布会在京举行 2019-05-15
  • 海尔发行境外上市外资股获批 2019-05-12
  • 邹市明:70岁仍希望站在拳击赛场 不是天才成功源于努力 2019-05-12
  • 360新时时彩删除 中彩网开奖视频直播 11选五5爱彩乐 2017北京pk10平台 博彩技巧 排列五开奖号码 排列五 天津时时彩9-11 七星彩16150露大师 江西时时彩开奖走势 极速飞艇pk10开奖直播 广东时时彩诈骗 彩经网河内五分彩走势图 赌博游戏机 新时时彩贴吧 北京赛车技巧想输都难