《web系统网页静态化改造项目总结剖析》由会员分享，可在线阅读，更多相关《web系统网页静态化改造项目总结剖析（19页珍藏版）》请在金锄头文库上搜索。
1、ICMS页面静态化改造项目总结报告银联数据服务有限公司二一五年九月十四日文档版本维护记录版本号日期拟稿/修改部门拟稿/修改人审核人变更说明1.002015-09-14研发部盛立初稿1.前言由来：目前ICMS系统的前端画面，客户经常反馈，页面打开速度较慢。发卡新画面响应速度问题可能存在的原因分析：a.浏览器影响：经过测试IE8比FIREFOX，IE10响应慢。另外浏览器是否允许页面缓存，也对画面显示速度有影响。b.字段较多，功能复杂的画面会比字段少功能简单的画面响应速度慢。c.网络带宽限制：用户浏览器与ICMS服务器之间的可用带宽限制。本次页面静态化改造正是为了减少带宽压力，将页面静态化以后能让
2、浏览器将页面缓存起来，以后每次请求页面时，减少带宽的占用。提升打开页面的速度，优化用户体验。目标：项目的目标旨在将ICMS系统中所有的动态页面（以.jsp结尾的文件）在不影响功能的情况下改为静态页面（以.html结尾的文件）。使得客户端访问服务器时，能将页面的静态资源缓存到本地文件中。这样下次客户端再次访问服务器的同一个画面时，可以直接从本地缓存取出所需的静态资源。2.方案：2.1逻辑结构原有流程：现在流程：2.2缓存机制系统将JSP方式改为纯HTML方式，减少了java的web服务器的解析压力，加快运行速度。同时，html作为静态资源，可以进行缓存、压缩，减少带宽压力3.主要开发过程3.1弱
3、化zxt的java部分功能将原来的zxt.jar 按功能实现分为zxt.jar、zxt-web.jarzxt.jar：主要包含了zxt封装的数据结构对象（json、datasheet、datawrapper等）、异常类、工具类等。zxt-web.jar：主要是为web工程提供MVC功能。改项目中新增了htmldispacher类用来扩展，使得页面跳转时不强制调用java的oninitialize方法。修改所有jar包中关于zxt.jar的引用（icms-common、icms-pack、icms-page）3.2改造页面的请求流程1.将页面java类中URL（”/finace/PURJT.js
4、p”）url指向改为”/finace/PURJT.html”。2.新增htmldispacher类，使得页面请求时，不强制调用java的oninitialize方法3.修改js的页面初始化策略。在zxtExtend.js中扩展zxt.Page.prototype.init 方法将异步请求服务器内容的initData(arr)加在需要花费大量时间国际化控件及构建zxt页面控件的方法之前。使得更加有效地利用时间，不会阻塞页面的渲染及内容的加载。4.修改权限管理实现由于原来的权限管理是在页面请求的过程中完成的，而现在页面改为静态页面以后，无法使用java的sendRedrect页面重定向来跳转页面。
5、故改造成初始化策略在页面调用java的oninitialize()前，进行权限判断。如用户无权访问，则将页面需跳转的url返回到客户端。客户端的js判断出url后，重新发送url进行重定向。具体步骤：新增AccessFilterStrategy继承BeforeStraegy。判断用户是否有权限访问页面，若无权限则抛出AccessException异常。新增AccessException异常，将返回url的功能放在异常处理中，在BasePage中的excute方法中捕获AccessException，返回需跳转的url。3.3 jsp的改造3.3.1header.jsp、footer.jsp的改
6、造Header.jsp功能：根据系统皮肤设置，选择引入相应的css文件、引入各类js框架(jquery、ZXT等)及js文件、国际化设置及设置一些公共函数。Footer.jsp 功能：页面的同异步复核框、收藏栏功能、页面的隐藏字段、自定义流程功能、打印功能。由于页面改为html后，不能再引入header.jsp、footer.jsp。因而需要将其功能改变js方式实现。1.引入css、js的功能通过header.js生成script标签，动态引入。异步引入js时，会涉及到js之间的依赖关系，项目采用script标签的onload事件来实现js数组的递归引入。2.同异步复核框改为jquery插件形
7、式，由js动态生成。在common.js中。initReviewDialog();动态生成同异步复核框initPrintDialog();动态生成打印框3.收藏栏及隐藏字段，都存在hidden.txt中。由ajax请求得到内容，填充到静态页面中。由于hidden.txt也是静态文本，故同样可以缓存起来。3.3.2 页面JSP的改造1.普通的jsp。原来的页面头部引入header.jsp现在改成引入header.js将页面下面的js代码放在页面对应的js文件最后页面的最后再加上用来填充隐藏的字段。2.引入多个jsp、含有java引用、具有自定义标签的jsp页面改造例如appln画面引入了work
8、box.jsp。现都改为ajax请求静态资源的方式：其余一些对jsp中对java的引用，都通过js的异步请求的方式实现。例如页面获取当前系统银行号等值。通过js对象top.$zxt._initDW.attrs().employee.bnkNbr获取。利用js动态修改dom节点，来实现jsp通过java引用的形式修改dom功能。4.遇到的问题及难点4.1新老版本的代码兼容问题由于未重构的画面使用的js库、java的controller类与重构过的画面不一样。故此次静态化改造需要兼容新老版本。解决的策略是，在header.js、common.js等公共js文件中，引入新老版本的js库。在页面拦截策
9、略AccessFilterStrategy中将继承新旧两个BeforeStrategy的接口。通过两个beforeExecute方法（参数类型不同）来实现同时继承两个不同接口。方法一方法二如此一来，未重构过的页面及重构过的页面都能正常使用改策略检查页面访问权限。4.2特殊功能改造4.2.1页面跳转的参数传递由于jsp页面改造成静态页面后，页面的访问改为get请求。故原先的页面跳转参数传递方法不可用。解决的策略是，将参数键值对拼接在页面的url中，在新页面通过window.location.search获取url中?符后的字符串。再通过字符分割获取参数json数组。在新页面初始化时，通过异步请求
10、将json数组发送到服务器端处理。以TLIST跳转至TRDEF为例。以上是TLIST画面grid的双击跳转事件。在跳转url最后拼接了需要传递的参数在跳转至TRDEF后，页面的初始化方法中记录需要传递的参数数组在异步调用服务器的oninitialize()方法中，将参数json数组填充至dw对象中，发送到服务器。4.2.2自定义流程的改造改造前系统中的自定义流程通过java端的procd类及footer.jsp实现。改造后，footer.jsp中的自定义流程模块改为js实现。在common.js中。4.3.3 mainpage、sysmainpage画面的改造原mainpage.jsp、sys
11、mainpage.jsp中有许多java的引用。包括系统肤色设置、菜单展示、右上角的用户信息、公告栏展示、历史收藏功能等等。 改造的策略是，异步请求mainpage页面java类的初始化方法中，将所需要的数据统一传递到页面上，在页面上通过js动态去渲染加载以上所有的信息及内容。4.3 浏览器兼容性问题静态化改造，编写了大量的js代码。而各个种类浏览器、各个版本的浏览器对js的一些方法的支持都不尽相同。遇到的困难主要集中在IE 8、IE 9、IE 10；火狐3.6.3（华夏银行使用）等浏览器。例如在header.js中使用了js的splice方法。该方法在IE浏览器中与火狐和chrome浏览器的
12、实现不同。会导致需要加载的js数组字符错位。 修复策略是改用slice方法：又如IE8浏览器的script标签没有onload事件，需使用onreadystatechange事件、火狐3.6.3版本浏览器script标签没有显式的onload事件，需要自己添加。又如mainpage页面嵌套的iframe中定义了welcome.html。而在页面构建ZXT控件时，会再次渲染welcome.html。造成welcome.html引用的js重复加载出错。修复策略是将iframe的src属性置为空，在页面构建ZXT控件完毕后再填充src属性，渲染welcome.html。5.待优化内容5.1 引入re
13、quireJS/seaJS等异步加载js框架引入该框架主要能解决三个问题：1.全局变量，全局函数满天飞。可以参考AMD规范或CMD规范，以js模块的形式重构js函数库。可以完美解决命名空间的问题。2.页面按需加载js库及css库目前所有页面不论简单复杂都加载了所有项目依赖的js库和css库。导致第一次访问页面时，需要下载解析大量的静态文件。影响画面打开速度。通过requirejs可以使得每个画面按需加载需要的js库和css库。3.页面下载解析静态文件会阻塞浏览器渲染UI这也是requireJS、seaJS的主要功能，这些js框架能够使得页面异步加载js库，不阻塞浏览器渲染UI的时间，使得画面呈现速度更快。有效合理利用时间资源。5.2 通过模板引擎生成静态资源由于所有的页面被改造成了静态html文件，故可通过Freemaker之类的模板引擎生成html(js、xml、properties等)。这样同样类型的画面可以套用同一个模板，极大地减少代码的开发和维护成本。
