尽量不要使用CSS Expression的原因

以下是详细讲解“尽量不要使用CSS Expression的原因”的完整攻略。

以下是详细讲解“尽量不要使用CSS Expression的原因”的完整攻略。

什么是CSS Expression

CSS Expression是一种一个语法结构，用于JavaScript表达式的计算结果，可以被用于样式属性中，例如：

width: expression(document.body.clientWidth>800 ? "800px" : "auto");

这段CSS样式将会使得网页的宽度在浏览器长度大于800像素的时候设置为800像素，否则自适应浏览器窗口宽度。

为什么不推荐使用CSS Expression

CSS Expression 带来的好处是开发人员可以使用JavaScript来计算样式数值，使CSS更加动态化。但这种特性带来的问题更大，以下是使用CSS Expression可能带来的问题：

1. 性能问题

由于每个使用了CSS Expression 的样式都需要解析和执行 JavaScript 代码，这可能会导致不必要的 CPU 开销，导致页面加载速度下降、响应迟缓甚至导致浏览器卡顿。

2. 兼容性问题

有些浏览器不支持CSS Expression语法，例如Chrome不支持 CSS Expression。另外，有些浏览器在解析CSS Expression时可能会出现错误。

3. 安全问题

CSS Expression 本质上是执行 JavaScript 代码，这使得CSS Expression 并不适用于虚拟主机环境的网站。如果CSS Expression 中执行的代码，被黑客攻击者组织得当，可能会影响网站，被劫持或植入恶意脚本。

示例说明

下面列举两个示例说明CSS Expression的问题所在。

示例1：性能问题

如果一个样式表中使用了大量的 CSS Expression，由于每个表达式都需要在解析过程中执行，并可能频繁地执行，这将导致页面响应变得更慢。例如：

width: expression(document.body.clientWidth>800 ? "800px" : "auto");
height: expression(document.body.clientHeight>600 ? "600px" : "auto");
background: expression(document.body.clientWidth>800 ? "url(bigimage.jpg)" : "url(smallimage.jpg)");

上面这个样式表的三个样式，每个都使用了JavaScript表达式，可能会导致一定的 CPU 开销。

示例2：兼容性问题

由于 CSS Expression 是现代浏览器的专有语法，而不是 W3C 标准的一部分，这就可能导致兼容性问题。而且不同的浏览器对于 CSS Expression 的支持有所不同。

例如Chrome浏览器是不支持 CSS Expression 的，使用 CSS Expression 会导致页面不显示样式或异常。

width: expression(document.body.clientWidth>800 ? "800px" : "auto");
height: expression(document.body.clientHeight>600 ? "600px" : "auto");
background: expression(document.body.clientWidth>800 ? "url(bigimage.jpg)" : "url(smallimage.jpg)");

上面这个样式表的三个样式，使用了CSS Expression的表达式会在Chrome中不能被正确地执行。

总结

由于 CSS Expression存在性能、兼容性、安全性等问题，因此不建议在开发中使用CSS Expression，相反，建议通过CSS，或者JavaScript去动态地设置样式或页面布局。