zoukankan      html  css  js  c++  java
  • ↗☻【高性能网站建设进阶指南 #BOOK#】第14章 简化CSS选择符

    针对CSS的性能,有一些最佳实践:
    把样式表放在文档HEAD标签中以提升页面的逐步渲染速度
    不要在IE中使用CSS表达式,因为它们可能会被执行成千上万次,从而导致打开页面的速度变慢
    避免使用过多的行内样式,因为这会增加下载页面内容的大小

    使用低效CSS选择符

    CSS选择符的编写方式决定了浏览器必须执行的匹配次数,而某些类型的CSS选择符将会导致浏览器尝试更多匹配,因此开销比简单选择符更高

    避免使用通配规则
    除了传统意义上的通配符之外,Hyatt也把相邻兄弟选择符、子选择符、后代选择符和属性选择符都归纳到通配规则下。他推荐仅使用ID、类和标签选择符

    不要限定类选择符
    li.chapter改成.li-chapter,或是.list-chapter更好

    让规则越具体越好
    不要试图编写像OL LI A这样的长选择符,最好是创建一个像.list-anchor一样的类,并把它添加到适当的元素上

    避免使用后代选择符,子选择符是更好的选择

    避免使用子选择符

    质疑子选择符的所有用途
    尽可能用具体的类取代它们

    依靠继承
    了解哪些属性可以通过继承而来,然后避免对这些属性重复指定规则

    div div div p a.class0007
    关键选择符是a.class0007,页面中只有一个元素匹配这个关键选择符,所以匹配这个选择符所需要的时间是极少的

    a.class0007 div
    #id0007 > a
    .class0007 [href]
    div:first-child

    当用户和页面交互时,浏览器应用样式和布局元素所花费的时间,这又叫回流时间
    当使用javascript修改dom元素样式的某些属性时会触发回流
    回流并不需要涉及页面上的所有元素,浏览器已为此进行了优化,仅仅只对那些受回流影响的元素重新布局。如果元素时文档的body或其他一些有很多后代的元素,那么回流的开销一定会相当高

    杜绝低效css选择符的影响,不仅要考虑页面加载时间,也要考虑用户和web 2.0应用交互时如何使用样式进行表现

    将每个受影响元素的后代选择符替换成类选择符,不仅会增加页面大小,还会降低样式的灵活性。最需要修正的选择符是那些可以匹配大量元素的关键选择符(最右边的选择符)

  • 相关阅读:
    在 Java SE 6 中监视和诊断性能问题
    Codeforces Round #491 (Div. 2)部分题解
    BZOJ1607: [Usaco2008 Dec]Patting Heads 轻拍牛头(模拟 调和级数)
    BZOj1261: [SCOI2006]zh_tree(dp)
    BZOJ1569: [JSOI2008]Blue Mary的职员分配(dp 暴力)
    BZOJ4300: 绝世好题(dp)
    树上莫队算法
    SPOJ COT2
    BZOJ1086: [SCOI2005]王室联邦(贪心,分块?)
    Educational Codeforces Round 42 (Rated for Div. 2)
  • 原文地址:https://www.cnblogs.com/jzm17173/p/3113560.html
Copyright © 2011-2022 走看看