加载CSS和性能

Question

我正在用JS框架构建webpapp（基于ReactJS的InfernoJS）。

我想知道加载只有有用的CSS有多重要。 在JS Framework网站（包含angularjs，Reactjs ...）中，您的所有加载的路由都有CSS，但取决于您的页面，您可能只需要网页上20％的CSS规则。

例如： 您对ComponentA有'/ about'，对于JS Framework网站，您将在'/ home'页面上为ComponentA加载CSS，但在这种情况下，CSS无关紧要。

我不知道如果开发代码只加载组件显示的CSS将真的提高我的表现espcially为搜索引擎优化。

浏览器如何处理未使用的CSS？ 它是否加载到内存中，等待查找可应用的元素？ 每个浏览器都一样吗？

编辑： @Psi部分回答它。我将重新制定它以使其更易于理解。

在JS框架基础上，你的页面被分割成不同的组件，大多数时候，你将有一个组件Header，Body，Footer。

所以如果我走在'/ home'和'/ about'路径上，组件的Header和Footer应该是相同的，但Body组件将会改变。 因此，为了优化，我正在考虑每次加载页眉和页脚组件的CSS。但是，加载的CSS应该根据路由而改变，如果我改变路由（页面不重载，它由JS处理），另一个Body组件将被加载，但是我将拥有CSS的Body元素先例路线。事实上，一般来说，您的网站的每条路线都具有CSS的全部正文组件。

所以你有很多未使用的CSS规则。所以，通过添加和删除<link>来改变加载的CSS应该是有趣的，否则我可能会花费太多的精力来完成它，浏览器对它有足够的优化？

Answer 1

要回答你的问题，你需要经过几层思考。

首先：当然，每一个被加载到你的页面的CSS将采取它需要保持它活跃的记忆，因为你的HTML页面（虽然它可能是静态的）可能可以动态地改变（例如$ .addClass）。因此，浏览器知道当前正在使用哪些样式，但无法确定未来可能的元素，因此被迫将每个css定义保存在内存中（或分页到磁盘上）。

第二件事是加载时间。根据您的css的加载顺序，您可能会遇到以下情况：首先加载页面，之后再应用css。这甚至可以被用户看到，在开始时呈现非风格的页面，并在稍后得到它的样式！

即使只通过@import或<link rel="stylesheet">加载必要的CSS，所以最好的方法是在html中提供css（在将html呈现给页面时动态加载它）。

这将减少加载时间两种方式：

当加载通过引用（即@import或<link>），浏览器开始打开一个新的连接（或使用相同的连接后，您的HTML已经完全转移）的CSS并请求在您的HTML链接的CSS。因此，浏览器

• 负载虽然没有CSS已经被加载并尽快possble（总是）

• 需要额外的时间来建立一个新的连接或等待HTML显示HTML代码的HTML传输完成之前，它甚至开始加载css

• 如果使用的CSS加载非常晚，这可能是几秒钟的事！

虽然没有问：

对于JavaScript，完全相反的希望在大多数情况下：因为它是接收并预编译该浏览器将立即开始执行脚本。当脚本引用的html尚未加载时，这可能会导致不需要的行为。因此，除非您使用承诺确保页面在执行之前已被加载，否则应尽可能将内联javascript放置到页面末尾。

[编辑]

，以配合您的其他问题：

这很难说。当然，优化后的css会比客户端中的重载更好，但这会让设计变得更加困难，因为您必须跟踪任何文档中的任何更改并相应地调整您的css。此外，当您想更新某个类时，它可能会导致不同页面上的相同类之间存在差异（例如，页面1中的头部页面与页面2中的.headline不同）。

如果您自动（动态地）生成样式表，则可以通过在优化中付出努力，而不是通过减少样式表解析时间来节省更多的开销。