Skip to content

Instantly share code, notes, and snippets.

@irae

irae/app.js

Created March 6, 2014 01:48
Show Gist options
  • Save irae/9380594 to your computer and use it in GitHub Desktop.
Save irae/9380594 to your computer and use it in GitHub Desktop.
Download ZIP
React + PHP perf
Raw
app.js
/** @jsx React.DOM */
/* global cardData, CardStack */
"use_strict";
if (window.performance) {
window.performance.mark('beforeReactRender');
} else if (console && console.time) {
console.time('reactRenderTime');
}
if (console.timeStamp) {
console.timeStamp('beforeReactRender');
} else if (console.markTimeline) {
console.markTimeline('beforeReactRender');
}
React.initializeTouchEvents(true);
React.renderComponent(
<MyApp data={reactModel}/>,
document.getElementById('reactContainer')
);
Raw
index.php
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html class="no-js iem7"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, user-scalable=0">
<meta http-equiv="cleartype" content="on">
<!-- build:css /default/css/top.css -->
<link href="/default/static/css/vendor/normalize.css" rel="stylesheet" />
<link href="/default/static/css/style.css" rel="stylesheet" />
<!-- endbuild -->
<!-- build:js /default/js/top.js -->
<script src="/default/static/js/vendor/modernizr.custom.js"></script>
<!-- endbuild -->
</head>
<body>
<script type="text/javascript">
if (window.performance) {
window.performance.mark('beforeRawRender');
} else if (console && console.time) {
console.time('rawRenderTime');
}
if (console.timeStamp) {
console.timeStamp('beforeRawRender');
} else if (console.markTimeline) {
console.markTimeline('beforeRawRender');
}
</script>
<div id="reactContainer">
<!-- react will render here-->
<?php
// Some PHP code that curls to node on same server and dumps react html here
?>
</div>
<script type="text/javascript">
if (window.performance) {
window.performance.mark('afterRawRender');
setTimeout(function(){
window.performance.measure('rawRender', 'beforeRawRender', 'afterRawRender');
console.table(window.performance.getEntriesByName('rawRender'));
}, 2000);
} else if (console && console.timeEnd) {
console.timeEnd('rawRenderTime');
}
if (console.timeStamp) {
console.timeStamp('afterRawRender');
} else if (console.markTimeline) {
console.markTimeline('afterRawRender');
}
</script>
<script type="text/javascript">
var reactModel = <?php echo $sameJsonISentToNodeJS; ?>;
</script>
<!-- build:js /default/js/index/bottom.js -->
<!-- react -->
<script src="/default/static/js/vendor/react.0.9.0.js"></script>
<script src="/default/static/js/app.js"></script>
<script src="/default/static/js/app.js"></script>
<script src="/default/static/js/app.js"></script>
<script src="/default/static/js/app.js"></script>
<script src="/default/static/js/app.js"></script>
<script src="/default/static/js/app.js"></script>
<script src="/default/static/js/app.js"></script>
<script src="/default/static/js/app.js"></script>
<script src="/default/static/js/app.js"></script>
<!-- endbuild -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment