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应用交互时如何使用样式进行表现

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

  • 相关阅读:
    完美兼容的纯CSS下拉菜单
    ASP.Net分页控件发布(转)
    ASP.NET(C#)FileUpload实现上传限定类型和大小的文件到服务器
    完美的ASP.NET页面分页控件
    Asp.net上传图片同时生成缩略图和水印图
    狗狗约瑟夫环(链表)
    丹叔链表
    囧囧出的题……他自己都没过(一元多项式之和)
    More is better
    最短路
  • 原文地址:https://www.cnblogs.com/jzm17173/p/3113560.html
Copyright © 2011-2022 走看看