什么是css依赖javascript的一个很好的例子？

Question

对于页面加载速度优化，Google建议使用样式和脚本的顺序，首先是CSS，然后是JavaScript 我理解这是一种好的做法。

然而在文档中，它说“如果JS代码没有CSS文件的依赖关系，你可以在JS文件之前移动CSS文件。如果JS代码确实依赖于外部文件中包含的CSS - for例如，您在JS代码中写入文档的输出所需的样式 - 这是不可能的。“

我不能为后者提出一个具体的例子。

在JS代码中写入文档的输出所需的“样式”的一个很好的例子是什么？

该文件为Here

编辑：我的目的是找出在CSS文件之前绝对需要放置JavaScript的情况。

Answer 1

如果您的JavaScript需要CSS设置的特定HTML元素的维度，那么可以使用一些简单的示例。

在这种情况下，样式表中的CSS应该应用于元素，然后通过getComputedStyle()读取其尺寸。

此处的示例可能是为灵活宽度的表定义粘性表标题，其中标题的宽度在渲染正文后相应地设置为正文的宽度。

Answer 2

我想你什么时候有这样的东西？

$("#someDiv").addClass("my_css_transition");

通常使用带有add / removeClass的CSS在JavaScript中进行所有样式更改，而不是直接使用JavaScript设置样式属性。这使您的JavaScript依赖于您的CSS。例如，CSS可以定义转换，如fadeIn或slideIn。如果这些需要在页面加载时触发，则需要在JavaScript添加类之前加载CSS。

---

尽管这是来自Google的合理建议，但要知道这是超级先进的东西。如果你有一个普通的CMS或Wordpress网站，你不必担心这一点。如果你是谷歌，雅虎或Facebook，那么你应该担心它。