zoukankan      html  css  js  c++  java
  • 小记--转自张鑫旭的css命名规则

    <div id="test">
        <ul class="test"></ul>
    </div>

    现在要给这里的ul标签一个样式,比如说padding-left:25px;那么下面四种写法哪个渲染速度最快?
    #test .test{}, ul.test{},#test ul{} 以及.test{}。

    如果单纯的ul与.test PK,我还真拿不定谁的渲染速度更快些。但是,一旦牵扯到层级与标签,我100%确定,.test这种最直接的命名方式渲染效率是最高的。要知道,CSS渲染元素和使用JavaScript获取页面元素那是完全不一样的。如果是使用JavaScript获取DOM元素,则#test ul{}速度是最快的,先id获取,再tag获取,这些可都是JavaScript内置的方法。但是,CSS的渲染方式则是属于外太空系的了,《高性能网站进阶指南》一书曾提到CSS的渲染方式是“从右往左”渲染的,就拿#test ul{}举例,先渲染页面上所有的ul标签,再去寻找id为test的元素,所以,出现#test div{}这种写法的人都是傻×的,页面先渲染id为test的元素?非也!先渲染页面上所有的div,再去寻找其老爸有没有id为test的元素。由于这种渲染差异最大就200~300毫秒(补充:这里的差异不是说单纯一个样式的差异,而是这些写法泛滥的页面的全部渲染。

    所以,CSS命名,只要出现了层级,出现了标签,就是一次额外的渲染,层级越多,渲染的开销也就越大,这就是为什么一些前辈的文章会建议要尽量避免过深的层级。这也是为什么要“无层级”,“无标签”。

  • 相关阅读:
    贪吃蛇 666
    安装postgresql
    linux CentOS6.5 yum安装mysql 5.6
    centos--git搭建之Gogs安装
    查看mysql 默认端口号和修改端口号
    centos之mysql安装配置使用
    流媒体服务器SRS部署
    vue用webpack打包时引入es2015插件
    log4j2的log输出到tomcat/logs目录下及使用(转)
    log4j2的配置文件log4j2.xml笔记
  • 原文地址:https://www.cnblogs.com/joesbell/p/5981544.html
Copyright © 2011-2022 走看看