首页 > css教程 > 正文

性能测试YSLOW前端调优23大规则(七)——避免使用CSS表达式

转载 2019-02-11 0 3
性能测试YSLOW前端调优23大规则(七)——避免使用CSS表达式

CSS表达式(css expression)又称作为动态属性(Dynamic properties)是早期微软DHTML的产物,用来把CSS属性和JavaScript脚本关联起来。CSS的属性可以是元素固有的属性,也可以是自定义属性,也就是说CSS属性后面可以是一段JavaScript表达式,CSS属性的值等于JavaScript表达式计算的结果。如以下实例是根据浏览器的大小来设置元素的位置。

left: expression(document.body.offsetWidth - 180 "px");

top: expression(document.body.offsetHeight - -80 "px");

CSS从IE5开始得到支持,后因标准、性能、安全性等问题,微软从IE8 beta2标准模式开始,取消对css expression的支持。

微软提供了4个css expression方法:getExpression、recalc、removeExpression、setExpression。有兴趣可以参考MSDN。一般最常用的是直接在css中使用expression。

CSS exprssion技术达到了可以使用表达式或公式来定义CSS属性的目的,MSDN针对CSS表达式给出的优点是:减少页面上的代码,使设计师无需学习JavaScript就能实现一些DHTML的效果。但这种减少代码主要是减少了JavaScript的代码。

CSS表达式本身也存在很多缺陷:

1) 不符合WEB标准

CSS表达式这种在表现中插入行为的JavaScript代码,有悖于Web标准的结构、表现、行为相分离的理念。

2) 效率低

一个CSS表达式会反复执行,因为需要不停的去计算CSS的属性值,甚至执行成百上千次,这会大大消耗计算机硬件资源,极端情况下可能会导致浏览器崩溃。

3) 安全隐患

CSS表达式暴露了一个脚本执行的上下文,可能带来脚本注入的隐患。

为了避免常见的CSS表达式问题,通过可以使用一次性表达式和处理事件。如果CSS表达式必须求值一次,那么可以对这次执行使用JavaScript代码进行重写,这样可以避免元素改变大小、滚动或在页面上移动鼠标时频繁的对CSS表达式进行求值。

表达式的问题在于它们比大多数人期望的更频繁地进行评估。它们不仅在页面呈现和调整大小时进行评估,而且在页面滚动时以及用户将鼠标移到页面上时也进行评估。向CSS表达式添加一个计数器可以让我们跟踪CSS表达式的评估时间和频率。

减少CSS表达式评估次数的一种方法是使用一次性表达式,第一次评估表达式时,它将style属性设置为一个显式值,该值将替换CSS表达式。如果样式属性必须在页面的整个生命周期中动态设置,则使用事件处理程序而不是CSS表达式是一种替代方法。如果您必须使用CSS表达式,请记住它们可能会被数千次评估,并可能会影响页面的性能。

出以以上的原因我们建议在前面开发过程避免使用CSS表达式。

川石信息

www.chuansinfo.com

更多性能知识,QQ交流群:518094865,116209721

相关文章


  • 镂空广告,一行CSS实现滚动时藏在信息流后面的广告效果
  • 如何使用css在放大和缩小浏览器的同时不修改背景图片
  • iPhone X 的凹槽 和 iOS 11 中一些相关 CSS 属性解说
  • 【167期】Stylelint 在提升企业微信 CSS 代码质量上的实践
  • CSS的内容属性,多种可能的取值,让样式设置更加丰富
  • css零基础自学教程(十一)伪类,伪元素,自动换行,font-face
  • 干了这么久前端,你有注意到CSS的这个冷知识吗?
  • 用css美化默认的滚动条样式,用这个属性就够了