不要使用CSS Expression的原因分析

在CSS Expression中使用JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。
CSS Expression在其它浏览器中不起作用，因此在跨浏览器的编码中单独针对IE设置时会比较有用。
从IE5开始支持CSS Expression。我们看下面的代码：


代码如下:

background-color: expression( (new Date()).getHours()%2 ? "#F00" : "#00F" );

上面的代码是使用CSS Expression，实现隔一个小时切换一次背景颜色。
CSS Expression的问题就在于它的计算频率要比想象的多出很多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS Expression增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。
一个减少CSS Expression计算次数的方法就是使用一次性的表达式，它在第一次运行时将结果赋给指定的样式属性，并用这个属性来代替CSS Expression。
如果样式属性必须在页面周期内动态地改变，使用事件句柄来代替CSS表达式是一个可行办法。如果必须使用CSS Expression，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。不要让您的用户感觉打开你的页面，机器会变的很慢。

赞 (0)

相关推荐

  • 不要使用CSS Expression的原因分析

    在CSS Expression中使用JavaScript表达式.CSS属性根据JavaScript表达式的计算结果来设置. CSS Expression在其它浏览器中不起作用,因此在跨浏览器的编码中单独针对IE设置时会比较有用. 从IE5开始支持CSS Expression.我们看下面的代码: 复制代码 代码如下: background-color: expression( (new Date()).getHours()%2 ? "#F00" : "#00F" );

  • Spring MVC 注解自动扫描失效原因分析

    关于spring自动扫描,在控制层,采用注解配置@Controller,项目能够成功启动,且无任何报错.但是 在进行页面跳转时,并未进行相应的拦截,整个界面只能在默认界面 ,跳转报404,由于楼主初次尝试,在绕了一个大圈后,初步确认是在扫描时mvc控制器,并未成功,详情请看代码 <!-- 开启controller注解支持 --> <context:component-scan base-package="com.cjw.test.controller" use-def

  • 后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法

    后端接收不到AngularJs中$http.post发送的数据原因分析及解决办法

    1.问题: 后端接收不到AngularJs中$http.post发送的数据,总是显示为null 示例代码: $http.post(/admin/KeyValue/GetListByPage, { pageindex: 1, pagesize: 8 }) .success(function(){ alert("Mr靖"); }); 代码没有错,但是在后台却接收不到数据,这是为什么呢? 用火狐监控:参数是JSON格式 用谷歌监控:传参方式是request payload 可以发现传参方式是

  • SQL Server ltrim(rtrim()) 去不掉空格的原因分析

    原因:中间存在回车符或者换行符,所以要先将此符号替换掉: LTRIM(RTRIM(REPLACE(REPLACE( A,char(13),''),char(10),'') )) LTRIM(A) ---去换左边空格 RTRIM(A) ---去换右边空格 REPLACE( A,char(13),'')----将回车符替换为'' REPLACE( A,char(13),'')----将换行符替换为'' 总结 以上所述是小编给大家介绍的SQL Server ltrim(rtrim()) 去不掉空格的原

  • C#解析json字符串总是多出双引号的原因分析及解决办法

    json好久没用了,今天在用到json的时候,发现对字符串做解析的时候总是多出双引号. 代码如下: string jsonText = "{'name':'test','phone':'18888888888'}"; JObject jo = (JObject)JsonConvert.DeserializeObject(jsonText); string zone = jo["name"].ToString(); string zone_en = jo["

  • spring 整合mybatis后用不上session缓存的原因分析

    因为一直用spring整合了mybatis,所以很少用到mybatis的session缓存. 习惯是本地缓存自己用map写或者引入第三方的本地缓存框架ehcache,Guava 所以提出来纠结下 实验下(spring整合mybatis略,网上一堆),先看看mybatis级别的session的缓存 放出打印sql语句 configuration.xml 加入 <settings> <!-- 打印查询语句 --> <setting name="logImpl"

  • ubuntu16.04下vim安装失败的原因分析及解决方案

    先给大家说下问题描述? 重装了ubuntu系统,安装vim出现了以下问题: sudo apt-get install vim 正在读取软件包列表... 完成 正在分析软件包的依赖关系树 正在读取状态信息... 完成 有一些软件包无法被安装.如果您用的是 unstable 发行版,这也许是 因为系统无法达到您要求的状态造成的.该版本中可能会有一些您需要的软件 包尚未被创建或是它们已被从新到(Incoming)目录移出. 下列信息可能会对解决问题有所帮助: 下列软件包有未满足的依赖关系: vim :

  • 关于获取DIV内部内容报错的原因分析及解决办法

    关于获取DIV内部内容报错的原因分析及解决办法

    1.错误描述 2.错误原因 由于向div中添加元素,利用append(); $("#divStyle").append("<div><label>_data[i].name</label></div>"); append里面是动态数据,当请求数据为空时,获取并判断div中的内容: var divContent = $("#divStyle").html(); if(divContent == nul

  • php resizeimage 部分jpg文件 生成缩略图失败的原因分析及解决办法

    今天遇到GD的resizeimage 函数处理jpg后缀文件的缩略图的时候 提示该图片不是合法的jpg图片并报错 <b>Warning</b>: imagecreatefromjpeg(): gd-jpeg, libjpeg: recoverable error: Invalid SOS parameters for sequential JPEG 国内网上查了很多资料也没找到有效的解决办法,原来只要把 GD的jpeg文件支持打开即可解决 ini_set('gd.jpeg_igno

  • 在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析

    在Yii2中使用Pjax导致Yii2内联脚本载入失败的原因分析

    当我用defunkt/jquery-pjax载入Yii2的ActiveForm时发生一个错误,正常情况下是 ActiveForm的两个js应该先载入,而实际情况是 typeError:JQuery(...).yiiActiveForm is not a function. 在github的issues对这个问题已经讨论并得到了解决. Pjax首先通过html()执行内联的<script>,然后才通过executeScriptTags()执行带着src的<script>,所以导致找不

随机推荐