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

  • 相关阅读:
    如何理解面向对象和面向过程
    IIS端口被占用
    SQL UNION操作符
    SQL(MSSQLSERVER)服务启动错误代码3414
    WCF学习之路(一)
    AJAX技术学习总结
    AJAX之XMLHttpRequest对象
    软考之汇编语言
    IP地址的分配
    数组偏移量
  • 原文地址:https://www.cnblogs.com/joesbell/p/5981544.html
Copyright © 2011-2022 走看看