javascript - 禁用样式表以提高显示/隐藏 div 的速度

Question

我读了一篇很棒的文章:http://www.learningjquery.com/2010/05/now-you-see-me-showhide-performance

我引用它的作者:

“为了好玩，我想，“如果不是操纵每个 DOM 节点和改变东西，我们只是乱搞样式表呢？”那里可以提高速度吗？我的意思是，上面的基准测试方法对于日常工作来说已经足够快了使用，但是如果我在一个页面上有 10,000 个节点我想显示和隐藏怎么办？只选择它们会很慢。但是，如果我可以操纵样式表，我可以避免整个开销。让我告诉你道路充满危险。

当然，在操作样式表时存在跨浏览器问题，因为 jQuery 不会为您抽象它们。首先，我尝试查看是否可以使用 jQuery 将带有 css 类的样式标签附加为字符串，但在不同浏览器中得到的结果不一致。然后我尝试使用 JavaScript 创建样式表节点和类，但是有不同的 API，最终速度太慢而无法证明。所以最后，放弃以编程方式执行此操作的尝试，我最终只是在文档的头部编写了一个带有类的样式标签。以编程方式创建样式表太慢了，但如果它已经存在，那么给它一个 ID 并使用它的禁用属性是微不足道的。

HTML:

<style id="special_hide">.special_hide { display: none; }</style>
<!--  ...  -->
<div class="special_hide">Special hide DIV</div>

然后在 javascript 中......

JavaScript:

$('#special_hide').attr('disabled, 'true');

和 BAM，您刚刚显示了所有带有“special_hide”类的元素。要再次隐藏它们，只需...

JavaScript:

$('#special_hide').attr('disabled', 'false');

现在它们都被隐藏了。所有浏览器的总 JavaScript 处理时间为 0-1 毫秒。您正在做的唯一 javascript 是更改属性。 "

**我的问题是:如何创建一个“special_show”类，将我的 div 添加到该类，然后启用该类来显示它们？

有点像

<style id="special_show">.special_show { display: default; }</style>

**

Answer 1

我会做一个笼统的回答，没有字符限制:)

因此，您想要操作 DOM 元素的 CSS 样式 (例如 div 等) 而无需循环遍历元素 (例如 $(".special_style").each() ) 以应用样式，因为规则捕获的元素越多，它就会消耗大量资源。

您不能使用 removeClass/addClass组合，因为它是 DOM 操作，您需要使用前面的循环。

这有 already been answered解决方案是使用 insertRule 和 addRule 方法。 请阅读其他答案，该主题重复。

更新:

1 This fiddle展示了如何设法将动态 CSS 添加到您的页面! 嗯，它不是很好，因为它没有外化，但它可以做你想实现的事情!

$("#special_hide").append(".special_hide { display: none; }");

2 您可以加载不同的 CSS 文件 $("head").append("<link rel='stylesheet' href='path/to/style.css' type='text/css' />");

除此之外，我不能告诉你哪个是最好的，有些人会争辩说通过添加样式表来修改头部可能是错误的，其他人会告诉你内联 css 是错了 ...只要阅读像 w3c 这样的文档就可以下定决心!