CSS性能问题 [英] CSS Performance Question

问题描述

我想知道，当谈到编写CSS code是什么专家做的。它是不好用的tagname.className风格？是否继承导致明显的性能损失？是否仅载入页面或后也时影响浏览器？例如：用户滚动进一步下降的页面，将CSS差是罪魁祸首低迷滚动浏览页面有很多结果行

当？

CSS示例：

  div.result行{...}
div.result行div.photo列{...}
div.result行div.main列{...}
div.result行div.main列div.text行{}
div.result行div.main列div.date行{}
div.result行div.action列{...}
 

VS

  div.result行{...}
div.photo列{...}
div.main列{...}
div.action列{...}
div.text排{...}
div.date排{...}
 

我的页面输出了大量用户帖子的像这样...

 ＆LT; D​​IV CLASS =结果行clearfix＆GT;
    ＆LT; D​​IV CLASS =照片栏＆GT;
    ＆LT; IMG SRC =.../＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =主栏＆GT;
    ＆LT; D​​IV CLASS =TEXT-行＆GT;
    用户的文本
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =日行＆GT;
    今天
    ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =操作栏＆GT;
    ＆所述; A HREF =＃＆GT; ...＆下; / A＆GT;
    ＆所述; A HREF =＃＆GT; ...＆下; / A＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

有关谷歌的网页速度< /一>有一个关于使用部分<一个href=\"http://$c$c.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors\">efficient CSS选择器的。它提到如何选择后代，因为一旦最右边的选择已经匹配效率低下的浏览器必须（也）向上遍历DOM树，每一个评估的祖先元素，直到找到匹配或到达根元素。 Mozilla的，甚至说，<一个href=\"https://developer.mozilla.org/en/Writing%5FEfficient%5FCSS#Guidelines%5Ffor%5FEfficient%5FCSS\">\"the后代选择器是CSS最昂贵的选择。所以 div.photo列{...} 将是preferable到 div.result行div.photo列{...} 。

它也提到，你应该删除多余的修饰词，如按标签选择器（当一个类只能用于一个标签，这是一个很好的设计实践反正）合格类选择。这是有道理的，因为如果你有 div.photo列{...} 而不是 .photo列{...} 浏览器已进行两次检查，一次检查类=照片栏，如果这是真的，一来检查，如果该元素是一个div，而不是只检查类，如果这是所有您指定。

I was wondering what the experts do when it comes to writing CSS code. Is it bad to use the tagname.className style? Does inheritance cause a noticeable performance loss? Does it only affect the browser when loading a page or also after? eg: user scrolls down further the page, would poor CSS be a culprit to sluggish scrolling when viewing a page with a lot of rows of results?

CSS Examples:

div.result-row{...}
div.result-row div.photo-column{...}
div.result-row div.main-column{...}
div.result-row div.main-column div.text-row{}
div.result-row div.main-column div.date-row{}
div.result-row div.action-column{...}

vs

div.result-row{...}
div.photo-column{...}
div.main-column{...}
div.action-column{...}
div.text-row{...}
div.date-row{...}

My page is outputting a lot of user posts like this...

<div class="result-row clearfix">
    <div class="photo-column">
    	<img src="..." />
    </div>
    <div class="main-column">
    	<div class="text-row">
    		User's text
    	</div>
    	<div class="date-row">
    		Today
    	</div>
    </div>
    <div class="action-column">
    	<a href="#">...</a>
    	<a href="#">...</a>
    </div>
</div>

解决方案

The documentation for Google's Page Speed has a section about using efficient CSS selectors. It mentions how descendant selectors are inefficient because once the rightmost selector has been matched "the browser must [also] traverse up the DOM tree, evaluating every ancestor element until it finds a match or reaches the root element." Mozilla even says "the descendant selector is the most expensive selector in CSS." So div.photo-column{...} would be preferable to div.result-row div.photo-column{...}.

It also mentions that you should remove redundant qualifiers such as "class selectors qualified by tag selectors (when a class is only used for one tag, which is a good design practice anyway)." That makes sense because if you have div.photo-column{...} instead of .photo-column{...} the browser has to make two checks, one to check for class="photo-column" and, if that's true, one to check if the element is a div, rather than just checking for the class, if that's all you specify.

这篇关于CSS性能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！