`
lorry1113
  • 浏览: 263283 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js 优化实践

    博客分类:
  • ext
阅读更多
前一阶段由于页面上的性能出了问题,于是进行了一次性能上的优化,时间也过了一阵了,想总结出一些东西来,可是一直没有时间,今天下班早一些,赶紧整理一下思路,以免以后忘记了。

    我们的框架配置:Struts2+Spring+Ext2.1

    页面布局:主页面=menu+toolbar+tabPanel ,每一个模块一个TAB页的形式展现出来。(很传统)

     我们经历的三次重构:

    1. 从普通的JSP+HTML+自定义TAG --》 EXT

     2. 多个JSP的TAB页面嵌套--》One Page One Application

     3. JS全部一次性加载--》JS依赖关系懒加载+JS压缩

    这三次重构的方案实际上是我们在EXT开发过程中的不断的犯错误中的教训总结。

   下面我就从这三次重构中总结一下每一次的出发点及动机,经历的磨难,最后的成效。

    第一次,从JSP+HTML+TAG --》 EXT2.1

     这一次的重构在我们项目来看是一次历史性的变革。项目在进行过程中,前期大量的需求调研,并与客户进行拍板定需求,可是客户都是打太极的高手,他们不会告诉你他要什么,他也不会拍些板来说这个就这么做了,所以我们对于需求上的定义始终是模糊的。他们对系统的要求也是相当的高,会要求在BS上的架构上进行数据实体的连线,会要求多种多样的表现形式。

    我们先从静态页面进行了初期的规划,画了一版静态页面,然后客户对些不发表任何意见,要求一个能连贯起来的系统。于是我们以最快的速度在短时间内使用 JSP+一些自定义的TAG+HTML+CSS画出了一些有较多功能性的模块,在这过程中,客户对页面不断的提出要求,要更多的用户体验,对我们所画出来的列表,表格,树以及布局都提出了较高的要求,并一再的埋怨我们的页面过于死板。在客户的不断压力下,领导提出了一个相当有风险的提议。使用当前国内界内用户量并不是很大,使用也不是很成熟的EXT。

    我在以前的项目使用过一段时间,只有少量的经验,这个决定很超出我的想像。在这一点上,我有很多东西需要向领导们学习。领导给我们的预研时间是一个星期。由于成手很缺少,于是项目内组织几个以前有过页面开发经验的一年的员工进行技术预研。这一周时间里,我们的预研人员数量还是不错,将EXT的版本定义在 2.1这个相对较新的版本,将各个类型的控件分配到下面的每一个人手里,一周的时间里,大家对各自的控件都有了一定的了解。

    其实这里差一点忘了一个更大的风险,我们的框架也是在这个时间里诞生的,之前公司内推的技术框架被领导贬的一文不值,于是我们有了搭建新的框架的想法。我们在这两周里,将框架的层次,各个层次的交互,异常的处理,事务的控制以及数据库的操作都定义出来了。其他的设计机制我们是在接下来的时间里完成的,但是前面所说的这几样最基本的模型是在这段时间里产生的。

    经历了这两周的时间的预研过程,我们在新的框架上建立了一个相对较完整的DEMO,将各个层次之间也一起串联起来了。

    时间很短,这里面领导的开发经验和天赋很让我佩服,我主要的工作是在前后台的交互,异常的处理和DEMO的开发上,并主要负责指导其他开发人员使用EXT的预研。

    总结一下这一阶段的主要开发思路,其实这一阶段主要将EXT的使用进行普及,使所有的开发人员可以基本熟练的使用EXT进行业务模型的实现,并解决处理业务中的一些问题。所以这一次重构基本谈不上优化,只是一次功能与业务在新框架上的迁移。

    第二次,将多页面的EXT模块开发转为one page one application

    我们新搭建的框架在根本上还是以JSP和JAVA做为开发语言,虽然前台使用了EXT,大量的使用了AJAX的调用,但是JSP在服务端的编译还是避免不了。

    同时,由于我们系统的特殊性,我们的业务的复杂性,我们在整个系统中,嵌套了多个页面,拥有多个JSP的嵌套。我们在第一阶段的时候,所有的模块的嵌入方式就是以iframe来进行嵌套。因此在这里,由于系统的复杂性,在最复杂的一个页面上,竟然嵌套了六层iframe。加上JSP的编译时间,再加上每一个页面上都引入了ext-all.js 和ext-base.js ,以及一些公共的JS文件,怎么可能不慢。我们粗略的计算了一下。最慢的页面打开要超过两分钟,客户端的硬件配置如果糟一点就更慢了。

    在这种环境下,我们不得不进行第二次的页面重构,进行性能的调优。

    分析一下这一次的重构,其实我们主要的问题在于业务的复杂性,数据量大,以及开发人员开发过程中的经验不足。

    从框架的设计上来说也是有着严重的不足,其中大量的使用iframe就是一个问题,经过一些专业的测试软件测试,发现很多的iframe关闭后,该页面所持有的DOM节点并未释放,后来做了特殊的处理,也同样是无法全完释放页面上的内存占用。每一个页面上都引了ext-all.js,就单单这一个JS的基础类库文件,就足足有近500K,虽然多个页面引用后下载只下载一次,从缓存文件中读取,但是每一个页面要想正确的加裁EXT的控件,是需要对这个基础类库进行编译的。这样的话,多个页面进行嵌套的时候,就面临着这巨大的性能问题。

    结合上述的问题所在,我们进行第二次的重构。主要的方案就是将过多的iframe进行合并处理,大量的iframe进行整合,减少ext-all.js的加载次数,并精减掉iframe。这样就从很大程度上减少了js文件的编译时间,重复JS编译时间。

    最后我们精减后的页面框架是主页面上有一个JSP,上面加载了所有的JS,以前用iframe来框起来的页面都用Ext的panel来代替,从页面的编译时间上来看,是大大的减少了这方面的消耗。同时在副页面上,原来的多层的JSP也都使用panel来代替,其中将activeX控件也放在了panel 中。

    经过了重构后的系统,在JS下载及编译的时间上大大的减少了,jSP的引用数量少了,编译时间也缩短了。于是在性能上有了一个飞越。

    可是好景不长,我们在重构基本完成的时候,性能问题再度暴露。

    第三次,从首次完全加载,到动态加载JS。

     由于使用了one page one application的思想,我们的页面减少了,可是JS并没有减少,一个页面上引用了大量的JS,其中算上基础的ext-all.js等文件,我们在一个页面上加载了170+个JS文件,其数量真是可观,其性能也足以想像得到了。

    由于这个企业应用的复杂性,我们的JS想减少是不太可能了,我们现在就是按功能点进行划分JS对象的。其中很多JS也都进行了合并。但是数量依然不减。

    分析一下这次重构的原因,JS的数量过多,第一次加载页面的时候,会非常慢,但是加载过后,操作会较快,这个其实也是当初预料到的一个风险,但是没有想到会这么严重。有些低估了。同时,由于都在一个页面上,这个页面加载的DOM节点超级多,用监控软件可以看到节点的递增,并有部分节点不能正常释放,这个也是EXT官方论坛上公认的一个问题。要想从根本上去把这个问题解决了我们没有这个精力,也没有这个能力和时间。

     后来,我们为此特意组织了一个性能优化小组,单凭我一个人是解决不了了,毕竟人多力量大。经过几次会议和几种方案的验证,我们做了如下的计划和方案。

     1. 将JS进行合并压缩。

        使用yahoo的yui-compress.jar进行压缩JS,去掉过多的空格和注释,并合并,减少IO的支出。

     2. 将前后台传输的数据进行GZIP压缩。

        大数据量的数据传输,通过GZIP的压缩方案,可以减少到25%,有些数据可能会更多。

    3. 对大量的JS分析依赖关系,进行动态加载。

         这个是关键,通过分析所有的JS中的依赖关系,减少了JS加载的数量。从很大程度上提高了性能。

    4. 另外对部分页面进行缓存,而非真正的关闭。

         对于Ext的消毁不能完全释放节点,那我们就不消毁他,进行对象的缓存,并在重新打开该功能的时候进行数据的重新加载和重置功能,对象重用。

      经过上述的四种方案后,我们的页面性能有了大幅度的提升,由原来的35+秒,提升到首页面加载只需要3秒之内。

     其中将依赖关系进行分析后,我们定义了依赖关系映射文件,将首页面上首先要加载的JS进行压缩合并,分块显示,同时将不需要一进入页面就要显示的模块进行懒加载,在使用的时候再从服务端DOWN下来进行编译,同时使用了数据的GZIP压缩,页面也进行了缓存。

      还有一个外部的因素,由于系统使用的客户机环境上的复杂,我们在多个浏览器上进行了测试,只有IE是最慢的,尤其是IE6,后来发现不是IE6要比IE7 慢,是因为发现MS发布了脚本引擎cscript 5.7, 而大部分的ie6系统都装的是5.6, 这个版本上的升级,不仅仅是修改了BUG,在JS的执行速度上也有了较大的提升,于是我们在环境因素上又加上了一条,要求客户安装cscript5.7,也大大的提升了页面的打开时间。

     经过了上述的三次页面重构,我们的系统基本上在页面的性能上趋于稳定,基本上满足了客户对于性能及用户体验度上的要求。为此特定总结如下,感兴趣的朋友可以参见一下,有不明白的地方我们多交流,随着时间的推移,我会将这次项目中的很多经验都写出来,与大家分享。
分享到:
评论

相关推荐

    前端性能优化与实践.zip

    "前端性能优化与实践.zip"这个压缩包包含了一系列关于前端性能优化的深度文章和教程,涵盖了浏览器缓存机制、首屏加载优化、服务端渲染、事件处理策略、图片优化、性能监测工具以及CDN的工作原理等多个方面。...

    前端页面加载性能优化实践及运维.pdf

    前端页面加载性能优化实践及运维 前端页面加载性能优化是一种非常重要的技术,直接影响着用户体验和网站排名。美团买菜iOS工程师王梓童分享了前端性能优化的实践经验,包括性能优化思路、措施和未来规划。 一、...

    高效前端:Web高效编程与优化实践.pdf

    《高效前端:Web高效编程与优化实践》这本书深入探讨了Web前端开发中的高效编程和优化技术,涵盖了从基础概念到高级策略的广泛内容。在Web开发领域,前端性能的优化对于提升用户体验、降低服务器压力以及提高网站...

    前端性能优化原理与实践.zip

    9. **JavaScript优化**:避免使用阻塞DOM渲染的同步脚本,使用异步或 defer 属性,或者将脚本放在文档底部。 10. **图片优化**:使用适当的图片格式(如WebP)、压缩图片大小,使用响应式图片(srcset & sizes),...

    javascript最佳实践

    JavaScript最佳实践是一个广泛而深入的话题,它涉及到代码的可读性、可维护性、性能优化以及遵循良好的编程习惯。在JavaScript开发中,遵循最佳实践能够提高代码质量,降低出错概率,同时也便于团队协作和长期项目的...

    JS性能优化框架

    标题:JS性能优化框架 描述:本文将深入探讨三种高效的JS框架,旨在通过采用先进的技术和策略来提升网页应用的性能。这些框架不仅能够优化资源加载流程,还能够改善代码执行效率,从而为用户提供更流畅、更快捷的...

    高效前端:Web高效编程与优化实践

    《高效前端:Web高效编程与优化实践》该版为非高清版,比正常扫描版清晰

    WEB性能优化实践分析

    2. CSS与JavaScript优化:将CSS放在头部,JavaScript放在底部,以实现页面的逐步渲染。同时,压缩合并代码,减少HTTP请求。 3. 使用CDN(内容分发网络):通过全球分布的服务器节点,减小用户获取内容的延迟。 4. ...

    JavaScript凌厉开发——Ext JS3详解与实践

    《JavaScript凌厉开发——Ext JS3详解与实践》是一本深度探讨JavaScript库Ext JS3的专著,旨在帮助开发者深入理解和高效运用这一强大的前端框架。本文将围绕标题、描述及标签,详细介绍Ext JS3的核心概念、关键特性...

    DevCloud前端性能优化Devops实践.pptx

    前端性能优化 Devops 实践 前端性能优化是 Devops 实践中的一项关键技术,旨在提高前端应用程序的性能和用户体验。本文将从多个方面介绍前端性能优化的技术和实践,包括代码优化、资源加载优化、缓存优化、图片优化...

    藏经阁-QQ移动页面框架优化实践.pdf

    QQ移动页面框架优化实践主要关注的是提升移动网页的性能和用户体验。在移动设备上,由于硬件资源和网络环境的限制,网页加载速度和响应性往往成为用户体验的关键因素。本实践主要涉及三个核心部分:传统页面的优化...

    Web大数据量页面优化实践

    本文将深入探讨“Web大数据量页面优化实践”,结合提供的标签“源码”和“工具”,我们将从代码优化和利用工具两方面来讨论这个问题。 一、代码优化 1. **懒加载**:对于大数据量的页面,一次性加载所有内容可能...

    藏经阁-QQ移送页面框架优化实践.pdf

    QQ移动页面框架优化实践主要涉及了三个方面:传统页面的优化实践、动态直出页面的优化实践(Sonic)以及对移动页面框架的一些思考。以下是针对这些内容的详细说明: 1. 传统页面的优化实践: - 终端耗时优化:通过...

    JavaScript凌厉开发(Ext_JS_3详解与实践

    《JavaScript凌厉开发(Ext_JS_3详解与实践)》这本书深入浅出地探讨了JavaScript编程中的高级技术,特别是对Ext JS 3框架的应用。Ext JS是一个强大的客户端JavaScript库,它提供了一整套用于构建富互联网应用(RIA)...

    JavaScript优化.docx

    JavaScript优化是提升网页性能的关键步骤,尤其是在现代网页开发中,JavaScript的作用越来越大,但它对搜索引擎的友好性和页面加载速度都有直接影响。下面将详细讨论JavaScript优化的一些关键策略。 首先,...

    js_正则表达式实战JavaScript语言精髓与编程实践

    《JS_正则表达式实战:JavaScript语言精髓与编程实践》是一本深入探讨JavaScript中正则表达式应用的书籍,旨在帮助开发者掌握这一强大的文本处理工具,并将其运用到实际编程中。书中涵盖了从基础概念到高级技巧的全...

    Node.js:Node.js性能优化与最佳实践.docx

    Node.js:Node.js性能优化与最佳实践.docx

    你不知道的Node.js性能优化

    在部分内容中,提及了Node.js的性能优化涉及许多层面,包括使用最新的Node.js JavaScript库、C++绑定、libuv、V8等底层技术。这些底层组件的性能提升,直接关联到Node.js应用的性能。例如,V8引擎的优化,包括了对...

    藏经阁-H5动画在移动平台上的性能优化实践.pdf

    H5动画在移动平台上的性能优化实践 在移动平台上,H5动画的性能优化是非常重要的。因为移动设备的计算资源有限,H5动画的性能问题会直接影响用户体验。本文将详细介绍H5动画在移动平台上的性能优化实践。 首先, ...

    基于Python Django 4.0的Web开发与后台优化实践教程源码

    本项目为基于Python Django 4.0的Web开发与后台优化实践教程源码,总计包含2336个文件。其中包括1603个SVG文件、304个JavaScript文件、99个CSS文件、69个Python编译文件、65个Python源文件、48个LESS文件、36个...

Global site tag (gtag.js) - Google Analytics