jbenesch/benchmark.html

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

        }
    </style>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script type="text/javascript">
        $(function() {
            window.log = function (txt) {
                $("#console").append($("<p>" + txt + "</p>"));
            };

            window.startLog = function(txt) {
                log("Start: " + txt);
                var start = performance.now();
                return function() {
                    var e = performance.now();
                    log("Finished: " + txt + " " + e +" ms");
                    return e;
                }
            };

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

            var attach = startLog("Attaching boomqueries");
            boomQueries.add('.stuff',
                    [
                            [ 550, 'sm' ],
                            [ 800, 'lg' ]
                    ]);
            attach();

            var resizing = startLog("Resizing dom");
            $(".body").width(600);
            boomQueries.refresh();
            resizing();

            setTimeout(function() {
                var resizing = startLog("Resizing dom");
                $(".body").width(900);
                boomQueries.refresh();
                resizing();
            }, 1000);
        });
    </script>
    <script src="https://rawgit.com/BoomTownROI/boomqueries/master/src/js/boomqueries.js"></script>
</head>
<body>
<div id="console"></div>
<div class="body"></div>
</body>
</html>
	<html>
	<head>
	<style>
	.lg {
	width: 100px;
	background-color: blue;
	height: 20px;
	display: inline-block;
	border: 1px black;
	}
	.sm {
	width: 20px;
	background-color: green;
	height: 20px;
	display: inline-block;
	border: 1px black;
	}
	.body {

	}
	</style>
	<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script type="text/javascript">
	$(function() {
	window.log = function (txt) {
	$("#console").append($("<p>" + txt + "</p>"));
	};

	window.startLog = function(txt) {
	log("Start: " + txt);
	var start = performance.now();
	return function() {
	var e = performance.now();
	log("Finished: " + txt + " " + e +" ms");
	return e;
	}
	};

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

	var attach = startLog("Attaching boomqueries");
	boomQueries.add('.stuff',
	[
	[ 550, 'sm' ],
	[ 800, 'lg' ]
	]);
	attach();

	var resizing = startLog("Resizing dom");
	$(".body").width(600);
	boomQueries.refresh();
	resizing();

	setTimeout(function() {
	var resizing = startLog("Resizing dom");
	$(".body").width(900);
	boomQueries.refresh();
	resizing();
	}, 1000);
	});
	</script>
	<script src="https://rawgit.com/BoomTownROI/boomqueries/master/src/js/boomqueries.js"></script>
	</head>
	<body>
	<div id="console"></div>
	<div class="body"></div>
	</body>
	</html>