Skip to content

Instantly share code, notes, and snippets.

@msroot
Created December 19, 2011 14:45
Show Gist options
  • Save msroot/1497509 to your computer and use it in GitHub Desktop.
Save msroot/1497509 to your computer and use it in GitHub Desktop.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>BigPipe example</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="prototypepatch.js"></script>
<script type="text/javascript" src="bigpipe.js"></script>
</head>
<body>
<h1 id="header">BigPipe test.</h1>
<p>This version uses padding to fill out browser caches so that the bigpipe delayed rendering effect can be seen easily. This causes problems with firebug, because the page content is big. Use <a href="example.php?disable_padding=1">this</a> link to disable the padding so you can use firebug more easily.
<!-- simulate that the page is much bigger than it is. Browsers have internal buffering which hides how bigpipe actual works.
This allows us to simulate real world effect with a big page. -->
<!-- -->
<h2>Simple content replace</h2>
<div id="content_replace"></div>
<h2>Test delayed rendering (50 times)</h2>
<span id="counter0"></span><span id="counter1"></span><span id="counter2"></span><span id="counter3"></span><span id="counter4"></span><span id="counter5"></span><span id="counter6"></span><span id="counter7"></span><span id="counter8"></span><span id="counter9"></span><span id="counter10"></span><span id="counter11"></span><span id="counter12"></span><span id="counter13"></span><span id="counter14"></span><span id="counter15"></span><span id="counter16"></span><span id="counter17"></span><span id="counter18"></span><span id="counter19"></span><span id="counter20"></span><span id="counter21"></span><span id="counter22"></span><span id="counter23"></span><span id="counter24"></span><span id="counter25"></span><span id="counter26"></span><span id="counter27"></span><span id="counter28"></span><span id="counter29"></span><span id="counter30"></span><span id="counter31"></span><span id="counter32"></span><span id="counter33"></span><span id="counter34"></span><span id="counter35"></span><span id="counter36"></span><span id="counter37"></span><span id="counter38"></span><span id="counter39"></span><span id="counter40"></span><span id="counter41"></span><span id="counter42"></span><span id="counter43"></span><span id="counter44"></span><span id="counter45"></span><span id="counter46"></span><span id="counter47"></span><span id="counter48"></span><span id="counter49"></span><span id="delayed_done"></span> <h2>Content replace with inline javascript</h2>
<div id="inline_javascript_test"></div>
<h2>Content replace with external javascript file</h2>
<div id="external_js">Be patient, this will be completed in the end after delayed rendering</div>
<div id="external_javascript_test"></div>
<h2>Content replace with external javascript and inline javascript</h2>
<div id="external_js2">be patient, this will be completed in the end after delayed rendering test</div>
<div id="external_javascript_test2"></div><div id="google_analytics"></div><div id="final_ok"></div></body>
<script id="content_replace_1">BigPipe.onArrive({"innerHTML":"Ok <!-- --><br>\n","id":"content_replace","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter0_2">BigPipe.onArrive({"innerHTML":"0 <!-- -->\n","id":"counter0","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter1_3">BigPipe.onArrive({"innerHTML":"1 <!-- -->\n","id":"counter1","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter2_4">BigPipe.onArrive({"innerHTML":"2 <!-- -->\n","id":"counter2","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter3_5">BigPipe.onArrive({"innerHTML":"3 <!-- -->\n","id":"counter3","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter4_6">BigPipe.onArrive({"innerHTML":"4 <!-- -->\n","id":"counter4","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter5_7">BigPipe.onArrive({"innerHTML":"5 <!-- -->\n","id":"counter5","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter6_8">BigPipe.onArrive({"innerHTML":"6 <!-- -->\n","id":"counter6","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter7_9">BigPipe.onArrive({"innerHTML":"7 <!-- -->\n","id":"counter7","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter8_10">BigPipe.onArrive({"innerHTML":"8 <!-- -->\n","id":"counter8","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter9_11">BigPipe.onArrive({"innerHTML":"9 <!-- -->\n","id":"counter9","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter10_12">BigPipe.onArrive({"innerHTML":"10 <!-- -->\n","id":"counter10","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter11_13">BigPipe.onArrive({"innerHTML":"11 <!-- -->\n","id":"counter11","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter12_14">BigPipe.onArrive({"innerHTML":"12 <!-- -->\n","id":"counter12","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter13_15">BigPipe.onArrive({"innerHTML":"13 <!-- -->\n","id":"counter13","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter14_16">BigPipe.onArrive({"innerHTML":"14 <!-- -->\n","id":"counter14","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter15_17">BigPipe.onArrive({"innerHTML":"15 <!-- -->\n","id":"counter15","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter16_18">BigPipe.onArrive({"innerHTML":"16 <!-- -->\n","id":"counter16","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter17_19">BigPipe.onArrive({"innerHTML":"17 <!-- -->\n","id":"counter17","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter18_20">BigPipe.onArrive({"innerHTML":"18 <!-- -->\n","id":"counter18","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter19_21">BigPipe.onArrive({"innerHTML":"19 <!-- -->\n","id":"counter19","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter20_22">BigPipe.onArrive({"innerHTML":"20 <!-- -->\n","id":"counter20","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter21_23">BigPipe.onArrive({"innerHTML":"21 <!-- -->\n","id":"counter21","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter22_24">BigPipe.onArrive({"innerHTML":"22 <!-- -->\n","id":"counter22","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter23_25">BigPipe.onArrive({"innerHTML":"23 <!-- -->\n","id":"counter23","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter24_26">BigPipe.onArrive({"innerHTML":"24 <!-- -->\n","id":"counter24","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter25_27">BigPipe.onArrive({"innerHTML":"25 <!-- -->\n","id":"counter25","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter26_28">BigPipe.onArrive({"innerHTML":"26 <!-- -->\n","id":"counter26","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter27_29">BigPipe.onArrive({"innerHTML":"27 <!-- -->\n","id":"counter27","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter28_30">BigPipe.onArrive({"innerHTML":"28 <!-- -->\n","id":"counter28","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter29_31">BigPipe.onArrive({"innerHTML":"29 <!-- -->\n","id":"counter29","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter30_32">BigPipe.onArrive({"innerHTML":"30 <!-- -->\n","id":"counter30","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter31_33">BigPipe.onArrive({"innerHTML":"31 <!-- -->\n","id":"counter31","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter32_34">BigPipe.onArrive({"innerHTML":"32 <!-- -->\n","id":"counter32","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter33_35">BigPipe.onArrive({"innerHTML":"33 <!-- -->\n","id":"counter33","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter34_36">BigPipe.onArrive({"innerHTML":"34 <!-- -->\n","id":"counter34","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter35_37">BigPipe.onArrive({"innerHTML":"35 <!-- -->\n","id":"counter35","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter36_38">BigPipe.onArrive({"innerHTML":"36 <!-- -->\n","id":"counter36","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter37_39">BigPipe.onArrive({"innerHTML":"37 <!-- -->\n","id":"counter37","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter38_40">BigPipe.onArrive({"innerHTML":"38 <!-- -->\n","id":"counter38","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter39_41">BigPipe.onArrive({"innerHTML":"39 <!-- -->\n","id":"counter39","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter40_42">BigPipe.onArrive({"innerHTML":"40 <!-- -->\n","id":"counter40","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter41_43">BigPipe.onArrive({"innerHTML":"41 <!-- -->\n","id":"counter41","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter42_44">BigPipe.onArrive({"innerHTML":"42 <!-- -->\n","id":"counter42","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter43_45">BigPipe.onArrive({"innerHTML":"43 <!-- -->\n","id":"counter43","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter44_46">BigPipe.onArrive({"innerHTML":"44 <!-- -->\n","id":"counter44","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter45_47">BigPipe.onArrive({"innerHTML":"45 <!-- -->\n","id":"counter45","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter46_48">BigPipe.onArrive({"innerHTML":"46 <!-- -->\n","id":"counter46","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter47_49">BigPipe.onArrive({"innerHTML":"47 <!-- -->\n","id":"counter47","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter48_50">BigPipe.onArrive({"innerHTML":"48 <!-- -->\n","id":"counter48","css_files":[],"js_files":[],"js_code":""});</script>
<script id="counter49_51">BigPipe.onArrive({"innerHTML":"49 <!-- -->\n","id":"counter49","css_files":[],"js_files":[],"js_code":""});</script>
<script id="delayed_done_52">BigPipe.onArrive({"innerHTML":"Ok <!-- --><br>\n","id":"delayed_done","css_files":[],"js_files":[],"js_code":""});</script>
<script id="inline_javascript_test_53">BigPipe.onArrive({"innerHTML":"<div id=\"javascript_inline_test\">Be patient, this will be completed in the end after delayed rendering<\/div>","id":"inline_javascript_test","css_files":[],"js_files":[],"js_code":"$('javascript_inline_test').innerHTML = 'Ok';"});</script>
<script id="external_javascript_test_54">BigPipe.onArrive({"innerHTML":"","id":"external_javascript_test","css_files":[],"js_files":["test.js"],"js_code":""});</script>
<script id="external_javascript_test2_55">BigPipe.onArrive({"innerHTML":"","id":"external_javascript_test2","css_files":[],"js_files":["test2.js"],"js_code":"test2('external_js2', 'Ok');"});</script>
<script id="google_analytics_56">BigPipe.onArrive({"innerHTML":"","id":"google_analytics","css_files":[],"js_files":[],"js_code":" var _gaq = _gaq || [];\n _gaq.push(['_setAccount', 'UA-18754626-1']);\n _gaq.push(['_trackPageview']);\n\n (function() {\n var ga = document.createElement('script'); ga.type = 'text\/javascript'; ga.async = true;\n ga.src = ('https:' == document.location.protocol ? 'https:\/\/ssl' : 'http:\/\/www') + '.google-analytics.com\/ga.js';\n var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);\n })();\n\n"});</script>
<script id="final_ok_57">BigPipe.onArrive({"innerHTML":"","id":"final_ok","css_files":[],"js_files":["test.js"],"js_code":"$('header').innerHTML = 'All done';","is_last":true});</script>
</html><!--html end tag from bigpipe renderer-->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment