Permalink
Browse files

More complex / more real world html structure

  • Loading branch information...
chadhietala committed Apr 5, 2017
1 parent 18bf49b commit ccb2ec76ada2ca5345fb48cce2cb8c2376b7f156
@@ -37,17 +37,55 @@ const span = <span className="glyphicon glyphicon-remove" aria-hidden="true" noN
const td = <td className="col-md-6" noNormalize></td>;
function Row({ d, id, selected, deleteFunc, selectFunc }) {
return (
<tr className={id === selected ? 'danger' : ''} noNormalize>
<td className="col-md-1" noNormalize>{id + ''}</td>
<td className="col-md-4" noNormalize>
<a onClick={linkEvent(id, selectFunc)} noNormalize>{d.label}</a>
</td>
<td className="col-md-1"><a onClick={linkEvent(id, deleteFunc)} noNormalize>{ span }</a></td>
{ td }
</tr>
)
}
return (<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://lorempixel.com/50/50/" alt="..." />
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading {d.label}</h4>
<button>Like</button>
<button>Share</button>
<button>Comment</button>
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://lorempixel.com/25/25" alt="..." />
</a>
</div>
<div class="media-body">
<h4>Chad Hietala</h4>
Wat LulZ
</div>
</li>
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://lorempixel.com/25/25" alt="..."/>
</a>
</div>
<div class="media-body">
<h4>Bill Hietala</h4>
Wat
</div>
</li>
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://lorempixel.com/25/25" alt="..." />
</a>
</div>
<div class="media-body">
<h4>Bob Hietala {d.label}</h4>
Woot
</div>
</li>
</ul>
</div>
</li>)
}
const onComponentShouldUpdate = {
onComponentShouldUpdate(lastProps, nextProps) {
@@ -173,7 +211,7 @@ export class Controller extends Component{
</div>
</div>
</div>
<table className="table table-hover table-striped test-data" noNormalize>
<table style="display: none" className="table table-hover table-striped test-data" noNormalize>
{createRows(this.state.store, this.delete, this.select)}
</table>
{ span2 }
@@ -39,7 +39,7 @@ export class Main extends Component{
this.swapRows = this.swapRows.bind(this);
this.start = 0;
this.length = 0;
window.app = this;
}
printDuration() {
@@ -125,7 +125,7 @@ export class Main extends Component{
</div>
</div>
</div>
<table className="table table-hover table-striped test-data">
<table style="display: none" className="table table-hover table-striped test-data">
<tbody>
{rows}
</tbody>
View
@@ -32,14 +32,54 @@ export class Row extends Component {
render() {
let {styleClass, onClick, onDelete, data} = this.props;
return (<tr className={styleClass}>
<td className="col-md-1">{data.id}</td>
<td className="col-md-4">
<a onClick={this.onClick}>{data.label}</a>
</td>
<td className="col-md-1"><a onClick={this.onDelete}><span className="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
<td className="col-md-6"></td>
</tr>);
return (<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://lorempixel.com/50/50/" alt="..." />
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading {data.label}</h4>
<button>Like</button>
<button>Share</button>
<button>Comment</button>
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://lorempixel.com/25/25" alt="..." />
</a>
</div>
<div class="media-body">
<h4>Chad Hietala</h4>
Wat LulZ
</div>
</li>
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://lorempixel.com/25/25" alt="..."/>
</a>
</div>
<div class="media-body">
<h4>Bill Hietala</h4>
Wat
</div>
</li>
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://lorempixel.com/25/25" alt="..." />
</a>
</div>
<div class="media-body">
<h4>Bob Hietala {data.label}</h4>
Woot
</div>
</li>
</ul>
</div>
</li>);
}
}
@@ -4,7 +4,9 @@
<meta charset="utf-8" />
<title>React v15.4.2</title>
<link href="../css/currentStyle.css" rel="stylesheet"/>
<style>.hidden { display: none }</style>
</head>
<body>
<div id='main'></div>
<script src='dist/main.js'></script>
@@ -120,7 +120,7 @@ export class Main extends React.Component{
</div>
</div>
</div>
<table className="table table-hover table-striped test-data">
<table className="table hidden table-hover table-striped test-data">
<tbody>
{rows}
</tbody>
@@ -31,14 +31,54 @@ export class Row extends React.Component {
render() {
let {styleClass, onClick, onDelete, data} = this.props;
return (<tr className={styleClass}>
<td className="col-md-1">{data.id}</td>
<td className="col-md-4">
<a onClick={this.onClick}>{data.label}</a>
</td>
<td className="col-md-1"><a onClick={this.onDelete}><span className="glyphicon glyphicon-remove" aria-hidden="true"></span></a></td>
<td className="col-md-6"></td>
</tr>);
return ( <li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://lorempixel.com/50/50/" alt="..." />
</a>
</div>
<div class="media-body">
<h4 class="media-heading">Media heading {data.label}</h4>
<button>Like</button>
<button>Share</button>
<button>Comment</button>
<ul class="media-list">
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://lorempixel.com/25/25" alt="..." />
</a>
</div>
<div class="media-body">
<h4>Chad Hietala</h4>
Wat LulZ
</div>
</li>
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://lorempixel.com/25/25" alt="..."/>
</a>
</div>
<div class="media-body">
<h4>Bill Hietala</h4>
Wat
</div>
</li>
<li class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="http://lorempixel.com/25/25" alt="..." />
</a>
</div>
<div class="media-body">
<h4>Bob Hietala {data.label}</h4>
Woot
</div>
</li>
</ul>
</div>
</li>);
}
}

3 comments on commit ccb2ec7

@chadhietala

This comment has been minimized.

Show comment
Hide comment
@chadhietala

chadhietala Apr 5, 2017

Owner

Hello micro benchmark connoisseurs,

You may be asking "why is everything display: none" that's a good question. The answer is that the performance marker in this benchmark captures the style, layout, paint and composite phases of the browser's render pipeline. While TTFP is very important what these benchmarks are measuring is the time spent executing JavaScript to get to the point in which we can enter the render pipeline. More macro style benchmarks like the ones you see in Lighthouse or Chrome Tracing are more fit for real world benchmarking.

Looking at real world performance is now the focus of teams like the V8 team and no longer optimize for monomorphic use cases like this project uses to rate performance of various rendering solutions. Because this, all benchmarks in these micro-benchmark suite consistently run slower on the TurboFan and Ignition architecture that the V8 is shepherding through their release process. However, all of their numbers indicate that the macro cases will have substantial wins for both desktop and mobile applications.

Owner

chadhietala replied Apr 5, 2017

Hello micro benchmark connoisseurs,

You may be asking "why is everything display: none" that's a good question. The answer is that the performance marker in this benchmark captures the style, layout, paint and composite phases of the browser's render pipeline. While TTFP is very important what these benchmarks are measuring is the time spent executing JavaScript to get to the point in which we can enter the render pipeline. More macro style benchmarks like the ones you see in Lighthouse or Chrome Tracing are more fit for real world benchmarking.

Looking at real world performance is now the focus of teams like the V8 team and no longer optimize for monomorphic use cases like this project uses to rate performance of various rendering solutions. Because this, all benchmarks in these micro-benchmark suite consistently run slower on the TurboFan and Ignition architecture that the V8 is shepherding through their release process. However, all of their numbers indicate that the macro cases will have substantial wins for both desktop and mobile applications.

@adamhaile

This comment has been minimized.

Show comment
Hide comment
@adamhaile

adamhaile Apr 5, 2017

the performance marker in this benchmark captures the style, layout, paint and composite phases of the browser's render pipeline.

Right, because different ways of modifying the DOM produce different render workloads for the browser. Many of the "non-keyed" implementations take longer to run the js but render to the user much faster. "Time to the user's eyeballs" is what's important. How does Glimmer perform when render time is included? Do the same gains translate or not?

adamhaile replied Apr 5, 2017

the performance marker in this benchmark captures the style, layout, paint and composite phases of the browser's render pipeline.

Right, because different ways of modifying the DOM produce different render workloads for the browser. Many of the "non-keyed" implementations take longer to run the js but render to the user much faster. "Time to the user's eyeballs" is what's important. How does Glimmer perform when render time is included? Do the same gains translate or not?

@adamhaile

This comment has been minimized.

Show comment
Hide comment
@adamhaile

adamhaile Apr 5, 2017

Also, I don't see the changes to the Ember implementation here? Only react, preact and inferno mods. Glimmer VM is interesting tech, and I'd love to see if I can repro the posted charts.

adamhaile replied Apr 5, 2017

Also, I don't see the changes to the Ember implementation here? Only react, preact and inferno mods. Glimmer VM is interesting tech, and I'd love to see if I can repro the posted charts.

Please sign in to comment.