Do many class names of an HTML impact performance? [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I'm adding many class names (6 or 7) to the HTML elements for the requirement of my client javascripts. Some of them are real class names, but some of them are just indicators. Does this impact my page performance?

Well, technically more html means slower. But not that much, not noticable. Each character you write is a byte more to download, so it takes a while before you notice some differences.
The main problem that could occur is your css growing because you denormalize, that will have a much bigger impact.
If you need better performance, optimise images, or stylesheets, or some javascript codes
Short answer: No, this is does not change anything significant.

This is a legitimate question because there can be very valid CSS and HTML that have best nesting and separation in the CSS that result in multiple CSS classes per element, and as you say, if you have marker classes for JavaScript lookups that adds to the volume. I cannot find any good performance analysis, but it shouldn't be hard to test.
This Multiple classes in markup - will it slow down performance? basically says more classes = slower, but I don't know if that's true if each class has smaller content due to neater nesting in the hierarchy and better separation.
This http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/ is somewhat related and shows that complex CSS of well known sites is rendered efficiently.
My answer is that from personal experience I have not noticed performance issues with this design pattern so if your structure is best served by multiple CSS classes and marker classes then that is the most important aspect and performance should not suffer.

Related

JavaScript - Is node.parentElement considered DOM access? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
I am trying to understand best practices around accessing and working with DOM objects. I have a script where I get the sibling cells of a table td by calling td.parentElement.cells each time the cell is clicked. Is this considered best practice or do I need to create and initialize an array of the cells of each table row, and search for the corresponding cells of a td that way?
Thanks.
Generally traversing a DOM is an old-fashioned and painful way to program. It works for doing a single modification, but the more your program modifies the DOM, the harder it is for you to mentally model what is, or could be, going on.
It is for that reason that front-end frameworks exist.
You can jump a few tens of centimetres into the air. If you practice very hard, even metres.
But that is not really making a contribution to building an aeroplane to fly long distances: the appearance of progress is illusory.
Have a look here to see how easy it can be when you don't have to traverse a DOM. https://v2.vuejs.org/v2/guide/#Declarative-Rendering
Trade-off
In answer to your question, yes they do add overhead. If minimising to the kilobyte level is crucial for you, then yes you should access the DOM directly, as this will take the smallest amount of code, so it is good practice when working under that constraint.
However, there are few circumstances when reducing code by 20-50k is crucial. Ask yourself, given how your web page will possibly develop over the years, how much time you are willing to spend updating code that traverses the DOM to make edits. Is that extra programmer time (which will not be noticed or appreciated by the end-user) worth it, given the alternative to learn something that extends your capabilities and do more?

When something can be done via JS or CSS, which way should I choose? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
For example, I can use CSS to implement a navigation. And I can do that via JS too. And in many situations CSS and JS both perform well.
Which one is the good choice for web design?
A good rule of thumb is: If you can do it with CSS, go for it.
Philosophically, CSS should be focused on presentation and JavaScript should be geared more towards function.
Of course, It depends. While CSS is much easier to implement than javaScript in most cases, easier doesn't always translate to better. One good example are CSS animations vs a javaScript library like velocity.js. You have far greater control over your animations and generally better performance across all devices with frameworks like velocity or GSAP, but often it comes down to each individual project and which technology would make sense for your particular needs. Realistically, however, most projects will implement both technologies in the best cases where they fit. I hope this helps. For more info on this here's a link that does a great job explaining some of the differences when animating: https://css-tricks.com/myth-busting-css-animations-vs-javascript/ .
And here is a similar question with very good answers: Better or Worse: Styling with JavaScript vs CSS

Is it always better to use CSS when possible instead of JS? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm wondering in what cases is this better to use JS when a pure css solution is possible. I've been browsing other questions but couldnt find the answer I was looking for.
Suppose we have images and want to display some stuff on hover. Should one use :
Example :
$('div.some-class').mouseover(function(){
$(this).children('.some-class').removeClass('hidden');
});
or is this CSS solution better:
div:hover > .my-elem{
opacity:1;
});
imho, the second solution is way better but i've been using the first one for couple of months and I just found out about the second one a week ago, so i'm not totally sure if it's a valid practice.
The CSS solution is better for 2 reasons:
CSS is loaded alongside the HTML, whereas JavaScript is loaded after the page itself has loaded. For things like a hover this isn't a huge issue, but if you're directly setting static styles you'll notice a delay between the content loading and the JavaScript running.
It's common for users to disable JavaScript. With JavaScript disabled, your mouseover function would never fire, whereas the CSS would work regardless.
However that said, img elements cannot contain children, so both your CSS and JavaScript is invalid.
Case 1: Prefer CSS to JS
1. CSS 3 is a mixture of CSS+JS and this enables you to develop your code faster rather than writing your own custom JS.
2. Prevents you from querying the DOM.
3. Loads alongside with your HTML (faster than JS)
Case 2: Prefer JS to CSS
1. This will help you when working with old browsers which don't have CSS3 support.
2. Helps you to handle other DOM functionality which CSS still doesn't have support. (for eg: you can change the color of some other element on hover of your element in CSS, but can't make any changes to JS variables or logic)

Is it beneficial to hide elements not in use? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I come from a computer science background and the languages I'm most familiar with are Java, C# and C++. In these languages your memory footprint is always in the back of your mind and I've been taught to destroy objects that are not in use.
I've recently got an internship as a web dev. I'm getting up to speed with various practices and doing a bit of web design which I haven't done in a while, at least not properly. In one of my sites I have a few images that appear on the screen, then move out of the viewport never to be seen again.
Would it be beneficial to .hide() the elements in question? Would it reduce the memory footprint enough to make it worth it? Would it reduce the footprint at all? A co-worker said it wouldn't be worth it as the hit is taken on page load but he wasn't totally sure.
As mentioned in the comments, hiding the element still leaves it in the DOM (Document Object Model). Personally, If I had something moving off screen and then not needed I would use the jQuery .remove() method to physically remove it from the DOM. It may make a difference to performance depending on the size of the image and the amount of images that this is happening to.
Like I've said, I like my DOM to be clean and tidy without any unnecessary clutter, so I would remove them, but that's just me.
EDIT: Looking into it a bit more, it appears that removing the element from the DOM does not free the memory associated with it (source). It seems that it is dependant on the DOM implementation when the memory is freed (source). Physically reusing the nodes looks like the most efficient way to go.
#Pointy gave the correct answer (as a comment). No - it does very little to hide it because it's still in memory because the element (and all of it's children) are still in the DOM. It MAY make painting a little faster in scrollable/transformable areas (but it may not) but it certainly doesn't decrease the memory consumption of your app simply by hiding it.

Should I load responsive design via JS or CSS [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I am looking to make a slightly responsive design. I was curious to know how people feel on loading a responsive design, should I load in a new css file and use JS to define the screen size. Or should I create media queries inside the current css file and just go from there. Looking for opinion on speed and what people feel is the more optimal approach.
Putting everything regarding styles in the CSS files is the best practice.
HTML => Structure
CSS => Styles
JS => Logic
The more you separate concerns, the easier your code will be to mantain.
As javascript might be disabled you should use CSS-only for the responsive purposes.
If you really can't do without javascript (for moving an element in the dom for example) make sure that you've got some fallback css for non-js-enabled users.
In fact very very few users will disable javascript, unless they are in emergency(say, if they only have outdated mobile phone because their new ones have run out of batteries). If your site is not toward these situations, use javascript without concerning that users will disable.
Generally, putting media queries in one css file will be a good choice if the file size is reasonalbe, since one file makes fewer request than seperated files.
Javascript, on the other hand, is the very fallback because old IEs do not support media queries.
You can refer to some frameworks such as bootstrap. An implementation outdoes all answers.

Categories