一、前言

?????? 前段时间我们团队推出了operamasks-ui ，得到了业界的一些关注，首先谢谢大家的关注，你们的关注就是我们团队的动力。

?????? 在推出一段时间之后也得到了一些反馈，有组件需求的反馈，有组件bug的反馈，还有性能方面的一些反馈，希望我们能给出一个性能对比报告，和各个其它js框架做一个横向的对比，让选择的时候能心中有数。

????? 针对以上问题我们的测试人员和开发人员先选择了omTree和其它框架对比，做了一系列的测试数据，这里要声明的是我们不是要证明我们的组件有多强，只是想真实的对比一下，是好货拿出来溜溜嘛，同时也发现自己的不足，继续改进组件。

????? 测试的前提：组件功能一致、数据和数据源一致。

?

二、名词解释

Render Time ：用户在页面上看到第一个内容的时间。当开始渲染时用户是可以在浏览器中看见内容的，而有内容的时候 document.body.offsetHeight 应该是大于 0 的，因此根据这一特点使用 timer 来检查。（网上资料显示 FireFox 可以通过在 window 上注册“ MozAfterPaint ”事件来计算浏览器开始渲染的时间，但是实际测试时发现 FireFox7.0 根本监控不到“ MozAfterPaint ”事件，因此也根据 document.body.offsetHeight 大于 0 进行测试）

Dom Ready ：文档解析完成的时间，目前对于文档解析具体包括哪些操作没有具体的答案，但文档解析至少应该包括以下操作： HTML 文档分析以及 DOM 树的创建、外链脚本的加载、外链脚本的执行以及内联脚本的执行，但不包括图片、 iframe 等其它资源的加载。

Page Load ： window.onload 事件触发的时间。与 DOM Ready 时间相比， Page Load 的时间往往要更靠后一些，因为 Page Load 不仅仅是 HTML 文档解析完毕还包括了所有资源加载所需要的时间，例如图片资源的加载、 iframe 的加载等。

Show Time ：组件内容展现时间，即 tree 完全展现的时间。

CPU 监控 ：通过 ProcessExplorer 监控访问案例时浏览器的 CUP 占用率。

三、概述

本次测试主要是对 operamask-ui 与 easyui 、 extjsui 、 ligerui 几个产品进行前端性能对比测试，被测组件为 tree ， tree 展示 10 个父节点，每个父节点下又包含 10 层子节点，在展示数据相同的情况下，比较 operamask-ui 与其他几个主流 ui 框架产品的页面加载时间、组件展示时间、 CPU 占用率等。

四、测试环境

被测对象：测试 Operamask-ui （以下检查 om-ui ）， easy-ui ， extjs-ui ， liger-ui 的 tree 组件，分别在 firefox 、