`
shuaigg.babysky
  • 浏览: 568190 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

css expression 性能影响

CSSXHTMLHTMLCC++ 
阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>aspxhome.com</title>
<style>
body{ font-size:12px; font-family:Verdana; line-height:1.9}
a{ display:block; border:1px solid #FF3366;}
</style>
</head>
<body>
计算了<input id="c" />次
<script>
var k = 0;
function test() {
    k++;
    document.getElementById('c').value = k;
    return;  
}
</script>
<div>
  <ul>
    <li><a href="11111111111111111111">22222</a></li>
    <li><a href="11111111111111111111">22222</a></li>
    <li><a href="11111111111111111111">22222</a></li>
    <li><a href="11111111111111111111">22222</a></li>
  </ul>
</div>
<script>
window.onload = function() {
var ass = document.getElementsByTagName('a');
for(var i = 0 ; i < ass.length ; i++) {
 ass[i].style.setExpression('width' , 'this.offsetWidth > 750 ? test() : test()');
}
};
</script>
</body>
</html>

 

 

 

稍微在a上面移动鼠标就能造成上百次的计算，所以，请慎用

分享到：
| JavaScript学习
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    css expression使用概述及其优缺点介绍

    尽管如此，在某些情况下，特别是在处理旧版IE的兼容性问题时，CSS Expression的遗留影响仍然可见。 **替代方案** 现代Web开发通常使用JavaScript库和框架（如jQuery、React、Vue等）来实现动态效果，它们提供更强大...

    CSS中expression使用简介

    CSS中的`expression`是一个特性，...因此，虽然`expression`在早期Web开发中提供了一种创新的解决方案，但在现代Web开发中，为了兼容性、性能和代码质量，应避免使用`expression`，转而使用标准的CSS和JavaScript技术。

    尽量不要使用CSS Expression的原因

    **原因二：性能影响** Expression的一个主要缺点是它频繁地进行计算。不仅在页面加载、缩放或重绘时，甚至在页面滚动和鼠标移动等微小交互时，CSS Expression都会重新计算其表达式。这可能导致大量的计算开销，尤其...

    不要使用CSS Expression的原因分析

    总之，虽然CSS Expression提供了一种强大的动态样式设置方式，但由于其性能问题、兼容性限制以及潜在的安全风险，现代Web开发更倾向于使用其他更稳定、高效且广泛支持的技术。在设计高性能、跨浏览器的网页时，避免...

    CSS expression 隔行换色效果

    然而，CSS expression由于性能问题和浏览器兼容性，在现代Web开发中已经不再推荐使用。 另一种实现方式是通过JavaScript。在这个例子中，我们首先定义了两个CSS类：`.li01` 和 `.li02`，分别设置不同的背景颜色。...

    CSS expression在Chrome的问题

    总结来说，CSS表达式在现代浏览器中已成为一个不被支持和推荐的特性，其主要问题在于性能差和兼容性差。在开发中，应当使用标准的CSS属性和符合规范的JavaScript代码来达到动态控制样式的需要。而在处理跨浏览器兼容...

    CSS expression判断表达式设置input样式

    综上所述，虽然CSS expression在某些情况下提供了灵活性，但由于其局限性和负面影响，现在已被更现代、标准化的CSS和JavaScript技术所取代。在编写现代Web应用时，应避免使用`expression`，转而使用更稳定和广泛支持...

    CSS自定义属性Expression

    尽管CSS自定义属性Expression在某些情况下提供了便利，但由于它对浏览器的兼容性和性能的影响，现在已经不再推荐使用。现代浏览器更倾向于使用CSS变量（`:root`选择器下的`--variable-name`），它们提供了一种更安全...

    CSS中使用expression表达式

    总结起来，CSS的`expression`表达式虽然提供了动态设置CSS属性的能力，但由于其性能问题和对其他浏览器的不兼容性，已经被现代前端开发所弃用。推荐使用JavaScript事件处理器来替代，以实现更高效且跨浏览器兼容的...

    CSS Expression 优化

    尽管这些方法可以减少Expression的性能影响，但仍然没有完全解决问题。在使用CSS Expression时，每次触发事件（如鼠标滚轮滚动）仍然会去执行Expression脚本，这仍然会造成性能损失。因此，文档强调，尽管进行了优化...

    css expression实现的图片自动缩放

    总的来说，虽然CSS Expression曾是一种解决图片自动缩放的方法，但鉴于其性能问题，现代Web开发更倾向于使用媒体查询和响应式设计。这些技术不仅提高了性能，还使得网页在各种设备上具有更好的兼容性和用户体验。

    第十四节 IE中利用CSS触发XSS-01

    从IE5开始得到支持，但由于标准、性能、安全性等问题，微软从IE8 beta2标准模式开始，取消对css expression的支持。 注释绕过关键字过滤 在CSS中，可以使用注释来绕过关键字过滤。例如，使用 `//` 绕过对关键字 `...

    css expression 隔行换色

    - **性能影响：** 使用CSS `expression` 会占用额外的计算资源，尤其是在大型表格中，可能会导致页面渲染速度变慢。 综上所述，尽管CSS `expression` 提供了一种实现隔行换色的简便方法，但在实际项目中并不推荐...

    CSS中使用expression完美设置页面最小宽度(兼容ie)

    在IE浏览器（尤其是早期版本）中，`expression`是一个特有的特性，它允许我们将CSS属性与JavaScript表达式结合起来，以实现动态计算和设置样式的目的。 标题提到的问题是关于如何在IE浏览器中设置页面的最小宽度。...

    DIV+CSS 高手也得看的15个CSS常识

    非整数字体大小（如15px）可能会导致浏览器进行额外的计算，从而影响渲染性能。为了避免这种情况，建议使用整数值的字体大小。 #### 11. 使用`display:block`处理`&lt;ul&gt;`和`&lt;ol&gt;` 在处理列表元素时，推荐使用`...

    CSS expression控制图片自动缩放效果代码[兼容 IE,Firefox]

    4. zoom属性和expression函数：在本问题中，作者提出了一种解决方案，即使用IE特有的CSS属性zoom和expression函数。zoom属性可以使元素按照指定的倍数放大或缩小，而expression函数是一个在IE浏览器中可以使用的方法...

    jsp css技术详解

    在JSP中，我们可以使用JSTL（JavaServer Pages Standard Tag Library）或EL（Expression Language）来引入CSS资源，例如通过`&lt;link&gt;`标签来链接外部CSS文件，或者直接在JSP页面中使用`&lt;style&gt;`标签内联定义样式。...

    用css样式固定表头和列

    - **使用`expression`**: 虽然在现代前端开发中，直接使用`expression`并不被推荐（因为性能和兼容性问题），但在早期的网页设计中，这是一种常用的技巧。现代做法更倾向于使用JavaScript或CSS的`sticky`属性来实现...

Magicbox
Global site tag (gtag.js) - Google Analytics