• 为什么不使用CSS expression?


    CSS expressions(CSS表达式)是一种功能非常强大的方法,可以实现页面的动态设置属性,但兼容性较差,同时也有着非常恐怖的弱点;

    可以在CSS expressions中使用javascript中的某个函数表达式。来实现动态设置页面的样式。也可以解决IE低版本浏览器中的某些体验。

    支持者:IE5至IE7浏览器。


    例如,在IE6中,不支持应用了position:absolute属性的height:100%。可以使用height:expression(it.parentNode.offsetHeight+'px';);

    例如,用css表达式来控制颜色的变化,每隔一个小时变化一次:background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );



    但是,这个方法存在一个很可怕的隐患,它会频繁的计算(超出大部分设计者的预期);

    在以下情况,会导致 css expressions的频繁执行。

    1.网页打开时。(<10次)

    2.每次重置浏览器大小。(1次)

    3.拉动设置浏览器大小。(每拉动一像素计算1次)

    4.在页面有文字区域滑动鼠标(鼠标每滑动一像素计算1次)

    使用了css expressions的页面,css表达式很容易就被计算上万次,导致机器变慢,浏览器卡死,cpu占用过高等疾病。

    测试计算次数的demo (请使用IE6,IE7浏览器查看。)


    所以如果页面样式属性一定要动态来设置,那么可以考虑用使用javascript实现,不推荐使用css expressions;

    如果一定要用CSS表达式,那你不要忘记它可能会产生成千上万次计算而同时 影响到你的整个页面效果;


  • 相关阅读:
    python 序列化
    python 文件目录操作
    正则表达式 贪婪与非贪婪
    python StringIO&BytesIO
    正则表达式 1
    了解HTML表单之input元素的23种type类型
    JS数组reduce()方法详解及高级技巧
    react之组件的shouldcomponentUpdate使用&&Component与PureComponent
    react之setState面试题
    react之setState异步和同步问题
  • 原文地址:https://www.cnblogs.com/weinan/p/2971118.html
Copyright © 2020-2023  润新知