Class in single tag optimization


#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

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


#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. https://www.sitepoint.com/community/t/an-explanation-of-trust-levels/724


#11

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