isomorphic-ui-benchmarks, 各种用户界面库的客户端/服务器基准

分享于 

6分钟阅读

GitHub

  繁體 雙語
Client/server benchmarks for various UI libraries
  • 源代码名称:isomorphic-ui-benchmarks
  • 源代码网址:http://www.github.com/marko-js/isomorphic-ui-benchmarks
  • isomorphic-ui-benchmarks源代码文档
  • isomorphic-ui-benchmarks源代码下载
  • Git URL:
    git://www.github.com/marko-js/isomorphic-ui-benchmarks.git
    Git Clone代码到本地:
    git clone http://www.github.com/marko-js/isomorphic-ui-benchmarks
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/marko-js/isomorphic-ui-benchmarks
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    isomorphic-ui-benchmarks

    这里 repo 为各种用户界面库包含多个基准。 每个基准测试都用来度量呈现性能( 在服务器和浏览器中) 和更新 DOM ( 仅客户端) 所需的时间。

    当前结果

    搜索结果

    Search Results Benchmarks

    颜色选取器

    Color Picker Benchmarks

    下面是March运行的结果,

    环境:

    • Node.js v8.4.0
    • 15-inch Pro (,2016 )
    • 处理器:2.9 GHz英特尔内核仿真器
    • 内存:16 GB 2133 LPDDR3
    • macOS: 10.12.6 ( 16G29 )
    • Google Chrome 版本 61.0.316 3.91 ( 正式构建) ( 64位 )

    服务器端服务器端

    
    Warming up...
    
    
    
    Warmup complete.
    
    
    
    Running"search-results"...
    
    
    
    Running benchmark"marko"...
    
    
    
    marko x 5,783 ops/sec ±1.02% (76 runs sampled)
    
    
    
    Running benchmark"preact"...
    
    
    
    preact x 881 ops/sec ±1.69% (90 runs sampled)
    
    
    
    Running benchmark"react"...
    
    
    
    react x 40.54 ops/sec ±3.26% (52 runs sampled)
    
    
    
    Running benchmark"vue"...
    
    
    
    vue x 1,331 ops/sec ±2.71% (76 runs sampled)
    
    
    
    Running benchmark"inferno"...
    
    
    
    inferno x 695 ops/sec ±1.02% (87 runs sampled)
    
    
    
    Fastest is marko
    
    
    
    --------------
    
    
    
    Warming up...
    
    
    
    Warmup complete.
    
    
    
    Running"color-picker"...
    
    
    
    Running benchmark"marko"...
    
    
    
    marko x 10,997 ops/sec ±0.79% (86 runs sampled)
    
    
    
    Running benchmark"preact"...
    
    
    
    preact x 5,208 ops/sec ±1.24% (89 runs sampled)
    
    
    
    Running benchmark"react"...
    
    
    
    react x 217 ops/sec ±3.31% (74 runs sampled)
    
    
    
    Running benchmark"vue"...
    
    
    
    vue x 3,384 ops/sec ±2.22% (73 runs sampled)
    
    
    
    Running benchmark"inferno"...
    
    
    
    inferno x 4,078 ops/sec ±0.75% (90 runs sampled)
    
    
    
    Fastest is marko
    
    
    
    --------------
    
    
    
    DONE!
    
    
    
    ~/marko-js/isomorphic-ui-benchmarks (master)> node -v
    
    
    v8.4.0
    
    
    
    
    客户端

    搜索结果

    Google Chrome

    
    Warming up...
    
    
    Warmup complete.
    
    
    Running"search-results"...
    
    
    Running benchmark"marko"...
    
    
    marko x 355 ops/sec ±1.28% (56 runs sampled)
    
    
    Running benchmark"preact"...
    
    
    preact x 267 ops/sec ±1.66% (57 runs sampled)
    
    
    Running benchmark"react"...
    
    
    react x 233 ops/sec ±1.76% (54 runs sampled)
    
    
    Running benchmark"vue"...
    
    
    vue x 197 ops/sec ±3.40% (55 runs sampled)
    
    
    Running benchmark"inferno"...
    
    
    inferno x 355 ops/sec ±1.24% (57 runs sampled)
    
    
    Fastest is marko,inferno
    
    
    
    

    颜色选取器

    Google Chrome

    
    Warming up...
    
    
    Warmup complete.
    
    
    Running"color-picker"...
    
    
    Running benchmark"marko"...
    
    
    marko x 7,661 ops/sec ±1.03% (59 runs sampled)
    
    
    Running benchmark"preact"...
    
    
    preact x 3,914 ops/sec ±1.16% (24 runs sampled)
    
    
    Running benchmark"react"...
    
    
    react x 3,076 ops/sec ±2.21% (20 runs sampled)
    
    
    Running benchmark"vue"...
    
    
    vue x 5,003 ops/sec ±3.07% (30 runs sampled)
    
    
    Running benchmark"inferno"...
    
    
    inferno x 8,880 ops/sec ±0.99% (60 runs sampled)
    
    
    Fastest is inferno
    
    
    
    
    附加详细信息

    包含库

    当前包括以下用户界面库:

    包括基准

    这里 repo 当前包含以下基准

    搜索结果

    这个基准度量了呈现搜索结果页面所需的时间。 每个页面包含 100个搜索结果项。 每次迭代都会产生一组全新的搜索结果。 因此,为每个循环呈现新的搜索结果,必须更新大量的DOM节点。

    颜色选取器

    这里基准测量循环通过所选颜色所需的时间。 选定的颜色索引将更改每个周期。 当选定的颜色索引发生更改时,会发生以下两种情况:

    • 突出显示新选定的颜色
    • 旧选定的颜色为 unhighlighted
    • 选定的颜色在末尾显示

    搜索结果基准测试相比,每个周期的DOM变化相对较小。

    运行基准测试

    安装

    git clone https://github.com/marko-js/isomorphic-ui-benchmarks.gitcd isomorphic-ui-benchmarks
    npm install
    npm run build # Build client-side JS bundles

    运行服务器端基准

    npm run benchmark

    运行客户端基准测试

    开始

    npm start

    在浏览器中打开 http://localhost:8080/插件,并选择要运行的基准。

    贡献和反馈

    如果你发现任何问题或者有任何建议,请告知我们。 所有的努力都是尽可能的公平和准确,但错误确实发生了。 如果你发现问题,请打开一个Github问题来讨论。


    相关文章