U8 b/s门户前端优化简报

  • Keep HTML  simple

在整个优化过程中,始终使用简单的HTML和css结构完成UI功能,让整个html结构看起来有层次,有语义,结构简单。比如实现滑动效果,就要避免使用div结构,而使用a结构,因为a的hover是IE浏览器一贯支持,并且不需要js脚本的支持。

  • 避免使用Extjs组件,自己的轮子更实用

不得不承认Extjs的强大,但是Extjs为了浏览器的兼容性和功能的健壮性,使用了很多繁杂的HTML结构,比如在构建tab时使用div+table结构和DOM动态定位,这种结构虽然适用各种浏览器,但是以渲染性能损耗为代价的。U8 bs门户目前只支持IE浏览器,也就是说Extjs中因为浏览器兼容而做出的性能损失,对我们是不适用的。另外Extjs的组件功能复杂很多功能不是我们需要的,有些功能会成为我们开发新功能的的牵绊。 结合以上几点,我们的优化过程就是去Extjs组件化的过程。使用Extjs的基础功能构建我们所需要的自定义的组件,这样的组件足够简单,又足够我们使用,简化HTML和CSS结构,从而节约性能开支。

          

  • 日志,无处不在的日志

做性能优化,日志是必不可少的。我们的日志很细,整个脚本的关键执行过程都有日志输出,包括异常和错误。针对性能优化的推进,性能公关点的日志可以细到每个执行语句的日志输出。另外我们的日志采用Begin-End结构,结合性能日志分析系统,可以很方便的评估系统的性能瓶颈和优化效果。

  • 兼容性测试越早越好

因为使用自定义的前端组件,IE版本之间的兼容性测试要在每个组件开发完之后必须做的工作。避免出现在在开发后期因为兼容性问题导致前端组件的HTML大规模变更而带来的的时间风险。

  • 团队协作。

重构、优化工作意味着对老旧代码的改造,这就要求团队成员之间目标一致,高效沟通,以免引入新的bug或是遗漏功能。我们的最佳实践是采用结对编程+极限编程的理念,每个人知道都知道其他人的工作内容和优化方式,不定期的代码走查,以提高代码质量。

  • 性能指标随时测试

这个点不是我们的最佳实践。性能指标是性能优化的目标。随时的做测试,可以让我们实时了解我们和目标的距离,以激发工作激情。同时也可以作为一种总结和优化方式改进的契机。

原文地址:https://www.cnblogs.com/daoyuly/p/3074477.html