Performance test of function.bind()

Based on some user defined parameters the performance of function.bind and an anonymous function is measured and compared.

by bjoerne

HTML

<script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/sha3.js"></script>
<h1>Test parameters</h1>
<table>
    <tr>
        <td><label for="num-of-proxies">Number of proxies</label></td>
        <td><input type="text" name="num-of-proxies" value="100" /></td>
    </tr>
    <tr>
        <td><label for="num-of-invokations">Number of invokations per proxy</label></td>
        <td><input type="text" name="num-of-invokations-per-proxy" value="10" /></td>
    </tr>
    <tr>
        <td><label for="num-of-iterations">Number of iterations inside called function</label></td>
        <td><input type="text" name="num-of-iterations" value="10" /></td>
    </tr>
</table>
<button id="start-test">Start</button>
<button id="stop-test" disabled="disabled">Stop</button>
<h1>Results</h1>
<h2>Anonymous function</h2>
<table>
    <tr>
        <td>Number of runs</td>
        <td><span id="num-of-runs-anonym"></span></td>
    </tr>
    <tr>
        <td>Average result (millies)</td>
        <td><span id="result-anonym"></span></td>
    </tr>
</table>
<h2>jQuery proxy</h2>
<table>
    <tr>
        <td>Number of runs</td>
        <td><span id="num-of-runs-proxy"></span></td>
    </tr>
    <tr>
        <td>Average result (millies)</td>
        <td><span id="result-proxy"></span></td>
    </tr>
</table>
<h2>Comparison</h2>
<table>
    <tr>
        <td>Anonymous better than proxy (millies):</td>
        <td><span id="anonymous-better-than-proxy-abs"></span></td>
    </tr>
    <tr>
        <td>Anonymous better than proxy (%):</td>
        <td><span id="anonymous-better-than-proxy-rel"></span></td>
    </tr>
    <tr>
        <td>Proxy worse than anonymous (%):</td>
        <td><span id="proxy-worse-than-anonymous-rel"></span></td>
    </tr>
</table>

CoffeeScript

class TestApp
    
    constructor: ->
        $('#start-test').on 'click', @startTest.bind @
        $('#stop-test').on 'click', @stopTest.bind @
        
    startTest: ->
        numberOfProxies = $('input[name=num-of-proxies]').val();
        numberOfInvokationsPerProxy = $('input[name=num-of-invokations-per-proxy]').val();
        numOfIterations = $('input[name=num-of-iterations]').val();
        @testController = new TestController(numberOfProxies, numberOfInvokationsPerProxy, numOfIterations, @doSomething, @updateAnonymousTestResult.bind(@), @updateProxyTestResult.bind(@))
        @testController.start()
        $('#start-test').prop 'disabled', true
        $('#stop-test').prop 'disabled', false

    updateAnonymousTestResult: (numOfRuns, result) ->
        @lastResultAnonymous = result
        $('#num-of-runs-anonym').html numOfRuns
        $('#result-anonym').html result
        @updateComparison()
        
    updateProxyTestResult: (numOfRuns, result) ->
        @lastResultProxy = result
        $('#num-of-runs-proxy').html numOfRuns
        $('#result-proxy').html result
        @updateComparison()
        
    updateComparison: ->
        return unless @lastResultAnonymous || @lastResultProxy
        diff = @lastResultProxy - @lastResultAnonymous
        $('#anonymous-better-than-proxy-abs').html(diff)
        $('#anonymous-better-than-proxy-rel').html(100 * diff / @lastResultProxy)
        $('#proxy-worse-than-anonymous-rel').html(-100 * diff / @lastResultAnonymous)

    stopTest: ->
        @testController.stop()
        $('#start-test').prop 'disabled', false
        $('#stop-test').prop 'disabled', true
        
    doSomething: ->
        hash = CryptoJS.SHA3("Message")

class TestController
    
    constructor: (@numberOfProxies, @numberOfInvokationsPerProxy, @numOfIterations, @referenceFunction, @resultCallbackAnonym, @resultCallbackProxy) ->
    
    start: ->
        @nextTest = 0 #round robin, 0 = anonym, 1 = proxy
        @active =...