withinboredom/benchmark.html

## benchmark.html
<html>
<head>
    <style>
        .lg {
            background-color: blue;
            height: 20px;
            display: inline-block;
            border: 1px solid black;
        }
        .sm {
            background-color: green;
            height: 20px;
            display: inline-block;
            border: 1px solid black;
        }
        .body {

        }

        .body.lg {
            border: 10px solid blue;
            background-color: #005082;
        }

        .body.sm {
            border: 10px solid green;
            background-color: #003300;
        }

        .body.lg .stuff {
            width: 20px;
            height: 20px;
            background-color: blue;
            display: inline-block;
            border: 1px solid black;
        }

        .body.sm .stuff {
            width: 20px;
            height: 20px;
            background-color: green;
            display: inline-block;
            border: 1px solid black;
        }
    </style>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        $(function() {
            // a pretty log function -- but could be purtier
            window.log = function (txt) {
                $("#console").append($("<p>" + txt + "</p>"));
            };

            // mark the beginning of a timed execution, return a function to call when done
            window.startLog = function(txt) {
                log("Start: " + txt);
                var start = Date.now();
                return function(extra) {
                    var e = Date.now() - start;
                    if (extra != null) {
                        extra = " - " + extra;
                    }
                    else {
                        extra = "";
                    }
                    log("Finished: " + txt + " " + e +" ms" + extra);
                    return e;
                }
            };

            // wait for a minute before moving on to the next step
            var defer = function(func, time) {
                var def = $.Deferred();

                setTimeout(function() {
                    func();
                    def.resolve();
                }, time);

                return def.promise();
            };

            // resizes a selector to a size
            var resize = function(selector, size) {
                return defer(function() {
                    var resizing = startLog("Resizing dom to " + size + "px");
                    $(selector).width(size);
                    boomQueries.refresh();
                    resizing();
                }, 500);
            };

            // some vars to play with
            var smallBreak = 100;
            var largeBreak = 600;
            var small = smallBreak + 5;
            var large = largeBreak + 5;
            var numberNodes = 1000;

            // creates our test elements
            log("Starting up");
            var creating = startLog("Creating test elements");
            for (var i = 0; i < numberNodes; i++) {
                $(".body").append($("<div class='stuff lg' />"));
            }
            creating();

            // attaches boomqueries to said created elements
            var attach = startLog("Attaching boomqueries");
            boomQueries.add('.stuff',
                    [
                            [ smallBreak, 'sm' ],
                            [ largeBreak, 'lg' ]
                    ]);
            attach(boomQueries.nodes.length + " nodes added");

            // starts resizing stuff and then removes boomqueries...
            var q = resize(".stuff", small).then(
                    resize(".stuff", large)).then(
                    resize(".stuff", small)).then(defer(function() {
                        var remove = startLog("Removing boomqueries");
                        boomQueries.remove('.stuff');
                        remove();
                    }, 500));

            // lets test when we have a lot of children
            q.then(
                defer(function() {
                    var creating = startLog("Creating test for large children node size");
                    for (var i = 0; i < numberNodes; i++) {
                        $(".body").append($("<div class='stuff' />"));
                    }
                    creating();
                }, 500));

            // attach to the parent div
            q.then(
                defer(function() {
                    var attached = startLog("Attaching boomqueries");
                    boomQueries.add(".body",
                        [
                            [ smallBreak, 'sm' ],
                            [ largeBreak, 'lg' ]
                        ]
                    );
                    attached();
                }, 500)
            );

            // resize the parent div
            q.then(resize(".body", small));
            q.then(resize(".body", large));

            // and remove
            q.then(defer(function() {
                var remove = startLog("Removing boomqueries");
                boomQueries.remove('.body');
                remove();
            }, 500));
        });
    </script>
    <script src="https://cdn.rawgit.com/BoomTownROI/boomqueries/v0.1.0/dist/js/boomqueries.min.js"></script>
</head>
<body>
<div id="console"></div>
<div class="body"></div>
</body>
</html>
	<html>
	<head>
	<style>
	.lg {
	background-color: blue;
	height: 20px;
	display: inline-block;
	border: 1px solid black;
	}
	.sm {
	background-color: green;
	height: 20px;
	display: inline-block;
	border: 1px solid black;
	}
	.body {

	}

	.body.lg {
	border: 10px solid blue;
	background-color: #005082;
	}

	.body.sm {
	border: 10px solid green;
	background-color: #003300;
	}

	.body.lg .stuff {
	width: 20px;
	height: 20px;
	background-color: blue;
	display: inline-block;
	border: 1px solid black;
	}

	.body.sm .stuff {
	width: 20px;
	height: 20px;
	background-color: green;
	display: inline-block;
	border: 1px solid black;
	}
	</style>
	<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script type="text/javascript">
	$(function() {
	// a pretty log function -- but could be purtier
	window.log = function (txt) {
	$("#console").append($("<p>" + txt + "</p>"));
	};

	// mark the beginning of a timed execution, return a function to call when done
	window.startLog = function(txt) {
	log("Start: " + txt);
	var start = Date.now();
	return function(extra) {
	var e = Date.now() - start;
	if (extra != null) {
	extra = " - " + extra;
	}
	else {
	extra = "";
	}
	log("Finished: " + txt + " " + e +" ms" + extra);
	return e;
	}
	};

	// wait for a minute before moving on to the next step
	var defer = function(func, time) {
	var def = $.Deferred();

	setTimeout(function() {
	func();
	def.resolve();
	}, time);

	return def.promise();
	};

	// resizes a selector to a size
	var resize = function(selector, size) {
	return defer(function() {
	var resizing = startLog("Resizing dom to " + size + "px");
	$(selector).width(size);
	boomQueries.refresh();
	resizing();
	}, 500);
	};

	// some vars to play with
	var smallBreak = 100;
	var largeBreak = 600;
	var small = smallBreak + 5;
	var large = largeBreak + 5;
	var numberNodes = 1000;

	// creates our test elements
	log("Starting up");
	var creating = startLog("Creating test elements");
	for (var i = 0; i < numberNodes; i++) {
	$(".body").append($("<div class='stuff lg' />"));
	}
	creating();

	// attaches boomqueries to said created elements
	var attach = startLog("Attaching boomqueries");
	boomQueries.add('.stuff',
	[
	[ smallBreak, 'sm' ],
	[ largeBreak, 'lg' ]
	]);
	attach(boomQueries.nodes.length + " nodes added");

	// starts resizing stuff and then removes boomqueries...
	var q = resize(".stuff", small).then(
	resize(".stuff", large)).then(
	resize(".stuff", small)).then(defer(function() {
	var remove = startLog("Removing boomqueries");
	boomQueries.remove('.stuff');
	remove();
	}, 500));

	// lets test when we have a lot of children
	q.then(
	defer(function() {
	var creating = startLog("Creating test for large children node size");
	for (var i = 0; i < numberNodes; i++) {
	$(".body").append($("<div class='stuff' />"));
	}
	creating();
	}, 500));

	// attach to the parent div
	q.then(
	defer(function() {
	var attached = startLog("Attaching boomqueries");
	boomQueries.add(".body",
	[
	[ smallBreak, 'sm' ],
	[ largeBreak, 'lg' ]
	]
	);
	attached();
	}, 500)
	);

	// resize the parent div
	q.then(resize(".body", small));
	q.then(resize(".body", large));

	// and remove
	q.then(defer(function() {
	var remove = startLog("Removing boomqueries");
	boomQueries.remove('.body');
	remove();
	}, 500));
	});
	</script>
	<script src="https://cdn.rawgit.com/BoomTownROI/boomqueries/v0.1.0/dist/js/boomqueries.min.js"></script>
	</head>
	<body>
	<div id="console"></div>
	<div class="body"></div>
	</body>
	</html>