• ↗☻【高性能网站建设进阶指南 #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应用交互时如何使用样式进行表现

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

  • 相关阅读:
    MongoDB查询语句 (增、删、改、查)
    MongoDB简单查询语句
    jquery Select Change事件
    c# 远程监控(4) 接收端 RTP包重组 分屏显示
    c# 远程监控(3) RTP协议 RTP.NET.DLL
    c# 远程监控(1) 大纲
    c# 远程监控(2) 摄像头调研及模拟
    TortoiseGit记住用户名和密码
    winform ListView和DataGridView实现分页
    制作符合平台的CodeSmith代码生产模版
  • 原文地址:https://www.cnblogs.com/jzm17173/p/3113560.html
Copyright © 2020-2023  润新知