zoukankan      html  css  js  c++  java
  • CSS 性能

    http://boagworld.com/dev/why-you-should-care-about-css-page-performance/

    http://css-tricks.com/efficiently-rendering-css/

    https://developers.google.com/speed/docs/best-practices/rendering

    作者给出的 CSS 性能小提示:

    1. 大家都知道 id 选择器的表现效果要优于 class,事实虽然也如此,但仅仅是非常微小的差别,几乎可以不予考虑;
    2. CSS3 属性往往是影响页面性能的罪魁祸首,尤其是 animation 与 @font-face,谨慎地使用;
    3. 现代浏览器支持 Javascript 与 Flash 硬件加速,却不支持 CSS, 虽然 webkit 有优化功能,但还是受限的;
    4. 移动平台的情况是,即便现在最先进的手机也不及 10 年前最先进的电脑;
    5. 人脑有大约 80 毫秒的反应时间,优化页面性能时不要在一些细枝末节的地方花太多精力,专注于拖慢严重的地方

    6. 浏览器读 CSS 的顺序是从右往左,比如 ul > li a[title="home"],最先被读到的第一部分是 a[title="home"]

    7. 效率由高到低的选择器依次是 ID, class, tag, universal :

    #main-navigation {   }      /* ID (Fastest) */
    body.home #page-wrap {   }  /* ID */  
    .main-navigation {   }      /* Class */
    ul li a.current {   }       /* Class *  
    ul {   }                    /* Tag */  
    ul li a {  }                /* Tag */  
    * {   }                     /* Universal (Slowest) */
    #content [title='home']     /* Universal */

    因为浏览器从右往左读,#main-nav > li {} 这一句即使用到了 id 选择器,实际效率却不会提升多少。

    8. 不需要这样写 ul#main-navigation {},因为 ID 已经是独一无二的了,同理,tag 也要尽可能地避免与 class 一同使用。

    9. 后代选择器是性能最差的,尤其是后代中包含 tag 或者 universal 选择器,比如 html body ul li a {} 简直是一场灾难。

    10. 浏览器如果发现某个选择器不能匹配任何元素,将会立即终止尝试,开始匹配下一个选择器,从而提高执行效率。

    11. 重新思考一下为什么要这样写,是不是还有优化的可能呢?比如利用元素的继承性可以省下很多不必要的设定。

    12. 如果很在意性能,尽量少用 CSS3 选择器。

  • 相关阅读:
    类别category 总结
    autorelease理解
    NSAutoreleasePool drain release的区别
    ios 文件管理 目录
    关于autorelease pool一个较好的理解
    iOS中四种实例变量的范围类型@private@protected@public@package
    批量删除
    会话用法 和留言板例题
    运用php做投票题,例题
    php 封装
  • 原文地址:https://www.cnblogs.com/aaronjs/p/3845388.html
Copyright © 2011-2022 走看看