Permalink
Browse files

Perf

  • Loading branch information...
koenbok committed Sep 25, 2014
1 parent e5ce332 commit 40f024f4c70221691ff423e50f1c7574998ccbe3
Showing with 454 additions and 14 deletions.
  1. +15 −1 Makefile
  2. +3 −0 extras/CactusFramer/pages/perf.html
  3. +82 −13 extras/CactusFramer/static/app.coffee
  4. +10 −0 perf/index.html
  5. +109 −0 perf/init.coffee
  6. +137 −0 perf/init.js
  7. +98 −0 perf/runner.js
@@ -1,3 +1,4 @@
bin = ./node_modules/.bin
coffee = $(bin)/coffee
@@ -7,6 +8,10 @@ githash = `git rev-parse --short HEAD`
all: build
watch:
$(watch) make $(cmd)
# make watch cmd=perf
build:
make clean
mkdir -p build
@@ -52,6 +57,15 @@ safariw:
$(watch) make safari
perf:
$(browserify) perf/init.coffee -o perf/init.js
$(bin)/phantomjs perf/runner.js perf/index.html
perf%watch:
perf%watch:
$(watch) make perf
# Building and uploading the site
dist:
@@ -98,4 +112,4 @@ publish:
lint:
./node_modules/.bin/coffeelint -f coffeelint.json -r framer
.PHONY: all build test clean
.PHONY: all build test clean perf watch
@@ -0,0 +1,3 @@
<!-- <script src="{% static 'react.min.js' %}"></script> -->
<script src="{% static 'framer.js' %}"></script>
<script src="{% static 'perf.js' %}"></script>
@@ -1,23 +1,92 @@
getTime = Date.now
if performance.now
getTime = -> performance.now()
# class Timer
# constructor: -> @start()
# start: -> @_startTime = getTime()
# stop: -> getTime() - @_startTime
LAYERS = for i in [1..200]
class FPSTimer
layerC = new Layer
x: Math.random() * window.innerWidth,
y: Math.random() * window.innerHeight
constructor: -> @start()
start: ->
@_frameCount = 0
@_startTime = getTime()
Framer.Loop.on("render", @_tick)
stop: ->
time = getTime() - @_startTime
Framer.Loop.off("render", @_tick)
results =
time: time
frames: @_frameCount
fps: 1000 / (time / @_frameCount)
return results
_tick: =>
@_frameCount++
run = (options, callback) ->
Utils.interval .3, ->
layer = _.shuffle(LAYERS)[0];
layer.animate
properties:
context = new Framer.Context(name:"TestRun")
context.run -> _run options, (results) ->
context.reset()
callback(results)
_run = (options, callback) ->
startTime = getTime()
results = {}
LAYERS = for i in [1..options.n]
layerC = new Layer
x: Math.random() * window.innerWidth,
y: Math.random() * window.innerHeight
# rotationX: Math.random() * 180
# rotationY: Math.random() * 180
curve: "spring(5,1, 0)"
results.layers = Framer.CurrentContext._layerList.length
results.buildTotal = getTime() - startTime
results.buildLayer = results.buildTotal / results.layers
t1 = new FPSTimer
for layer in LAYERS
layer.animate
properties:
x: Math.random() * window.innerWidth,
y: Math.random() * window.innerHeight
curve: "spring(1000, 10, 0)"
layer.on Events.AnimationEnd, ->
results.fps = t1.stop()
callback(results)
Utils.domComplete ->
c = 0
callback = (results) ->
if results
print "#{c} - #{results.layers}
Build: #{Utils.round(results.buildTotal, 0)}ms/#{Utils.round(results.buildLayer, 2)}ms
FPS: #{Utils.round(results.fps.fps, 1)}"
if c < 100
c++
run {n: c * 20}, callback
callback()
@@ -0,0 +1,10 @@
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<script src="../build/framer.js"></script>
<script src="init.js"></script>
</body>
</html>
@@ -0,0 +1,109 @@
getTime = Date.now
if performance?.now
getTime = -> performance.now()
# class Timer
# constructor: -> @start()
# start: -> @_startTime = getTime()
# stop: -> getTime() - @_startTime
class FPSTimer
constructor: -> @start()
start: ->
@_frameCount = 0
@_startTime = getTime()
Framer.Loop.on("render", @_tick)
stop: ->
time = getTime() - @_startTime
Framer.Loop.off("render", @_tick)
results =
time: time
frames: @_frameCount
fps: 1000 / (time / @_frameCount)
return results
_tick: =>
@_frameCount++
_contextLayer = new Layer width:800, height:800, backgroundColor:"white"
_contextLayer.center()
_contextLayer.style.border = "1px solid grey"
run = (options, callback) ->
context = new Framer.Context(name:"TestRun", parentLayer:_contextLayer)
context.run -> _run options, (results) ->
context.reset()
callback(results)
_run = (options, callback) ->
startTime = getTime()
results = {}
LAYERS = for i in [1..options.n]
layerC = new Layer
x: Math.random() * 800,
y: Math.random() * 800
results.layers = Framer.CurrentContext._layerList.length
results.buildTotal = getTime() - startTime
results.buildLayer = results.buildTotal / results.layers
t1 = new FPSTimer
for layer in LAYERS
layer.animate
properties:
midX: Math.random() * window.innerWidth,
midY: Math.random() * window.innerHeight
curve: "linear"
time: 0.1
layer.on Events.AnimationEnd, ->
results.fps = t1.stop()
callback(results)
Utils.domComplete ->
c = 0
minFPS = 50
tooSlow = 0
tooSlowMax = 2
callback = (results) ->
if results
output = "#{c} - #{results.layers}"
output += "\tBuild: #{Utils.round(results.buildTotal, 0)}ms /#{Utils.round(results.buildLayer, 2)}ms"
output += "\tFPS: #{Utils.round(results.fps.fps, 1)}"
console.log output
if results.fps.fps < minFPS
tooSlow++
if c < 100 and tooSlow < tooSlowMax
c++
run {n: c * 20}, callback
else
window.phantomComplete = true
callback()
Oops, something went wrong.

0 comments on commit 40f024f

Please sign in to comment.