有极速快乐十分吗|极速快乐十分走势图|

一些比较高效的CSS写法建议

避免一些低效的key selectors去匹配大量的元素
服务器君一共花费了170.956 ms进行了6次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

当浏览器解析html的时候,它构造了一个文档树来展现所有被显示的元素。 它在特定的样式表中去匹配元素,根据标准的css的层叠,继承和?#25215;?#35268;则, 在mozilla的实现中(可能其他的也是这样),对于每一个元素,css引擎通过规则去寻找匹配,css引擎评估每一个规则是从右到左的,从最右的selector开始, 也称之为key selector,直到找到匹配为止。

根据这个规则,越少的规则使用,css引擎将评估的越好。因此,移除没有用的css是改善页面性能的重要一步。之后,对于页面包含很多的元素的css规则, 优化这些规则也有利于提高页面的性能。优化页面性能最重要的一点在于使用明确的,避免不需要冗余的,使引擎?#20302;?#24555;速的匹配到元素而不需要花费太多的时间。

下面的这些规则被认为是低效的

  1. 使用了后代选择器
  2. 使用全局选择器作为key

    body * {...}
    .hide-scrollbars * {...} 
    

    使用了标签选择器作为key

    ul li a {...}
    #footer h3 {...} 
    
  3. 使用?#21451;?#25321;器和相邻选择器
  4. 使用全局选择器作为key

    body > * {...}
    .hide-scrollbars > * {...} 
    

    使用标签选择器作为key

    ul > li > a {...}
    #footer > h3 {...}
    

    ?#21451;?#25321;器和相邻选择器是低效的是因为对于每一个元素的匹配,浏览器不得不评估其他的一些元素,它需要双倍的时间耗费在匹配上。同时,越少的精确的 key,越多的时间花费在匹配元素上面。尽管如此,即使是不高效的,他们比后代选择器的使用的效果要好一点。

  5. 过渡的限定选择器
  6. id选择器是唯一的,包含了tag或者class的限定仅仅是增加了一些无用的信息(浏览器去评估)

    ul#top_blue_nav {...}
    form#UserLogin {...} 
    
  7. 使用:hover在一些没有:hover的元素上面
  8. 在非标准模?#36739;?#38754;。ie7,ie8将忽略这些规则。在标准模?#36739;?#38754;,可能会导致一些性能的退化

    h3:hover {...}
    .foo:hover {...}
    

推荐的方式

  1. 避免使用全局样式
  2. 允许一个元素去继承它的祖先,或者使用一个class去应用复杂的元素。

  3. 将规则写的越精确越好
  4. 偏向使用class ,id,少使用tag

  5. 移除一些无用的限定
  6. 下面的这些限定是多余的:1.id选择器被class 或者tag选择器限定;2.class被tag选择器进行限定(如果一个class只被用于一个tag,这也是很好的实践)。

  7. 避免使用后代选择器,特别是包含了一些无用的祖先元素
  8. eg:body ul li a{...} 制定了一个无用的body限定,因为所有的元素都是在body中。

  9. 使用class选择器取代后代选择器
  10. eg:如果你需要两个不同的样式(一个无序列表,一个有序列表),不要使用下面的样式

    ul li {color:blue} 
    ol li {color:red} 
    

    应该这样的使用

    .unordered-list-item {color: blue;}
    .ordered-list-item {color: red;}
    

    如果你一定要用后代选择器,建议你使用?#21451;?#25321;器

  11. 避免使用:hover在一些没有连接的元素上面(对于ie序列的)
  12. 如果你使用:hover在一些无连接的元素上面,ie7,8会认为他们是无用的。建议使用事件onmouseover 来模拟。

本文地址:http://www.bavugt.tw/librarys/veda/detail/1295,欢迎访问原出处。

不打个?#33268;穡?

转载随意,但请带上本文地址:

http://www.bavugt.tw/librarys/veda/detail/1295

如果你认为这篇文章?#26723;?#26356;多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码?#27599;?、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而?#20063;幌低常?#22240;为在特定领域有一个足够量的知识量+足够良好的知识结构,?#20302;?#21270;以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足?#38405;?#25324;面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位?#21271;?#31455;他是面试官,但是在知识结构体系以及心理上我们?#36884;?#39640;临下。

所以,阅读一百本计算机著作吧,少年!

《编程之美:微软技术面试心得》 《编程之美》小组 (作者)

《编程之美:微软技术面试心得》是一本让人着迷的书!阅读起来。有些题目的内容会引起强烈的共鸣,尤其是那些自己非常熟悉并且又深知解答的题目;也有一些题目让我异常惊诧,原来除了我所知道的解答思路之外,还有更好的解答以及更深层次的原因。还有一些题目是从来没想到过的。阅读过程是一次愉快的享受,也是脑细胞?#20013;?#27963;跃的过程。

更多计算机宝库...

有极速快乐十分吗
6肖中特三期必开一期 看新闻赚钱后面也不给了 足球投注网 快乐扑克3走势图360 新疆35选7今日开奖号码 乒乓球网 为什么游戏试玩也赚钱吗 山西快乐十分开奖号码 北京赛车开奖网 31号彩票中奖号码3d