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或是遗漏功能。我们的最佳实践是采用结对编程+极限编程的理念，每个人知道都知道其他人的工作内容和优化方式，不定期的代码走查，以提高代码质量。

• 性能指标随时测试

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