Web项目中引入CSS 应该总是在 javascript 文件之前吗？

将 CSS 放在 JavaScript 之前有两个主要原因。

1. 旧浏览器（Internet Explorer 6-7、Firefox 2 等）在开始下载脚本时会阻止所有后续下载。因此，如果您a.js遵循，b.css它们将按顺序下载：先是 a，然后是 b。如果您b.css遵循，a.js它们会并行下载，因此页面加载速度更快。

2. 在下载所有样式表之前不会呈现任何内容 - 在所有浏览器中都是如此。脚本是不同的 - 它们会阻止页面中_脚本标记下方_的所有 DOM 元素的渲染。如果将脚本放在 HEAD 中，则意味着整个页面将被阻止渲染，直到下载所有样式表和所有脚本。虽然阻止样式表的所有渲染是有意义的（以便您第一次获得正确的样式并避免无样式内容的闪现），但阻止脚本的整个页面的渲染是没有意义的。通常，脚本不会影响任何 DOM 元素或仅影响 DOM 元素的一部分。最好在页面尽可能低的位置加载脚本，或者更好地异步加载它们。

使用Cuzillion创建示例很有趣。例如，此页面的HEAD 中有一个脚本，因此整个页面在下载完成之前都是空白的。但是，如果我们将脚本移动到 BODY 块的末尾，则页面标题会呈现，因为这些 DOM 元素出现在 SCRIPT 标记上方，正如您在此页面上看到的那样。

我不会过多强调你所得到的结果。我相信这是主观的，但我有理由向你解释，最好在 JavaScript 之前放入 CSS。

在加载网站期间，您会看到两种情况：

案例1：白屏→无样式网站→有样式的网站→交互→有样式的交互式网站

案例2：白屏→无样式网站→交互→有样式的网站→有样式和交互式的网站

老实说，我无法想象有人会选择案例 2。这意味着使用慢速 Internet 连接的访问​​者将面临一个无样式的网站，该网站允许他们使用 JavaScript 与其进行交互（因为该网站已加载）。此外，通过这种方式，花在浏览无样式网站上的时间将会最大化。为什么有人想要那个？

正如jQuery 所说，它也能更好地工作：

“当使用依赖 CSS 样式属性值的脚本时，在引用脚本之前引用外部样式表或嵌入样式元素非常重要”。

当文件以错误的顺序加载时（首先是 JavaScript，然后是 CSS），任何依赖于 CSS 文件中设置的属性（例如 div 的宽度或高度_）_的 JavaScript 代码都将无法正确加载。看起来，如果加载顺序错误，JavaScript“有时”会知道正确的属性（也许这是由竞争条件引起的？）。根据所使用的浏览器，这种效果似乎更大或更小。

在大多数情况下，将CSS放在JavaScript之前确实有几个明显的好处，主要是关于页面加载性能和用户体验方面的考虑。

1. 改善渲染性能

加载CSS之前的优先级是因为浏览器在解析HTML并构建DOM（文档对象模型）的同时，会并行下载CSS文件，并构建CSSOM（CSS对象模型）。一旦CSSOM和DOM都准备好了，浏览器将它们结合起来渲染页面。如果CSS加载被推迟，或者在JavaScript文件之后加载，浏览器可能无法立即渲染页面，因为它没有完成CSSOM的构建。这会导致页面显示不完整或者布局闪烁，影响用户体验。

例如，在实际项目中，如果CSS延迟加载，用户可能会看到未经样式处理的HTML内容（也称为FOUC——无样式内容的闪烁），直到CSS文件被加载和解析后，页面才会正常显示。

2. JavaScript操作CSS

另一个理由是，JavaScript经常会操作DOM并依赖于特定的CSS完成布局和功能。如果CSS在JavaScript之后加载，那么JavaScript在执行时可能无法正确查询或应用样式，因为相应的CSS规则还未就绪。

例如，如果一个JavaScript脚本试图动态调整元素的大小或位置，但相应的CSS尚未加载，脚本可能无法正确执行，因为它依赖的样式尚未应用于元素上。

3. 例外情况

尽管通常建议先加载CSS，但在某些情况下，可能需要优先加载JavaScript。例如，当JavaScript用于加载关键内容或功能时（如动态内容生成或提前获取数据），可能需要优先加载JavaScript。在这种情况下，开发者需要确保JavaScript的执行不会对页面渲染造成不良影响。

总结

总的来说，将CSS置于JavaScript之前可以优化页面渲染过程，减少页面内容闪烁，确保JavaScript能正确操作已经应用样式的DOM元素。这种做法符合Web性能优化的最佳实践。但也有例外，需要根据具体需求和场景特定地调整资源加载顺序。