473,387 Members | 1,574 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,387 software developers and data experts.

Which is better, js arrays or hidden input tag fields?


Folks,

I have a large amount of values to store (we're talking tens, if not
hundreds of bytes). I need this for a client side application - ignore
the security consequences for the moment - however my question is, which
is more performance effective, or easier on a clients resources?

I mean - if I have several <input type=hidden> tags with my values that
I can reference, would this have a greater overhead then, for example,
having an ten arrays with a hundred elements with an average element
length of say, ten characters?

I don't know how to measure this hence why I'm throwing the question out
there to someone with a bit more javascript on their shoulders then my
six months plus...

all help - via the newsgroup - so all can learn, would be appreciated,
thanks,

randelld
Jul 23 '05 #1
9 4207
Lee
Randell D. said:


Folks,

I have a large amount of values to store (we're talking tens, if not
hundreds of bytes). I need this for a client side application - ignore
the security consequences for the moment - however my question is, which
is more performance effective, or easier on a clients resources?

I mean - if I have several <input type=hidden> tags with my values that
I can reference, would this have a greater overhead then, for example,
having an ten arrays with a hundred elements with an average element
length of say, ten characters?


Using Javascript arrays is much more efficient, both in run time and
in the amount of text to download. As far as I have been able to tell,
the only reason that some people use hidden form fields to pass data
to a page is because they don't know any better.

By the way "hundreds of bytes" is tiny.
The data that you describe is about 10k, which is still small.
That's about the size of the Google logo image.

If there are security consequences, you should not ignore them,
even for the moment. Don't expect to be able to prevent the
users from seeing anything that you send to their browser.

Jul 23 '05 #2
Lee <RE**************@cox.net> spoke thus:
Using Javascript arrays is much more efficient, both in run time and
in the amount of text to download. As far as I have been able to tell,
the only reason that some people use hidden form fields to pass data
to a page is because they don't know any better.


As someone who helps maintain pages that make extensive use of hidden
form fields that are populated with script before the form is
submitted, I'm interested in hearing about the alternative :)

--
Christopher Benson-Manica | I *should* know what I'm talking about - if I
ataru(at)cyberspace.org | don't, I need to know. Flames welcome.
Jul 23 '05 #3
Lee
Christopher Benson-Manica said:

Lee <RE**************@cox.net> spoke thus:
Using Javascript arrays is much more efficient, both in run time and
in the amount of text to download. As far as I have been able to tell,
the only reason that some people use hidden form fields to pass data
to a page is because they don't know any better.


As someone who helps maintain pages that make extensive use of hidden
form fields that are populated with script before the form is
submitted, I'm interested in hearing about the alternative :)


Hidden form fields are good for passing data to the server-side code
that is going to process the form, but if you're passing data to be
used by client-side code, it's simpler to just write Javascript into
the page. So instead of generating code like:

<input type="hidden" name="alpha" value="a1">
<input type="hidden" name="beta" value="23">

You would generate (in your <script> block):

var alpha="a1";
var beta="23";

or create an Object:

var formData = { alpha: "a1",
beta: "23"
};

Jul 23 '05 #4
"Christopher Benson-Manica" <at***@nospam.cyberspace.org> wrote in
message news:ct**********@chessie.cirr.com...
Lee <RE**************@cox.net> spoke thus:
Using Javascript arrays is much more efficient, both in run time and
in the amount of text to download. As far as I have been able to
tell,
the only reason that some people use hidden form fields to pass data
to a page is because they don't know any better.


As someone who helps maintain pages that make extensive use of hidden
form fields that are populated with script before the form is
submitted, I'm interested in hearing about the alternative :)


He is referring to passing data _to_ a page, not from one page to
another.

Basically, if you want dynamic server-side values to be manipulated from
client-side JavaScript you have two options:

<script type="text/javascript">
var myArray = [
<%= serverSideArray.join(',\n') %>
];
</script>

or

<!-- this could be made more efficient by putting
all array elements into a single hidden input with
a unique delimiter, then splitting the value on the
client -->
<% for (var ii = 0; ii < serverSideArray.length; ++ii) { %>
<input type="hidden"
name="element<%= ii %>"
value="<%= serverSideArray[ii] %>">
<% } %>

Both will make the -serverSideArray- values accessible from client-side
JavaScript. There are some very good reasons why you may wish to use the
second method however, one of them being that you need those values on
the _next_ page (after form submission).

Of course, if you need those values on the server on form's target, and
they originally came from the server, it might be more efficient to
simply retrieve them or calculate them again on the server when needed.

As for the original poster's question regarding efficiency. If you're
asking that question, you're using the wrong tool.

<url: http://blogs.msdn.com/ericlippert/ar.../18/53388.aspx />

"High performance is unimportant -- as long as the page doesn't appear
to hang, its fast enough."

"Do not rely on "tips and tricks" for performance. People will tell you
"declared variables are faster than undeclared variables" and "modulus
is slower than bit shift" and all kinds of nonsense. Ignore them.
That's like mowing your lawn by going after random blades of grass with
nail scissors. You need to find the WORST thing, and fix it first.
That means measuring."

<url: http://www.codinghorror.com/blog/archives/000185.html />

"Arguments about which method results in code that is easier to read and
easier to maintain will be gladly entertained. Arguments about speed
will not. Stop micro-optimizing and start macro-optimizing: per Lippert,
code that makes sense is code which can be analyzed and maintained, and
that makes it performant."
Please note I'm guilty of micro-optimizing myself. I often write loops
in which iteration order doesn't matter as:

var ii = length;
while (ii-- > 0) { ... }

instead of:

for (var ii = 0; ii < length; ++ii) { ... }

because the first one is "faster". Please understand, the time it takes
to _do something_ inside the loop is probably going to far outweigh any
speed gains achieved by reversing the direction of the loop. However,
I'm old and set in my ways, so I will continue to stick to this design
choice.

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #5
Grant Wagner wrote:
[snip]

Please note I'm guilty of micro-optimizing myself. I often write loops
in which iteration order doesn't matter as:

var ii = length;
while (ii-- > 0) { ... }
or:
while(ii--){...}

instead of:

for (var ii = 0; ii < length; ++ii) { ... }


[snip]

Mick
Jul 23 '05 #6
"Mick White" <mw***********@rochester.rr.com> wrote in message
news:U9*****************@twister.nyroc.rr.com...
Grant Wagner wrote:
[snip]

Please note I'm guilty of micro-optimizing myself. I often write
loops in which iteration order doesn't matter as:

var ii = length;
while (ii-- > 0) { ... }


or:
while(ii--){...}


Indeed. Although I've avoided that particular optimization because:

while (ii--) {
// ...
ii = -1;
}

would miss 0 and keep right on going until ii reached...
Number.NEGATIVE_INFINITY? No, I think Number.NaN? I'm not even sure, but
it would probably take a long time to get there, and would most likely
generate a number of syntax errors along the way.

It's probably an unrealistic concern in carefully authored code, but I
figure people reading my code will have enough trouble figuring out what
I'm doing, I don't need to be any more cryptic :).

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #7
Grant Wagner wrote:
"Mick White" <mw***********@rochester.rr.com> wrote in message
news:U9*****************@twister.nyroc.rr.com...
Grant Wagner wrote:
[snip]
Please note I'm guilty of micro-optimizing myself. I often write
loops in which iteration order doesn't matter as:

var ii = length;
while (ii-- > 0) { ... }


or:
while(ii--){...}

Indeed. Although I've avoided that particular optimization because:

while (ii--) {
// ...
ii = -1;
}

would miss 0 and keep right on going until ii reached...


-2 would be as negative as ii could get since you are resetting it each
iteration, unless the ii = -1 is in an if() branch (or while).
--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #8
Lee wrote:
Randell D. said:

Folks,

I have a large amount of values to store (we're talking tens, if not
hundreds of bytes). I need this for a client side application - ignore
the security consequences for the moment - however my question is, which
is more performance effective, or easier on a clients resources?

I mean - if I have several <input type=hidden> tags with my values that
I can reference, would this have a greater overhead then, for example,
having an ten arrays with a hundred elements with an average element
length of say, ten characters?

Using Javascript arrays is much more efficient, both in run time and
in the amount of text to download. As far as I have been able to tell,
the only reason that some people use hidden form fields to pass data
to a page is because they don't know any better.

By the way "hundreds of bytes" is tiny.
The data that you describe is about 10k, which is still small.
That's about the size of the Google logo image.

If there are security consequences, you should not ignore them,
even for the moment. Don't expect to be able to prevent the
users from seeing anything that you send to their browser.

Many thanks for that - I agree with your arguements - In addition, there
is one extra advantage of using a js array over hidden fields that I
just thought off... If my array is in an external javascript file, and
its downloaded to the client, then it will be in the users cache -
Future requests to download the same array file should in theory mean
that its read from the cache as opposed to over the wire.

I'll follow the route of arrays - I think it is better...

And the data will run on an intranet - I will have a sanity check server
side to check nobody has tampered with the data but because I know my
userbase I don't see it a problem in this case..

Cheers
Randell D.
Jul 23 '05 #9
"Randy Webb" <Hi************@aol.com> wrote in message
news:Sf********************@comcast.com...
Grant Wagner wrote:
"Mick White" <mw***********@rochester.rr.com> wrote in message
news:U9*****************@twister.nyroc.rr.com...
Grant Wagner wrote:
[snip]

Please note I'm guilty of micro-optimizing myself. I often write
loops in which iteration order doesn't matter as:

var ii = length;
while (ii-- > 0) { ... }

or:
while(ii--){...}

Indeed. Although I've avoided that particular optimization because:

while (ii--) {
// ...
ii = -1;
}

would miss 0 and keep right on going until ii reached...


-2 would be as negative as ii could get since you are resetting it
each iteration, unless the ii = -1 is in an if() branch (or while).


Fine, I didn't provide a complete, clear and consise example. So here:

var ii = 10;
while (ii--) {
document.write(ii + '<br>');
if (ii == 0) ii--;
}

As you can see, a negative value of -ii- is not interpreted as -false-,
so the loop continues to run until -ii- is... ?

The reasoning is the same as why you do not write:

for (var ii = 0; ii != 10; ++ii) { ... }

and instead write:

for (var ii = 0; ii < 10; ++ii) { ... }

This reduces the risk of the loop counter inadvertantly passing over 10
without ever being 10. while (ii--) exhibits this same risk (of passing
over 0 without ever being 0).

--
Grant Wagner <gw*****@agricoreunited.com>
comp.lang.javascript FAQ - http://jibbering.com/faq
Jul 23 '05 #10

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

11
by: Jason | last post by:
Let's say I have an html form with 20 or 30 fields in it. The form submits the fields via POST to a php page which updates a table in a database with the $_POST vars. Which makes more sense? ...
8
by: Oeln | last post by:
If I want to check for input of an integer I've got the following (I get the form input with $input = "$_POST"): if(!ereg("^+$",$_POST)) { echo "Input is incomplete or incorrect."; } If,...
1
by: mark.reichman | last post by:
First off.. Thanks to Grant Wagner for help in a previous thread related to this one. I am at a total loss... I have multiple fields in a form with the same name. Lets call the fields with the...
7
by: x muzuo | last post by:
Hi guys, I have got a prob of javascript form validation which just doesnt work with my ASP code. Can any one help me out please. Here is the code: {////<<head> <title>IIBO Submit Page</title>...
10
by: Mark McLellan | last post by:
Dear all Following the oft-repeated advice here and ciwas I have made my site nearly 4.01 strict (working on it). There are some items on which I would appreciate your advice: 1. Hidden...
5
by: Roshawn Dawson | last post by:
Hi, Are hidden fields passed in the querystring when a form is posted back? If they are, must the hidden fields be server controls in order to access them from .net code? Thanks, Roshawn
1
by: Bill_W_Stephens | last post by:
I need a form with two buttons and ability to detect which button was pressed. I got this code to work using a javascript global variable, but I know there must be a better way using DOM. Any...
0
by: BcNexus | last post by:
Hello all, The search function of this forum isn't working although I found a similar question on the forum using Google, but the replies don't help me. So, forgive me please if this has been...
1
by: mark | last post by:
Forgive me if this seems like a stupid question but I need help... I'm trying to do a simple online form that emails me the results from a few fields. Here is the code: <form...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
0
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.