Which is better: <noscript> alternative, or hide using JS

[csdude55]

Both of these should do the same thing, but which do you think is better for performance, reliability, and cross-browser compatability? If it matters, I'm building in HTML5 and already load jQuery.

Option A:

<a class="nextClassified" href="$next_link" style="display: none">next</a>
<noscript>
 <div class="foo">
  <a href="$prev_link" class="left">&#9668; Previous</a>
  <a href="$next_link" class="rt">Next &#9658;</a>
 </div>
</noscript>

Option B:

<div class="foo">
 <a href="$prev_link" class="left">&#9668; Previous</a>
 <a href="$next_link" class="rt nextClassified">Next &#9658;</a>
</div>

<script>$('.foo').hide();</script>

[keyplyr]

If the browser isn't supporting JS then the <noscript> is the only choice

[tangor]

Most folks playing with browser side JS leave it on for first party sites, but it's always to belt and suspenders. <noscript> is the way to go.

As to which is better, the smaller code, of course. :)

Trim the fat whenever you can.

[csdude55]

That was my initial thought, too, Tangor. And Option B would be about 25% smaller in filesize.

There's also the theory that non-JS browsers would read the entire text of Option A, where they would automatically skip the <script> in Option B. But then, if that's the case, by that same logic, would JS browsers skip the <noscript> section? Which would mean that, even though the total downloadable text is larger, the JS browser would read less, which would take up less of the user's CPU (and thereby improve the load time)?

Of course, in this example the size difference is pretty tiny, but I'm using this as a learning point for other code so it becomes a little more relevant over time. And every fraction of a second of load time that I can save turns in to more pageviews, which turns in to more money.

[Peter_S]

If the browser isn't supporting JS then the <noscript> is the only choice

Obvious :)