长的CSS类名会对性能产生影响吗?

时间:2022-06-12 04:09:27

I am building a JS script with a theme included, in order to run multiple themes each classname has a prefix - this however makes the classnames somewhat long.

我正在构建一个包含主题的JS脚本,为了运行多个主题,每个classname都有一个前缀 - 但这会使类名有点长。

I also have CSS rules depending on wether or not the element has more classnames in order to provide special effects.

我也有CSS规则取决于是否具有更多的类名以提供特殊效果。

My question is will longer CSS classnames have an effect on performance, or will only wrong/faulty/inefficient use of selectors slow down performance?

我的问题是,较长的CSS类名会对性能产生影响,还是只会选择错误/错误/低效的选择器会降低性能?

2 个解决方案

#1


18  

Long class names will definitely have an impact on performance. For one, there will be more stuff to be transferred and parsed. Will they have a measurable impact however? Probably not. The transfer only happens once, thanks to caching and the impact on parsing will likely be negligible compared to for instance rendering.

长类名称肯定会对性能产生影响。首先,将有更多的东西被转移和解析。它们会产生可衡量的影响吗?可能不会。由于缓存,传输只发生一次,与渲染相比,对解析的影响可能微不足道。

In general, you should only start thinking about such performance optimizations if you start running into performance problems. Its better to use expressive names to improve readability of your css (the same goes for any kind of code) before optimizing for possible performance issues.

通常,如果您开始遇到性能问题,您应该只考虑这样的性能优化。在优化可能的性能问题之前,最好使用富有表现力的名称来提高css的可读性(对于任何类型的代码都是如此)。

For selectors, they will likely have a higher impact on performance, as depending on the complexity of a selector and the size of your DOM, a considerable (considerable compared to long class names) amount of code might have to be executed. However, again try to make the most readable/understandable selector and only start optimizing it if there is a measurable performance impact (you can use firebug or chrome's developer tools for profiling).

对于选择器,它们可能会对性能产生更大的影响,因为根据选择器的复杂性和DOM的大小,可能必须执行相当大的代码量(相当于长类名称)。但是,再次尝试制作最易读/可理解的选择器,并且只有在可测量的性能影响时才开始优化它(您可以使用firebug或chrome的开发人员工具进行分析)。

#2


2  

will longer CSS classnames have an effect on performance, or will only wrong/faulty/inefficient use of selectors slow down performance?

更长的CSS类名会对性能产生影响,还是只会错误/错误/低效使用选择器会降低性能?

longer classnames? - I don't think it matters, I prefer shorter but with some applications or plugins it's not possible - PageSpeed and Y!Slow nor any other performance recommendation sites I've visited, mention the length of classname as being an issue - But definitely the more efficient the whole selector, the better the performance

更长的班级名字? - 我认为这不重要,我更喜欢更短,但有一些应用程序或插件,这是不可能的 - PageSpeed和Y!慢,也没有我访问过的任何其他性能推荐网站,提到类名的长度是一个问题 - 但绝对整个选择器越有效,性能越好

#1


18  

Long class names will definitely have an impact on performance. For one, there will be more stuff to be transferred and parsed. Will they have a measurable impact however? Probably not. The transfer only happens once, thanks to caching and the impact on parsing will likely be negligible compared to for instance rendering.

长类名称肯定会对性能产生影响。首先,将有更多的东西被转移和解析。它们会产生可衡量的影响吗?可能不会。由于缓存,传输只发生一次,与渲染相比,对解析的影响可能微不足道。

In general, you should only start thinking about such performance optimizations if you start running into performance problems. Its better to use expressive names to improve readability of your css (the same goes for any kind of code) before optimizing for possible performance issues.

通常,如果您开始遇到性能问题,您应该只考虑这样的性能优化。在优化可能的性能问题之前,最好使用富有表现力的名称来提高css的可读性(对于任何类型的代码都是如此)。

For selectors, they will likely have a higher impact on performance, as depending on the complexity of a selector and the size of your DOM, a considerable (considerable compared to long class names) amount of code might have to be executed. However, again try to make the most readable/understandable selector and only start optimizing it if there is a measurable performance impact (you can use firebug or chrome's developer tools for profiling).

对于选择器,它们可能会对性能产生更大的影响,因为根据选择器的复杂性和DOM的大小,可能必须执行相当大的代码量(相当于长类名称)。但是,再次尝试制作最易读/可理解的选择器,并且只有在可测量的性能影响时才开始优化它(您可以使用firebug或chrome的开发人员工具进行分析)。

#2


2  

will longer CSS classnames have an effect on performance, or will only wrong/faulty/inefficient use of selectors slow down performance?

更长的CSS类名会对性能产生影响,还是只会错误/错误/低效使用选择器会降低性能?

longer classnames? - I don't think it matters, I prefer shorter but with some applications or plugins it's not possible - PageSpeed and Y!Slow nor any other performance recommendation sites I've visited, mention the length of classname as being an issue - But definitely the more efficient the whole selector, the better the performance

更长的班级名字? - 我认为这不重要,我更喜欢更短,但有一些应用程序或插件,这是不可能的 - PageSpeed和Y!慢,也没有我访问过的任何其他性能推荐网站,提到类名的长度是一个问题 - 但绝对整个选择器越有效,性能越好