Perf

koenbok · Sep 25, 2014 · 40f024f4c70221691ff423e50f1c7574998ccbe3 · 40f024f
1 parent e5ce332
commit 40f024f4c70221691ff423e50f1c7574998ccbe3
Unified Split

Showing with 454 additions and 14 deletions.

+15 −1 Makefile

+3 −0 extras/CactusFramer/pages/perf.html

+82 −13 extras/CactusFramer/static/app.coffee

+10 −0 perf/index.html

+109 −0 perf/init.coffee

+137 −0 perf/init.js

+98 −0 perf/runner.js
diff --git a/Makefile b/Makefile
@@ -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
diff --git a/extras/CactusFramer/pages/perf.html b/extras/CactusFramer/pages/perf.html
@@ -0,0 +1,3 @@
+<!-- <script src="{% static 'react.min.js' %}"></script> -->
+<script src="{% static 'framer.js' %}"></script>
+<script src="{% static 'perf.js' %}"></script>
diff --git a/extras/CactusFramer/static/app.coffee b/extras/CactusFramer/static/app.coffee
@@ -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()
+
+


diff --git a/perf/index.html b/perf/index.html
@@ -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>
diff --git a/perf/init.coffee b/perf/init.coffee
@@ -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()
+
+
+
+