johnthethird
6/9/2012 - 8:54 PM

IE8 Batman Performance

IE8 Batman Performance

<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=8" />
  <title>Batman Profiler</title>
  <script type="text/javascript" src="https://raw.github.com/Shopify/batman/master/lib/es5-shim.js"></script>
  <script type="text/javascript" src="https://raw.github.com/Shopify/batman/v0.9.0/lib/batman.js"></script>
  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
  <script type="text/javascript" src="http://coffeescript.org/extras/coffee-script.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

</head>
<body>

<script type="text/coffeescript">

window.Robin = class Robin extends Batman.App
  numModels = 1
  curRun = 0
  numRuns = 100

  shortArticle = "i"
  shortArticle += "i" for i in [0..1000]

  longArticle = "i"
  longArticle += "i" for i in [0..50000]

  stats = new Batman.SimpleHash

  @profile: (msg, f) ->
    start = new Date
    f.call()
    end = new Date
    t = end - start
    h = stats.getOrSet(msg, -> [])
    h.push(t)

  @createModels: () ->
    Robin.profile "create #{numModels} Models", ->
      for j in [0..numModels]
        rand = Math.floor((Math.random()*100000)+1)
        a = new Robin.Article()  # {"id": rand, "body": longArticle})
        a.fromJSON({"id": rand, "body": shortArticle})

  @addModelsEmptySimpleSet: () ->
    Robin.set("newarticles", new Batman.SimpleSet)
    Robin.profile "add #{numModels} to Empty SimpleSet", ->
      for j in [0..numModels]
        rand = Math.floor((Math.random()*100000)+1)
        a = new Robin.Article()  # {"id": rand, "body": longArticle})
        a.fromJSON({"id": rand, "body": shortArticle})
        Robin.get("newarticles").add(a)

  @addModelsSimpleSet: () ->
    Robin.profile "add #{numModels} to SimpleSet", ->
      for j in [0..numModels]
        rand = Math.floor((Math.random()*100000)+1)
        a = new Robin.Article()  # {"id": rand, "body": longArticle})
        a.fromJSON({"id": rand, "body": shortArticle})
        Robin.get("articles").add(a)

  @addModelsIdentityMap: () ->
    Robin.profile "add #{numModels} through Imap", ->
      for j in [0..numModels]
        rand = Math.floor((Math.random()*100000)+1)
        a = new Robin.Article()  # {"id": rand, "body": longArticle})
        a.fromJSON({"id": rand, "body": shortArticle})
        Robin.Article._mapIdentity(a, -> )  #this is slower

  @graphStats: () ->
    chart = new Highcharts.Chart
      chart:
        animation: false
        renderTo: 'statsChart'
        type: 'line'
      title:
        text: "Batman Profiler"
      yAxis:
        title:
          text: "Milliseconds"
      plotOptions:
        series:
          animation: false
      series: stats.map((k,v) -> {name: k, data: v})

  @go: () ->
    while curRun < numRuns
      curRun +=1
      @createModels()
      @addModelsEmptySimpleSet()
      @addModelsSimpleSet()
      @addModelsIdentityMap()
      @graphStats()
    curRun = 0

  @on 'run', ->
    Robin.set("articles", new Batman.SimpleSet)
    Robin.set("articlesImap", Robin.Article.get("loaded"))


class Robin.Article extends Batman.Model
  @encode 'id', 'body'

Robin.run()

</script>


<div id="container">
    <button data-event-click="go">Go</button><br>
    Articles IMap Length: <span data-bind="articlesImap.length"></span><br>
    Articles SimpleSet Length: <span data-bind="articles['length']"></span><br>
  <hr />
  <div id="statsChart" style="min-width: 400px; height: 400px; margin: 0 auto"></div>

  Log:
    <div id="logs"></div>

  <div data-foreach-article="zarticles">
    <p data-bind="article.id | append ':' | append article.body"></p>
  </div>

</div>


</body>
</html>