Performance, Games, and Distributed Testing in JavaScript
-
Upload
jeresig -
Category
Technology
-
view
9.168 -
download
2
Transcript of Performance, Games, and Distributed Testing in JavaScript
![Page 1: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/1.jpg)
Measuring Performance,JavaScript Games,
and Distributed TestingJohn Resig
http://ejohn.org - http://twitter.com/jeresig
![Page 2: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/2.jpg)
Measuring Performance
![Page 3: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/3.jpg)
Analyzing Performance✦ Optimizing performance is a huge
concern: Faster code = happy users!✦ Measure execution time✦ Loop the code a few times✦ Measure the difference:
✦ (new Date).getTime();
![Page 4: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/4.jpg)
Stack Profiling✦ jQuery Stack Profiler✦ Look for problematic methods and plugins✦ http://ejohn.org/blog/deep-profiling-
jquery-apps/
![Page 5: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/5.jpg)
![Page 6: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/6.jpg)
Accuracy of JavaScript Time
http://ejohn.org/blog/accuracy-of-javascript-time/
We’re measuring the performance ofJavaScript from within JavaScript!
![Page 7: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/7.jpg)
![Page 8: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/8.jpg)
![Page 9: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/9.jpg)
![Page 10: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/10.jpg)
15ms intervals ONLY!
Error Rate of 50-750%!
![Page 11: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/11.jpg)
Performance Tools✦ How can we get good numbers?✦ We have to go straight to the source: Use
the tools the browsers provide.✦ Tools:
✦ Firebug Profiler✦ Safari Profiler
✦ (Part of Safari 4)✦ IE 8 Profiler
![Page 12: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/12.jpg)
Firebug Profiler
![Page 13: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/13.jpg)
Safari 4 Profiler
![Page 14: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/14.jpg)
IE 8 Profiler
![Page 15: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/15.jpg)
FireUnit✦ A simple JavaScript test suite embedded in
Firebug.✦ http://fireunit.org/
![Page 16: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/16.jpg)
FireUnit Profile Data
{ "time": 8.443, "calls": 611, "data":[ { "name":"makeArray()", "calls":1, "percent":23.58, "ownTime":1.991, "time":1.991, "avgTime":1.991, "minTime":1.991, "maxTime":1.991, "fileName":"jquery.js (line 2059)" }, // etc.]}
fireunit.getProfile();
http://ejohn.org/blog/function-call-profiling/
![Page 17: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/17.jpg)
Complexity Analysis✦ Analyze complexity rather than raw time✦ jQuery Call Count Profiler (uses FireUnit)
Method Calls Big-O
.addClass("test"); 542 6n
.addClass("test"); 592 6n
.removeClass("test"); 754 8n
.removeClass("test"); 610 6n
.css("color", "red"); 495 5n
.css({color: "red", border: "1px solid red"});
887 9n
.remove(); 23772 2n+n2
.append("<p>test</p>"); 307 3n
![Page 18: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/18.jpg)
Complexity Analysis✦ Reducing call count helps to reduce
complexity✦ Results for 1.3.3:
Method Calls Big-O
.remove(); 298 3n
.html("<p>test</p>"); 507 5n
.empty(); 200 2n
http://ejohn.org/blog/function-call-profiling/
![Page 19: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/19.jpg)
Why JavaScript Games Are HARD
to Build
![Page 20: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/20.jpg)
Browser-Based Games✦ No installation required✦ (Will be able to play at work!)
![Page 21: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/21.jpg)
Why not Flash?✦ JavaScript works everywhere
✦ Desktop✦ iPhone / Mobile Device✦ Wii✦ OLPC
✦ JavaScript is an open technology
![Page 22: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/22.jpg)
Goals of a game✦ Should be Multiplayer✦ Can’t be casually cheated✦ Work well everywhere✦ Addictive
![Page 23: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/23.jpg)
Why Multiplayer?✦ Incredibly addictive
✦ No longer “alone”✦ Enticed to continue playing
![Page 24: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/24.jpg)
3 Styles of Games✦ Strategy✦ Intelligence✦ Accuracy
![Page 25: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/25.jpg)
Strategy Games✦ Require a lot of time to think✦ Generally last over a couple hours or days✦ Replayability✦ Hard to cheat
![Page 27: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/27.jpg)
Nile Online
✦ http://www.playnileonline.com/
![Page 28: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/28.jpg)
Strategy Games✦ Very server-side heavy
✦ Most logic hidden from the user✦ Hard to cheat
✦ Casual cheaters can’t change values✦ Dedicated cheaters have to write full AI
![Page 29: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/29.jpg)
Intelligence Games✦ Player’s intelligence/knowledge challenged✦ Games could be quick or slow-paced✦ Easy to cheat
✦ Casual cheaters can open dictionary / encyclopedia for answers
![Page 33: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/33.jpg)
Speed/Accuracy Games✦ Require low latency✦ Fast-paced and addictive✦ JavaScript completely fails
✦ Garbage Collection cycles freeze the browser
✦ None, or few, Accuracy-centric JavaScript games
✦ Experienced coders can easily cheat✦ (A bot to hit the keys at the right time)
![Page 35: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/35.jpg)
Guitar Hero✦ Heavily dependent upon accuracy
✦ (Hit the right notes at the right time)✦ Garbage collection cycles absolutely kill
the game✦ Rendering the play area is also difficult
✦ And impossible in all browsers.✦ (Use HTML 5 Canvas Element)
![Page 36: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/36.jpg)
Failures on All Ends✦ Strategy: Slow, secret server-side code✦ Intelligence: Easily cheatable✦ Accuracy: Too hard to implement✦ Optimal solution would be a combination
of the above.✦ JavaScript games can’t be like other games,
have to be unique.
![Page 37: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/37.jpg)
What can make a fun game?✦ Quick play✦ Points✦ High Scores✦ Head-to-head competition
![Page 38: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/38.jpg)
Wordsplay
✦ Real-time Boggle✦ Head-to-head with other players
http://www.wordsplay.net/
![Page 39: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/39.jpg)
Tringo
✦ Tetris + Bingo (based on a Second Life game)
http://ejohn.org/tringo/
![Page 40: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/40.jpg)
DeepLeap
✦ Fast-paced Scrabble-like game✦ Speed + Intelligence + Strategy
http://deepleap.org/
![Page 41: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/41.jpg)
vs. Cheating✦ All words are recorded with exact time
information✦ Game is “played back” on the server to
verify score integrity using Server-Side JS
✦ This data can be used to simulate a multi-player experience!
![Page 42: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/42.jpg)
DeepLeap✦ Works in multiple languages
✦ Dictionaries pulled from OpenOffice, can build a Spanish version in < 5sec
✦ Players can challenge each other head-to-head
✦ Score multiplier (carry over from Guitar Hero)
![Page 43: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/43.jpg)
Distributed Testing
![Page 44: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/44.jpg)
Choose Your Browsers
![Page 45: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/45.jpg)
Cost / Benefit
IE 7 IE 6 FF 3 Safari 3 Opera 9.5
Cost Benefit
Draw a line in the sand.
![Page 46: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/46.jpg)
Graded Support
Yahoo Browser Compatibility
![Page 47: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/47.jpg)
Browser Support GridIE Firefox Safari Opera Chrome
Previous 6.0 2.0 3.0 9.5
Current 7.0 3.0 3.2 9.6 1.0
Next 8.0 3.1 4.0 10.0 2.0
jQuery Browser Support
![Page 48: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/48.jpg)
Browser Support GridIE Firefox Safari Opera Chrome
Previous 6.0 2.0 3.0 9.5
Current 7.0 3.0 3.2 9.6 1.0
Next 8.0 3.1 4.0 10.0 2.0
jQuery 1.3 Browser Support
![Page 49: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/49.jpg)
The Scaling Problem✦ The Problem:
✦ jQuery has 6 test suites✦ Run in 11 browsers✦ (Not even including multiple platforms!)
✦ All need to be run for every commit, patch, and plugin.
✦ JavaScript testing doesn’t scale well.
![Page 50: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/50.jpg)
Distributed Testing✦ Hub server✦ Clients connect and help run tests✦ A simple JavaScript client that can be run
in all browsers✦ Including mobile browsers!
✦TestSwarm
![Page 51: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/51.jpg)
TestSwarm
FF 3
FF 3
FF 3.5 FF 3.5 FF 3.5IE 6
IE 6
IE 6
IE 7
IE 7
Op 9
Test Suite Test Suite Test Suite
![Page 52: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/52.jpg)
Manual Testing✦ Push tests to users who follow pre-defined
steps✦ Answer ‘Yes’/’No’ questions which are
pushed back to the server.✦ An effective way to distribute manual test
load to dozens of clients.
![Page 53: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/53.jpg)
TestSwarm.com✦ Incentives for top testers (t-shirts, books)✦ Will be opening for alpha testing very soon✦ Help your favorite JavaScript library
become better tested!✦ http://testswarm.com
![Page 54: Performance, Games, and Distributed Testing in JavaScript](https://reader034.fdocuments.us/reader034/viewer/2022042702/55d4c20bbb61eb66338b4662/html5/thumbnails/54.jpg)
Questions✦ Contact:
✦ John Resig✦ http://ejohn.org/✦ http://twitter.com/jeresig