Big Pipe

test.js

	$('external_js').innerHTML = 'Ok';
	// Important, notice BigPipe that this file has been loaded
	if (BigPipe != undefined) { BigPipe.fileLoaded("test.js"); }

view raw gistfile1.js hosted with ❤ by GitHub

test2.js

	function test2(id, message) {
	$(id).innerHTML = message;
	}
	// Important, notice BigPipe that this file has been loaded
	if (BigPipe != undefined) { BigPipe.fileLoaded("test2.js"); }

view raw gistfile1.js hosted with ❤ by GitHub

prototypepatch.js

	/*
	* $Id: prototypepatch.js,v 1.20 2010/09/13 12:09:58 antti-pe Exp $
	*
	* Copyright � 2008 - 2009 Sulake Dynamoid Oy http://www.dynamoid.com/
	*
	* Patches for prototype 1.6.0.2
	*/
	Prototype.Browser.IE6 = Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) == 6;
	Prototype.Browser.IE7 = Prototype.Browser.IE && parseInt(navigator.userAgent.substring(navigator.userAgent.indexOf("MSIE")+5)) == 7;
	Prototype.Browser.IE8 = Prototype.Browser.IE && !Prototype.Browser.IE6 && !Prototype.Browser.IE7;
	/***** Event.observeOnce *****/
	var PrototypeEventPatch = {
	observeOnce: function(element, eventName, handler, predicate) {
	var onceHandler = function() {
	if (typeof predicate != 'function' || predicate.apply(this, arguments)) {
	handler.apply(this, arguments);
	Event.stopObserving(element, eventName, onceHandler);
	}
	}.bindAsEventListener(element);
	return Event.observe(element, eventName, onceHandler);
	}
	};
	Object.extend(window.Event, PrototypeEventPatch);
	Object.extend(document, {
	observeOnce: PrototypeEventPatch.observeOnce.methodize()
	});
	Element.addMethods({
	observeOnce: PrototypeEventPatch.observeOnce
	});
	/***** /Event.observeOnce *****/
	var PrototypeElementPatch = {
	delegate: function(element, selector, eventName, callback) {
	element = $(element);
	element.observe(eventName, function(callback, evt) {
	if (el = evt.findElement(selector)) {
	callback.bind(el, evt)();
	}
	}.curry(callback));
	return element;
	},
	preventTextSelection: function(element) {
	if (typeof element.onselectstart != 'undefined') {
	// IE
	element.observe('selectstart', function(evt) {
	evt.preventDefault();
	});
	} else if (typeof element.style.MozUserSelect != 'undefined') {
	// Mozilla
	element.style.MozUserSelect = 'none';
	} else {
	// Others
	element.observe('mousedown', function(evt) {
	evt.preventDefault();
	});
	}
	}
	};
	Element.addMethods(PrototypeElementPatch);
	function $RF(el, radioGroup) {
	if($(el).type && $(el).type.toLowerCase() == 'radio') {
	var radioGroup = $(el).name;
	var el = $(el).form;
	} else if ($(el).tagName.toLowerCase() != 'form') {
	return false;
	}
	var checked = $(el).getInputs('radio', radioGroup).find(function(re) { return re.checked; });
	return (checked) ? $F(checked) : null;
	}
	Object.extend(Element.Methods.ByTag, {
	"FORM": Object.clone(Form.Methods),
	"INPUT": Object.clone(Form.Element.Methods),
	"SELECT": Object.clone(Form.Element.Methods),
	"TEXTAREA": Object.clone(Form.Element.Methods),
	"BUTTON": Object.clone(Form.Element.Methods)
	});
	Element.addMethods();
	/**
	* Event.simulate(@element, eventName[, options]) -> Element
	*
	* - @element: element to fire event on
	* - eventName: name of event to fire (only MouseEvents and HTMLEvents interfaces are supported)
	* - options: optional object to fine-tune event properties - pointerX, pointerY, ctrlKey, etc.
	*
	* $('foo').simulate('click'); // => fires "click" event on an element with id=foo
	*
	* @license MIT
	* @copyright (c) 2009 Juriy Zaytsev
	*/
	(function() {
	var eventMatchers = {
	'HTMLEvents': /^(?:load|unload|abort|error|select|change|submit|reset|focus|blur|resize|scroll)$/,
	'MouseEvents': /^(?:click|mouse(?:down|up|over|move|out))$/
	}
	var defaultOptions = {
	pointerX: 0,
	pointerY: 0,
	button: 0,
	ctrlKey: false,
	altKey: false,
	shiftKey: false,
	metaKey: false,
	bubbles: true,
	cancelable: true
	}
	Event.simulate = function(element, eventName) {
	var options = Object.extend(defaultOptions, arguments[2] || { });
	var oEvent, eventType = null;
	element = $(element);
	for (var name in eventMatchers) {
	if (eventMatchers[name].test(eventName)) { eventType = name; break; }
	}
	if (!eventType)
	throw new SyntaxError('Only HTMLEvents and MouseEvents interfaces are supported');
	if (document.createEvent) {
	oEvent = document.createEvent(eventType);
	if (eventType == 'HTMLEvents') {
	oEvent.initEvent(eventName, options.bubbles, options.cancelable);
	} else {
	oEvent.initMouseEvent(eventName, options.bubbles, options.cancelable, document.defaultView,
	options.button, options.pointerX, options.pointerY, options.pointerX, options.pointerY,
	options.ctrlKey, options.altKey, options.shiftKey, options.metaKey, options.button, element);
	}
	element.dispatchEvent(oEvent);
	} else {
	options.clientX = options.pointerX;
	options.clientY = options.pointerY;
	oEvent = Object.extend(document.createEventObject(), options);
	element.fireEvent('on' + eventName, oEvent);
	}
	return element;
	}
	Element.addMethods({ simulate: Event.simulate });
	})();
	Object.extend(document, {
	bufferedEvents: new Hash(),
	fire: document.fire.wrap(function(proceed, eventName, memo) {
	var a = document.bufferedEvents.get(eventName);
	if (!a) {
	a = new Array();
	document.bufferedEvents.set(eventName, a);
	}
	a.push(proceed(eventName, memo));
	}),
	observe: document.observe.wrap(function(proceed, eventName, handler) {
	var a = document.bufferedEvents.get(eventName);
	if (a) {
	a.each(function(event) {
	handler(event)
	});
	}
	proceed(eventName, handler);
	})
	});
	Object.extend(Form.Element.Methods, {
	disable: Form.Element.Methods.disable.wrap(function(proceed, element) {
	element.fire('form:disable');
	return proceed(element);
	}),
	enable: Form.Element.Methods.enable.wrap(function(proceed, element) {
	element.fire('form:enable');
	return proceed(element);
	})
	});
	Element.addMethods([ 'FORM', 'INPUT', 'TEXTAREA', 'SELECT', 'BUTTON' ], { disable: Form.Element.Methods.disable, enable: Form.Element.Methods.enable });

view raw gistfile1.js hosted with ❤ by GitHub

bigpipe.js

	/***** BIGPIPE *****/
	/**
	* NOTE: THIS FILE IS PART OF THE startup.js COMPILATION. REMEMBER TO UPDATE THE COMPILATION AFTER MODIFICATIONS!
	*
	* This our BigPipe implementation which is modelled after the Facebook BigPipe, which is described at:
	* http://www.facebook.com/notes/facebook-engineering/bigpipe-pipelining-web-pages-for-high-performance/389414033919
	*/
	var globalEval = function globalEval(src) {
	if (window.execScript) {
	window.execScript(src);
	return;
	}
	var fn = function() {
	window.eval.call(window,src);
	};
	fn();
	};
	/**
	* A single pagelet resource which currently can be a css file or a javascript file. Note that this excludes Javascript
	* executable code which is not stored here but inside the Pagelet class.
	*/
	var PageletResource = Class.create({
	/**
	* Resource name: the filename without path
	* @param file string
	*/
	name: null,
	/**
	* Resource file with full path.
	* @param name string
	*/
	file: null,
	/**
	* Resource type: string "js" or "css"
	* @param type string
	*/
	type: null,
	/**
	* State of this resource. The state is used to track if the resource has been loaded
	* and later if all resources for a given pagelet has been loaded so that pagelet
	* state can proceed.
	*
	* @param phase integer
	*/
	phase: 0, // States:
	// 0: not started.
	// 1: started loading
	// 2: loading done.
	/**
	* Array of callbacks which will be called when this resource has been loaded.
	* @param belongs Array
	*/
	belongs: null,
	initialize: function(file, name, type) {
	this.name = name;
	this.file = file;
	this.type = type;
	this.belongs = new Array();
	BigPipe.debug("Pagelet " + name + " created as type " + type + " with file ", file);
	},
	/**
	* Attaches a callback to this resource. The callback will be called when this resource has been loaded.
	* @param callback
	*/
	attachToPagelet: function(callback) {
	this.belongs.push(callback);
	},
	/**
	* Starts loading this resource. Depending on the resource type (js|css) this will add a proper html
	* tag to the end of the document which kicks the browser to start loading the resource.
	*
	* JS resources must contain a BigPipe.fileLoaded() call to notify bigpipe that the js file
	* has been loaded and processed.
	*
	* {code}
	* if (BigPipe != undefined) { BigPipe.fileLoaded("geodata_google.js"); }
	* {code}
	*
	* TODO: CSS resources are tagged to be completed immediately after the css link tag has been inserted,
	* but in the future a better way would be needed so that the actual load moment would be detected.
	*
	*/
	startLoading: function() {
	if (this.phase != 0) {
	return;
	}
	BigPipe.debug("Started loading " + this.type + " resource:", this.file);
	if (this.type == 'css') {
	var ref = document.createElement('link');
	ref.setAttribute('rel', 'stylesheet');
	ref.setAttribute('type', 'text/css');
	ref.setAttribute('href', this.file);
	/*
	ref.observe('onload', function() {
	alert("moroo");
	});
	ref.onload = function() { alert("moroo"); };
	*/
	//$$('head').first().insert(ref);
	document.write('<li' + 'nk rel="stylesheet" type="text/css" href="' + this.file + '" />');
	this.phase = 1;
	this.onComplete();
	}
	if (this.type == 'js') {
	var js = document.createElement('script');
	js.setAttribute('type', 'text/javascript');
	js.setAttribute('src', this.file);
	$$('head').first().insert(js);
	}
	},
	/**
	* Callback which is called when this resource has been loaded. On CSS files the startLoading does this
	* and on JS files the BigPipe will do this.
	*
	* This will set state = 2 (resource has been loaded) and call all callbacks.
	*/
	onComplete: function() {
	if (this.phase == 2) {
	return;
	}
	this.phase = 2;
	this.belongs.each(function(x) {
	x(this);
	}.bind(this));
	}
	});
	/**
	* A single Pagelet. Pagelet is a set of data which is streamed from web server and placed into correct elements
	* in the html page as soon as each pagelet has been delivered to the browser.
	*
	* Pagelet has different execution phases which are executed in certain order (the orders [1,4] are
	* loosely the same as the <i>phases</i> of this Pagelet):
	*
	* -1) Pagelet placeholder printing. This happens in web server and it prints a <div id="{this.id}"></div>
	*
	* 0) Pagelet arrives to browser. This includes all pagelet data which has been rendered by the web server
	*
	* 1) CSS loading: BigPipe asks each CSS PageletResource to start loading. This will kick browser to start
	* downloading the css resources. Currently BigPipe does not wait that these resources are loaded, but
	* immediately continue to the next phase:
	*
	* 2) HTML Injecting. After all CSS resources which are needed by this Pagelet are loaded, the BigPipe
	* will inject the HTML code to the placeholder div.
	*
	* 3) After ALL Pagelet are on phase 3 (eg. they're all on this step) the BigPipe will start to load
	* the .js files which are needed by its pagelets.
	*
	* 4) After all js resources which are needed by a Pagelet are loaded, the BigPipe will execute the jsCode
	* of the pagelet. This is done by evaluating with globalEval() call.
	*/
	var Pagelet = Class.create({
	/**
	* String of javascript code
	* @param jsCode string
	*/
	jsCode: null,
	/**
	* Array of PageletResources which are needed by this Pagelet.
	* @param cssResources Array
	*/
	cssResources: null,
	/**
	* Array of PageletResources which are needed by this Pagelet.
	* @param jsResources Array
	* @param json
	*/
	jsResources: null,
	/**
	* Id of this pagelet. This is also the id of the target object in the html page where the pagelet is injected.
	* @param id string
	*/
	id: "",
	/**
	* The html code of this pagelet which is injected into the div which id is this.id as the divs innerHTML.
	* @param innerHTML string
	*/
	innerHTML: "",
	/**
	* Stores the json data between initialize() and start()
	* @param json
	*/
	json: null,
	phase: 0, // Phases:
	// 0: not started
	// 1: loading css resources
	// 2: css resources loaded, injecting innerHTML
	// 3: innerHTML injected
	// 4: related JS resources loaded and executed
	/**
	* Initializes this pagelet. The json is directly the json data which the web server has transported
	* to the browser via the BigPipe.onArrive() call.
	* @param json
	*/
	initialize: function(json) {
	this.id = json.id;
	this.phase = 0;
	this.json = json;
	this.jsCode = json.js_code;
	this.cssResources = new Hash();
	this.jsResources = new Hash();
	this.innerHTML = json.innerHTML;
	},
	start: function() {
	this.json.css_files.each(function(x) {
	var cssResource = BigPipe.pageletResourceFactory(x, 'css');
	this.attachCssResource(cssResource);
	}.bind(this));
	this.json.js_files.each(function(x) {
	var jsResource = BigPipe.pageletResourceFactory(x, 'js');
	this.attachJsResource(jsResource);
	}.bind(this));
	this.cssResources.each(function(pair) {
	this.phase = 1;
	pair.value.startLoading();
	});
	// Check if we actually started to load any css files. if not, we can just skip ahead.
	if (this.phase == 0) {
	this.injectInnerHTML();
	}
	},
	/**
	* Attaches a CSS resource to this Pagelet.
	* @private
	* @param resource
	*/
	attachCssResource: function(resource) {
	BigPipe.debug("Attaching CSS resource " + resource.file + " to pagelet " + this.id, null);
	resource.attachToPagelet(this.onCssOnload.bind(this));
	this.cssResources.set(resource.file, resource);
	},
	/**
	* Attaches a JS resource to this Pagelet.
	* @private
	* @param resource
	*/
	attachJsResource: function(resource) {
	BigPipe.debug("Attaching JS resource " + resource.file + " to pagelet " + this.id, null);
	resource.attachToPagelet(this.onJsOnload.bind(this));
	this.jsResources.set(resource.file, resource);
	},
	/**
	* Callback which is called from PageletResource when a javascript file has been loaded.
	* If all js resources needed by this Pagelet are loaded then this function will proceed to the final
	* phase and evaluate the possible jsCode.
	*
	* @param x PageletResource which has just been loaded.
	*/
	onJsOnload: function(x) {
	if (this.phase > 3) {
	return;
	}
	var allLoaded = true;
	this.jsResources.each(function(pair) {
	if (pair.value.phase != 2) {
	allLoaded = false;
	}
	});
	if (!allLoaded) {
	return;
	}
	if (this.jsResources.size() > 0) {
	BigPipe.debug("pagelet " + this.id + ": All JS resources are loaded");
	}
	if (this.jsCode && this.jsCode != "") {
	try {
	BigPipe.debug("evaluating js code: ", this.jsCode);
	globalEval(this.jsCode);
	} catch (e) {
	BigPipe.debug("Error while evaluating " + x, e);
	}
	}
	this.phase = 4;
	},
	/**
	* Callback which is called from PageletResource when a css file has been loaded.
	* If all css resources needed by this Pagelet are loaded then this function will proceed to the next
	* phase and inject the HTML code.
	*
	* @param x PageletResource which has just been loaded.
	*/
	onCssOnload: function(x) {
	BigPipe.debug("pagelet " + this.id + " got notified that CSS resource is loaded: ", x);
	var allLoaded = true;
	this.cssResources.each(function(pair) {
	if (pair.value.phase != 2) {
	allLoaded = false;
	}
	});
	if (!allLoaded) {
	return;
	}
	BigPipe.debug("all resources loaded", this);
	this.injectInnerHTML();
	},
	/**
	* Injects the innerHTML code to the Pagelet div placeholder.
	* @private
	*/
	injectInnerHTML: function() {
	this.phase = 2;
	var div = $(this.id);
	BigPipe.debug("injecting innerHTML to " + this.id, this);
	if (div != null && typeof this.innerHTML == "string" && this.innerHTML != "") {
	//alert("Injecting inner html: " + this.id);
	//div.innerHTML = this.innerHTML;
	div.update(this.innerHTML);
	}
	this.phase = 3;
	BigPipe.pageletHTMLInjected(this);
	}
	});
	/**
	* BigPipe main class.
	*/
	var BigPipe = {
	/**
	* Map of all PageletResource objects. Resource name is used as the key and value is the PageletResource object
	*/
	pageletResources: new Hash(),
	/**
	* Map of all Pagelet objects. Pagelet id is used as the key.
	*/
	pagelets: new Hash(),
	phase: 0, // States:
	// 0: pagelets coming
	// 1: last pagelet has been receivered
	// 2: started to load js files
	/**
	* Global debugging valve for all BigPipe related stuff.
	*/
	debug_: true,
	/**
	* Called by web server when Pagelet has been arrived to the browser. In practice the web server
	* will render a <script>BigPipe.onArrive(...)</script> tag which executes this.
	* @param data
	*/
	onArrive: function(data) {
	this.debug("Pagelet arrived: ", data);
	// The last pagelet will have the is_last property set to true. This will signal
	// that we can start loading javascript resources.
	if (data.is_last != undefined && data.is_last) {
	this.debug("This pagelet was last:", data);
	this.phase = 1;
	}
	var pagelet = new Pagelet(data);
	this.pagelets.set(pagelet.id, pagelet);
	pagelet.start();
	},
	/**
	* Callback which is used from javascript resources to signal that the javascript file has been loaded.
	* This must be done by placing following javascript code to the end of the .js file:
	*
	* {code}
	* if (BigPipe != undefined) { BigPipe.fileLoaded("geodata.js"); }
	* {/code}
	*
	* @public
	* @param filename string Name of the javascript file without path.
	*/
	fileLoaded: function(filename) {
	var resource = this.pageletResources.get(filename);
	BigPipe.debug("js file loaded", filename);
	if (resource) {
	resource.onComplete();
	}
	},
	/**
	* Task has reached state 3 which means that it's ready for js loading. This is a callback
	* which is called from Pagelet.
	* @protected Called from a Pagelet
	* @param pagelet
	*/
	pageletHTMLInjected: function(pagelet) {
	var allLoaded = true;
	this.debug("pageletHTMLInjected", pagelet);
	this.pagelets.each(function(pair) {
	if (pair.value.phase < 3) {
	this.debug("pageletHTMLInjected pagelet still not loaded", pair.value);
	allLoaded = false;
	}
	}.bind(this));
	if (!allLoaded) {
	return;
	}
	if (this.phase == 1) {
	this.loadJSResources();
	}
	},
	/**
	* Starts loading javascript resources.
	* @private
	*/
	loadJSResources: function() {
	this.phase = 2;
	this.debug("Starting to load js resources...");
	var something_started = false;
	this.pageletResources.each(function(pair) {
	if (pair.value.type == 'js') {
	something_started = true;
	pair.value.startLoading();
	}
	});
	this.pagelets.each(function(pair) {
	if (pair.value.jsResources.size() == 0) {
	pair.value.onJsOnload();
	}
	}.bind(this));
	if (!something_started) {
	this.debug("No js resources in page, moving forward...");
	this.pagelets.each(function(pair) {
	pair.value.onJsOnload();
	}.bind(this));
	}
	},
	debug: function(funcName, data) {
	if (BigPipe.debug_ && typeof console != 'undefined' && typeof console.log != 'undefined') {
	console.log('BigPipe.' + funcName, data);
	}
	},
	/**
	* Returns a PageletResource from cache or creates new if the resource has not yet been created.
	*
	* @protected Called from Pagelet
	* @param file string Filename of the resource. eg "/js/talk.js"
	* @param type string type: "css" or "js"
	* @return PageletResource
	*/
	pageletResourceFactory: function(file, type) {
	var re = new RegExp("(?:.*\/)?(.+js)");
	var m = re.exec(file);
	var name = file;
	if (m) {
	name = m[1];
	}
	var res = this.pageletResources.get(name);
	if (res == null) {
	res = new PageletResource(file, name, type);
	this.pageletResources.set(name, res);
	}
	return res;
	}
	};
	/***** /BIGPIPE *****/

view raw gistfile1.js hosted with ❤ by GitHub

html

	<!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-->

view raw gistfile1.html hosted with ❤ by GitHub

http://www.juhonkoti.net/bigpipe/example.php