javascript performance: global variable vs jquery's $.data() - javascript

I need to store relatively larget bit of JSON for global access in my web app.
Should I use jquery's $.data(document.body, 'some-reference-here', MyJsonObj); or a global?
I know binding $.data() to document.body is faster than to a jquery object, but how does this compare to global variable?
I'm interested the most efficient memory usage.

Global variable in browser JS means window.variable, so I think it would be much faster then
$.data(document.body, 'some-reference-here', MyJsonObj); just because this is only one touch of the object's property instead of function call, getting property of document and much staff inside of the data call. But another problem is polluting global scope. Maybe it's better to store this data somewhere inside the local scope of your script.

Related

Which is the fastest way of accessing JavaScript object?

I want to know what is the best way of accessing a JavaScript object, dot operator or []:
data.property or data["property"]?
Both are more or less the same, except in Safari in which case dot notation is significantly faster.
You're much better off concentrating on DOM manipulation, DOM size, and CSS complexity as major sources of performance problems in Javascript applications.
That said, if you are doing a lot of property access in a loop, a local variable will be much faster than either property access or array lookup. Copy an object property into a variable if it is going to be accessed repeatedly. Do not use the "with" statement, incidentally. It can slow down local variable access by introducing another object into the scope chain.
Variables defined in local scope will be accessed far more quickly than those in global, as the Javascript engine first looks through all of the variables locally, then checks all of the variables in global scope. Scopes can nest as well, so the farther up the nesting chain the variable resides the longer it will take to find. That's why it's best to cache something like "document" in a local variable if it is going to be accessed more than once.
Both are the same speed. Also, if you are concerned with the level of speed in accessing a field attached to a reference, I think you might be going down the wrong path to tuning your code.
I would venture to guess that data.property is ever-so-slightly faster, but it may be difficult to measure. Indeed, JSPerf shows no distinction
The best way of accessing object properties has generally nothing to do with speed. Dot operator is used for syntactic sugar (I.E. this.hasElements() is easier to read, write and process in your brain than this["hasElements"]()) whenever possible and the brackets are used when the key name is a variable or has illegal characters.

Use Object.watch() on an "independent" variable?

Perhaps I'm missing something major, but is there a way to use Object.watch() on variables that exist independent of objects?
I'm a bit new to JS, and couldn't find any kind of global object that my variable was attached to.
(Also, just using this for debugging, so the fact that it's only supported in Mozilla browsers isn't a problem.)
The global scope in a browser is actually the window object, so if your variable is a global variable, it's actually attached to the window object. So you can access it as window.variableName just as well as simply variableName. And thus you should be able to say:
window.watch('variableName', callback);

Pass data to encapsulated javascript code

in my webapp I have a variable like this
var data = {
getItem: function(key){
...
}
}
In all of my scripts I can use
data.getItem("Test");
But how can I use it in jquery plugins? Plugins often have following structure
(function($, window, document) {
//....plugin-code
});
How do I call this kind of structure? Is it possible to use my global data variable in such plugins?
If your data variable is global, then yes you can use it anywhere, including inside jQuery plugins.
You'll need to make sure that data is defined before any self-executing functions that are going to use it.
Actually they tend to have structure
(function($) {
// plugin-code
})(jQuery);
the points being that
they can assume that $ in this scope will always be jQuery, regardless of anything else loaded that defines $ e.g. prototype
everything is defined inside this closure and so only what you choose to expose (by $.fn or $.extend) is leaked out to the outside world
Obviously if it's just your plugin in your environment where you can assume you're always running $ = jQuery then you don't need these. (Yours also has document and window: I've never seen these overridden and I'm not sure what you'd pass in as arguments here other than document and window themselves?)
Were you asking about defining data inside the plugin or pulling it in from outside the plugin scope? There's no restrictions of what you can write inside, so if you define and use it inside then your code will work exactly as befoer. If you need to access data defined inside from the outside then you'll need to leak it out somehow, e.g. adding an accessor method to one of $, document or window.
If you're pulling in data from outside the plugin scope then you can still access global variables from inside your closure, or you could pass it in as an extra argument - I don't think it'd make any difference.

JQuery - getting all JS functions

Do you know of a way to use JQuery for getting JavaScript elements of a web page?
For example, getting all JavaScript function names that are used in page and so on.
Thank you!
Getting all the function names is something that jquery should not be needed for--it is more of a language issue.
You can get all of the functions and variables in the global scope by looking at the window object, since everything in the global scope in the browser is really a property of this object. However, this will contain all of the variables in the global scope, including ones there by default and not added by another script.
You can loop through all of the properties of the window object with a for...in loop. Here is an example:
for (var obj in window) {
// obj is just the name of each property
// do stuff with window[obj]
}
However, if this is not strictly necessary, you should really avoid it. It's possible, but I would think twice before doing this and would be very careful.
not entirely sure if this works but...
$("script").remove();
doesnt remove only functions but should remove all script elements completely.
EDIT
nvm thought i read you wanted to remove the functions

Javascript optimization...global variables

I am making a webapp. I have a fairly basic question about javascript performance. Sometimes I need a global variable to store information that is used the entire time the website is open.
An example is a variable called needs_saved. It is true or false to say whether the page needs saved. I might have another variable called is_ie, ie_version, or space_remaining.
These are all variable that I need in various functions throughout the app.
Now, I know global variables are bad because they require the browser to search each level of function scope. But, I don't know if there is any better way to store values that are needed throughout the program.
I know I could create a global object called 'program_status' and give it the properties is_ie, ie_version, etc... But is this any better since it would first have to find my program_status object (stored as a global variable), and then the internal property?
Maybe I'm overthinking this.
Thanks
You have nothing to worry about.
The performance impact of a global variable is minute.
Global variables are discouraged because they can make code harder to maintain.
In your case, they won't.
The reason global variable use should be kept to a minimum is because the global namespace gets polluted when there's a lot of them, and there's a good chance of a clash if your program needs to use some 3rd party libraries which also create their own globals.
Creating a single object to hold all of your global state is a good idea since it limits the number of identifiers you need to reserve at the global level.
To solve performance problems, you can then create a local reference to that object in any scope where you need to access it multiple times:
So instead of
if (globalState.isIe) { alert(globalState.ieMessage); }
you can do
var state = globalState;
if (state.isIe) { alert(state.ieMessage); }
You don't need to do this if you only access the state object once. In any case, even if you never do this, the performance penalties will be negligible.
If you're worried about performance, code something clean then run a profiler on it to optimize. I know both Safari and Google Chrome have one, and it's pretty sure Firebugs includes one for Firefox too. Heck, even Internet Explorer 8 has one.

Categories

Resources