Class in single tag optimization

JavaScript
1

I have a page (w/ multiple tags of course) and there’s a class that affect only 1 of those tags; is it more efficient (for the running system) to apply the instruction set (including S&R) to only the tag which may be affected or (faster) to all tags?

Thank you kindly

2

Making the CSS code easier for a person to understand the code is of a higher priority than pure efficiency.

3

For example:

<div id="tabs">
  <div class="tab1"></div>
  <div class="tab2"></div>
  <div class="tab3"></div>
</div>

el.classList.add("fancybutton");

.fancybutton {
  background: green;
}
.tab1 .fancybutton {
  background: green;
}

If you’re wondering which CSS declaration is more efficient, that’s of much less importance than communicating whether the fancy button style is intended for the general purpose or exclusively only to tab1.

4

The category is JavaScript, I’d like help w/ that.

This is my 1st Topic, should people look at category to figure out what’s the topic about, or should people repeat in the title the category?

5

Can you please clarify what you mean by tag, and provide further information about two different types of situations that you are wanting to compare the performance?

6

HTML

<p class="js_disabled"><a href="#">Toggle background color</a></p>
<p>Lorem ipsum <span class="classA">dolor</a> sit amet, consectetur adipiscing elit. Nam rutrum, lacus ut fringilla dapibus, velit ante <span class="classA">placerat</a> ipsum, ut convallis ligula lectus at dolor.</p>
<p>Nulla facilisis, ex eget eleifend sodales, ipsum <span class="classA">lectus</a> interdum augue, vel eleifend <span class="classA">nisl</a> dui vel felis. Pellentesque fringilla, dolor eu iaculis hendrerit, ipsum turpis eleifend nisi, sit amet porttitor sem nulla in nunc.</p>

CSS

span.classA {
  background-color: yellow;
}
span.classB {
  background-color: hotpink;
}
.js_disabled {
  display: none;
}
.js_enabled {
  display: inherit;
}

I’m quite the beginner in ECMAscript so I’ll do some pseudo-code of sort:

onload page
  snrClass(js_disabled, js_enabled) // snr for S&R
  // Uncomment only 1 of the following 2 blockquotes.
/*
  allTags = getAllTags()
  forEach tag in allTags
    snrClass(tag, classA, classB)
*/
/*
  tagsSpan = findTags(span)
  forEach tag in tagsSpan
    snrClass(tag, classA, classB)
*/

Which of the 2 blockquotes is more efficient (for the system) ?

Update 1: The 1st blockquote is essentially the same as the 1st instruction, with different classes to S&R.

7

The second one is more efficient as it allows opportunity for performance improvements in findTags().
It’s more efficient to work with a smaller set of results than a larger set.

8

Well I asked on irc://freenode/#JavaScript and a couple people agree w/ you. I asked there 1st before asking here, perhaps there was no1 active (actually looking at the chat) at the time. I was going to PM you the quote (which by default IRC content is private but every1 is welcomed) but I can’t seem to PM you at all.

9

[quote=“dynvec, post:8, topic:294578, full:true”]I was going to PM you the quote (which by default IRC content is private but every1 is welcomed) but I can’t seem to PM you at all.
[/quote]

New members have limited access to such features until sometime later.

1 Like
10

As Paul says, new members have some restrictions. These will be lifted when you reach Trust Level 1, which isn’t hard to do. An Explanation of Trust Levels

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.