JavaScript Profiler
- July 20, 2012 · 7:00 PM
-
This location is shown only to members
If you are serious about programming in core JavaScript there are a few tools you will need to incorporate into your workflow, and next to the JavaScript debugger the JavaScript profiler is the next most important tool.
In tonight's event we will explore how to effectively use a profiler to identify bottlenecks, ineffective code, performance, along with quickly touching upon how to work with memory leaks - which is not tightly coupled with a profiler per se, but usually is of interest while dabbling in it.
Networking Hour
* 6:15pm - 7:00pm
* Food
* Beverages
Sponsor Announcement
* 7:00pm - 7:15pm
Timeframe
* 7:15pm - 9:00pm
Agenda
* Introduction to a profiler
* Anatomy of a profiler
* FireBug vs. Web Developer Toolbar
* Performance enhancements
* How to interpret the information
* Q&A session
Skill Level
* Intermediate
* Advanced
Cost
* Free
-
Bruce Ingalls
Angel- Intermediate
Jeanine- Profiling is not benchmarking. You should run your code from Selenium or PhantomJS or similar, and, ideally, on various hardware.July 24
-
Angel
Quick question... do the things discussed at this meetup and these comments fall under Beginner, Intermediate or Advanced JS? Only asking cause I signed up for JS 201 meetup... Thanks.
July 24
-
Jeanine Meyer
I wanted to avoid using the slider since my (human) behavior would make a difference, but I did it. I now get more functions each way, though not the init function (called by onload) for the SVG. I'm not sure how to interpret the results, but I think the SVG is quicker.
Comments? I have many examples, from/for my books and jsmag articles: http://faculty.purchase.edu/jea...
I need a rest: time for a walk.July 24
-
Jeanine Meyer
I think I'm missing something pretty basic. In Safari I just see two lines: (program) and (idle). In Chrome, just (program).
Thanks to all who are trying to help. Did you find an answer to the question of SVG versus canvas?July 24
-
Bruce Ingalls
Jeanine- I tried http://faculty.purchase.edu/jea...
on 64bit Ubuntu 12.04, Chrome 18, FireFox 14, Opera Next (beta) 12.50 (all work well, no slider in FF). For Firebug, I recommend disabling Net, as it sucks cpu. I now recommend adding Opera Dragonfly, for its alternate view. In particular, I noticed duplicate repaints paired together, suggesting a possible status check before each paint.July 24
-
Alice
@Jeanine - I just tried your SVG and Canvas test pages in Safari and was able to see the functions. I'm not sure why Chrome isn't working since I thought it was also a Webkit-based browser and its developer tools look just like Safari's. Test with the latest version of Safari to profile your two test pages. It worked for me in the latest version of the Windows version of Safari (5.1.7).
July 24
-
Will Farrell
I just made one:
http://jsperf.com/number-paddin...
Hope I didn't break anything.July 23
-
-
Milan Adamovsky
I noticed that during some of the user contributed revisions , some of the test cases were dropped... as such, I have updated the page:
http://jsperf.com/number-paddin...
Notice that the user contributed test cases are not included due to the aforementioned limitations.
July 22
-
Vigan Avxhi
Was my first time in such meeting and i liked it. I learned a lot from the presentation and the people i met. I want to Thank you Milan for the presentation and the information he presented. I look forward to the next meeting
July 22
-
Milan Adamovsky
@all if you want to give yourselves a brain teaser and work on possible solution for the number padding make sure to simply run your test in a console with different parameters to see if the output yield expected results (e.g. (function(){ [your code] })(50000, 2222))
July 22
-
Milan Adamovsky
@Jeanine.. I think you were thinking along the same lines as I was as I was writing my code - however I didn't use slice() - which I think you meant rather than slide. We woudn't want to use slice() here since our cache map can only hold a finite number of entries in order for this type of solution to become arbitrary :)
July 22
-
Milan Adamovsky
@all I build on the caching concept to make it accept an arbitrary length. I threw in some logarithms and moduli and voila!
http://jsperf.com/number-paddin...
I removed test 7 and 8 (from revision 11) since they did not meet the need of an arbitrary padding length.
July 22
-
Anthony Turrigiano
I couldn't make it to the meetup can some post what you went over at the meeting. Thanks
July 22
-
Jeanine Meyer
Re: padding. If the padding length was variable, but constrained to some small number of choices, say 1 to 20, then how about constructing an array with the strings "", "0", "00", "000", etc. as a global variable. Then the function, with the same parameters, could index this array and then use slide.
July 22
-
Milan Adamovsky
@all thanks very much for all your feedback and kudos! Greatly appreciated... I will send out a recap e-mail to everyone where I will address some of the feedback :)
July 22
-
Milan Adamovsky
@JP thanks for the contribution as well. Your solution is interesting and likewise doesn't permit an arbitrary padding length - but it gave me an idea to combine this into another test case that I will add.
July 22
-
Milan Adamovsky
@Larry thanks for the contribution to the number padding test case. I have edited it to normalize it against the other test cases (to test apples to apples) and we will notice that the surrounding function definition contributes to performance.
You can see the updated test at http://jsperf.com/number-paddin...
but notice that as-is it would not meet the requirements as it does not take an arbitrary padding length - but it would be a good candidate for the zero padding test case.July 22
-
Shannon Dillman
Only thing that keeps it from being a 5-star is that nearly all the time was spent on the IE profiler - I live mostly in Linux. On the other hand, I learned a few things and will look at it!
July 21
-
Bruce Ingalls
Someone asked about viewing the order of JS events. Take a look at Opera Dragonfly. It is easy, and has clean time diagrams that show when each resource was active. Frankly, once you see all this run in parallel, it does not seem helpful.
July 21
-
Larry LeFever
oops, had a typo in that version-8; here's my version-9, which is still apparently better than the rest (again assuming it satisfies the requirements): http://jsperf.com/number-paddin...
July 21
-
Larry LeFever
here's my contrib to the padding task: http://jsperf.com/number-paddin...
It's now called "(NO LONGER) bitwise", because, after I complicated it a little bit to better match the "requirements", it proved to have worse performance than others; however, this new non-bitwise version appears to be better than the rest, assuming it does satisfy the "requirements".July 21
-
Jeanine Meyer
Thanks for the help on % versus time. My profiles still have just one line: (program) as opposed to breaking out times for functions. Any [more] suggestions?
July 21
-
JP Grace
Jeanine, in Chrome there's a button with a % on it that when clicked will switch the time to ms from %.
Milan, I Added a new test to your number padding that beats yours. Don't know if the solution really works for your actual usage, but I thought you'd get a kick out of it (http://jsperf.com/number-paddin...
).July 21
-
Luis F
Milan, Thank you. Excellent learning experience. Great venue and food. Using the info to tweek a page!
July 21
-
Jon
Good topic for a meetup. Presenter should not take so many/such lengthy questions though. Would have been good to see more memory profiling.
July 21
-
A former member
Great event. Learned a lot, especially at Dewey's Flatiron afterwards. Thanks!
July 21
-
Jeanine Meyer
Help! I'd like to compare SVG and canvas programs:
http://faculty.purchase.edu/jea... (which is a teaching example for me in my book HTML5 and JavaScript Projects)
and
http://faculty.purchase.edu/jea...
My IE doesn't support canvas; Firebug crashes; and Chrome profiling just produces percentages.July 21
-
Jeanine Meyer
Thanks for the event. I'm sorry I had to leave early (early-ish). Milan: Re: padding. My first thought was the slice approach and I admit to being disappointed that it was there! In a "real" application, I suspect the padding length would be fixed, reducing need for the loop.
July 21
-
-
-
Luis F
Learned a lot of material in short time. Well presented. thank You. Milan & Co. The food was an excellent touch. The venue was excellent.
July 20
-
Sandeep Arneja
nice to find out about http://jsperf.com
. wrote my first test case http://jsperf.com/left-paddingJuly 20
-
Theresa
Another thing - the caliber of questions and discussion is great! The higher expertise of the crowd shows.
July 20
-
John K. Paul
Here's a really good resource for deeply understanding how to deal with named function expressions for debugging purposes. Sadly there are some pitfalls with IE8- http://kangax.github.com/nfe/#n...
July 20
-
-
Theresa
Milan is a great speaker! He breaks things down well and is very clear and concise. Hoping that I can give him a break, though, and submit a talk soon.
July 20
-
Anthony Turrigiano
wanted to make it tonight, is this being taped if it is please post link thanks
July 20
-
-
Milan Adamovsky
If we have any other advanced rockstars on here feel free to contribute. I will set aside maybe 10 minutes at the end for anyone who wants to show anything.
July 17
-
A former member
I know you're never going to pick a time that works for everyone but Friday night's are pretty much the worst. Hoping that future ones can move to a different day.
3 · June 1
-
Nathaniel Lee
This sounds like it can be a great meetup group. Thanks for organizing this, Milan!
May 29
People in thisMeetup are also in:
-
Twitter NYC Engineering
645 members
-
-
NY HTML5 User Group
1,039 Members
-
-
-
Join or login to comment.