koizuss/js-function-measurement.html

## js-function-measurement.html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js-function-measurement</title>
</head>
<body>
<style type="text/css">
    dd {position: relative; width: 250px;}
    [id^=item] { font-weight: bold; position: absolute; right: 0;}
</style>
<dl>
    <dd>(function ... : <span id="item1"></span></dd>
    <dd>!function ... : <span id="item2"></span></dd>
    <dd>+function ... : <span id="item3"></span></dd>
    <dd>-function ... : <span id="item4"></span></dd>
    <dd>void function ... : <span id="item5"></span></dd>
    <dd>typeof function ... : <span id="item6"></span></dd>
    <dd>var xxx = function ... : <span id="item7"></span></dd>
</dl>
<script type="text/javascript">
    var showTimestamp = function(start, stop) {
        stop = stop || new Date();
        return function(target) {
            document.getElementById(target).innerHTML = '' + (stop - start) + 'ms';
        };
    }
    , functions = [
        function(start) {
            (function() {
                showTimestamp(start)('item1');
            })();
            // ダミー
        }
        , function(start) {
            (function() {
                showTimestamp(start)('item1');
            })();
        }
        , function(start) {
            !function() {
                showTimestamp(start)('item2');
            }();
        }
        , function(start) {
            +function() {
                showTimestamp(start)('item3');
            }();
        }
        , function(start) {
            -function() {
                showTimestamp(start)('item4');
            }();
        }
        , function(start) {
            void function() {
                showTimestamp(start)('item5');
            }();
        }
        , function(start) {
            typeof function() {
                showTimestamp(start)('item6');
            }();
        }
        , function(start) {
            var func = function() {
                showTimestamp(start)('item7');
            };
            func();
        }
    ];

    for(var i = 0; i < functions.length; i++) {
        var start = new Date();
        for(var j = 0; j < 9999; j++) {
            functions[i](start);
        }
    }
</script>
</body>
</html>
	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>js-function-measurement</title>
	</head>
	<body>
	<style type="text/css">
	dd {position: relative; width: 250px;}
	[id^=item] { font-weight: bold; position: absolute; right: 0;}
	</style>
	<dl>
	<dd>(function ... : <span id="item1"></span></dd>
	<dd>!function ... : <span id="item2"></span></dd>
	<dd>+function ... : <span id="item3"></span></dd>
	<dd>-function ... : <span id="item4"></span></dd>
	<dd>void function ... : <span id="item5"></span></dd>
	<dd>typeof function ... : <span id="item6"></span></dd>
	<dd>var xxx = function ... : <span id="item7"></span></dd>
	</dl>
	<script type="text/javascript">
	var showTimestamp = function(start, stop) {
	stop = stop \|\| new Date();
	return function(target) {
	document.getElementById(target).innerHTML = '' + (stop - start) + 'ms';
	};
	}
	, functions = [
	function(start) {
	(function() {
	showTimestamp(start)('item1');
	})();
	// ダミー
	}
	, function(start) {
	(function() {
	showTimestamp(start)('item1');
	})();
	}
	, function(start) {
	!function() {
	showTimestamp(start)('item2');
	}();
	}
	, function(start) {
	+function() {
	showTimestamp(start)('item3');
	}();
	}
	, function(start) {
	-function() {
	showTimestamp(start)('item4');
	}();
	}
	, function(start) {
	void function() {
	showTimestamp(start)('item5');
	}();
	}
	, function(start) {
	typeof function() {
	showTimestamp(start)('item6');
	}();
	}
	, function(start) {
	var func = function() {
	showTimestamp(start)('item7');
	};
	func();
	}
	];

	for(var i = 0; i < functions.length; i++) {
	var start = new Date();
	for(var j = 0; j < 9999; j++) {
	functions[i](start);
	}
	}
	</script>
	</body>
	</html>