I'm in the process of writing a jQuery plugin, and am getting into some fairly heavy operations, which is making my plugin slower and less responsive. I was wondering if there was any tools out there that would help me optimize my JavaScript?
I recommend using Firebug's "profile" tab as a start.
Just click the profile tab, then use your plugin for a while and then click the profile tab again. You'll then see a report of what functions were called and how much time each one took.
Then, I recommend the article Speed up your JavaScript
As outlined in the article, why a script can take too long to execute
Too much happening in a loop.
Too much happening in a function.
Too much recursion.
Too much DOM interaction.
I have not yet found a tool that automatically optimizes or refactors JavaScript for speed. It's always been a manual process for me.
This Google Talk video goes into a lot of useful detail...
http://www.youtube.com/watch?v=mHtdZgou0qU
Its difficult to say without looking at at any code, ie how efficiently things have been written eg: how you're using selectors to find elements etc.
Have a look at some jQuery tips and tricks blogs.
eg:
http://viralpatel.net/blogs/2009/08/20-top-jquery-tips-tricks-for-jquery-programmers.html
http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx
Related
I'm learning web design, and there is no better method than redoing others work. So I'm reading other pages code, but it's so hard to find the jQuery, Javascript or modernizer or ... code responsible for the effect.
I'm using firebug, also used firequery, but the problem is they give me the event but not the code and a big tree of DOM, I don't know where even I look into it.
I really don't care which event is triggered, but I do care how the code is written. If I find the code so I can understand the event is on click or on focus...
Or let's say a website has a some javascript file, linked to a website. when I load the webpage i get a webpage consist of DOM and external/internal script. When I see a cool effect and want to read the code, I run firebug, inspect element to find the element. After that I don't know what to do? I can't search for selector or event in the script because maybe the developer of the site used different selector that I'm searching. Sometimes I find the code, but it's so jammed, not in human readable form, I don't know how to change the code to something indent and neat
The problem becomes more dramatic when the website using other java framework than jQuery.
I've searched a lot, used many tools, but couldn't find anything useful, please with your advice light my way to learn web developing
edit:--
I found a way but I'm sure there should be a better way outside
first in chrome I inspect the element to find the corresponding element, then i right click and check all the break point on it(if it doesn't work i do the same for parent element)
after that i play with that element to trigger the function and it break
usually the function that called the method is down in the callstack
also for reading
also for reading the script i use pretty print of chrome, i used some online prettyfier but most of them has limitation in number of character, for a long script none of the google first page resault is good enough. so the only good option here is for now is chrome, anyone have any other method?
It is difficult to learn how to do things just from inspecting it, as many effects may be implemented entirely in JavaScript, which may be deep, hidden away in a source file.
You mention that the code is not in human readable form, beautifying it may help:
https://stackoverflow.com/a/6318092/1061602
Most 'visual' effects should be able to be viewable from the CSS, e.g. JQuery Mobile's buttons, it is possible to see how the different classes are combined, ui-shadow, ui-btn, ui-disabled etc
Otherwise, searching for selectors is pretty much all you can do. Personally, if I am learning, looking at too much code at one time can be overwhelming. Also a lot of the UI effects may be difficult to trace.
My advice is, perhaps a better way around it would be to try and describe one single effect that you require, and then search on Google or Stack Overflow for guidance on how to create that effect.
The usual documentation sources will be useful:
http://www.w3schools.com/css3/default.asp
http://api.jquery.com/
Happy learning!
Can someone please identify how this site has the effect of sliding through pages? Mainly how it pulls down one page up and onto another. Is it Javascript? I think it is very well done.
http://hire.visualidiot.com/typestacks
Thanks!
Joe
helixed's answer explains how they did it. However if you want to recreate the effect yourself have a look at using Parallaxjs rather than taking potentially copy-written code.
See the demo site: http://stolksdorf.github.com/Parallaxjs/
And source: https://github.com/stolksdorf/parallaxjs/
Edit: There is a bug with that website, try holding down the arrow key for a few seconds before letting go.
I opened it in Safari and disabled JavaScript. The sliding effect went away (although it degrades nicely). Clearly JavaScript must be involved somehow. Okay, so I popped open Chrome Developer Tools and looked at the resources. There's a script called handler.js. I opened it up and sure enough there's some nicely documented code. It looks like it's using jQuery animations. Take a look at the script. You should be able to figure it out from there.
I'm going through a pretty amazing ruby on rails course. Just a second ago I learned about flash hashes that show a message after some action has been performed.
Obviously, you can apply styling to it and what have you, but I wonder if there are ready-to-go javascript snippets out there that, in the case of flash hashes, would slide in for a second, and then disappear? (much like the stackoverflow message bar that appears up top)
I don't know if learning rudimentary javascript is something I'd want to do right now (maybe later, I need to stick with one thing) so I was wondering if there was some resource that is known for ready to go scripts like that?
Merci :)
This is not exactly what you asked for but the jQuery and jQuery UI libraries provide a fair number of animation effects that you might find useful.
jQuery UI effect() demos - you can also view the source to see how it's being done.
jQuery effects - in particular, you might be interested in fadeIn() and fadeOut(). Again, you can also view the source to see how to use these functions.
I wrote a hefty script in JS and I want to optimize it to run faster, but going through function by function and performing a "speed test" is taking too long. Anyone know of a better way? I've heard you can use firebug, but I haven't found any helpful links of how to go about that..
The page I'm optimizing is here:
http://flanvas.com/development/flanvas/examples/custom-class.html
I'm specifically trying to optimize the flanvas.js which is here:
http://flanvas.com/development/flanvas/flanvas.js
Any direction of where to go from is very helpful. Thanks!
Use FireBug, or the Developer Tools in Safari or Chrome. In Safari/Chrome, go to the "Profiles" tab, click the "Enable Profiling" button, and hit the 'record' button. After you've done enough testing, hit it again to capture the profile.
You'll get a wonderful list breaking down your functions by the time they took, the time other functions that they called took, and multiple ways to sort it.
Rather than walk you through this, I'll give you some of the Google searches you should have done before asking this question:
http://www.google.com/search?q=profiling+javascript+firebug
http://www.google.com/search?q=profiling+javascript+chrome
You want to do profiling first for your javascript code to find which part of the code is the slowest. Of course, the main tool for that is firebug. Firebug is a very great tool for profiling.
You may also want to see this question for some more help:
What is the best way to profile javascript execution?
If you are using Firefox, firebug is a good tool, it can also give you some basic ideas on how to speed up javascript.
More at http://getfirebug.com/whatisfirebug
You can download it as JS code, and add it to your file if you are using other browser.
Still, there are other tools around, if that doesn't help... but it is a good start
I am intrigued by IxEdit and its full-javascript approach that should allow to build nice web pages powered by JQuery effects.
I like also the opportunity to use it on many platforms.
But, is it worth a try ?
Is it complete ? Has it compatibility issues ? Are there better alternative tools ?
Don't rely on WYSIWYG editors--My guess is that this editor screws up performance like Frontpage, Dreamweaver -and the likes screws up HTML.
jQuery is pretty simple to understand, once you get hold of the concept of anonymous functions.. And with Stack Overflow at hand, you should be able to get where you want to go in no time.
Also: jQuery is the framework with the largest community and the framework with the largest plugin repository--need a gallery-thingie? No biggie, just browse the tons of plugins and find one that fits your needs.
Well, as JQuery isn't THAT complicated, I wouldn't pay for tools like that.
They also don't support any plugins I guess.
But it's free, so just try it...
I've just d/l IxEdit and am actually kind of excited about it.
It seems you do have to be careful about starting with a blank slate: I tried applying it to an existing page with a few jQ plugins and and it broke.
As for the WYSIWYG aspect of it, I think it would be great for beginners, as it generates the code on the fly, and you have to copy and paste the code into the page. This can give a noob the opportunity to see the code that's made and make sense of how it works.
My two cents.