加载CSS和性能

Question

我正在用一个JS框架(基于InfernoJS的ReactJS)构建webpapp。

我想知道只加载有用的CSS有多重要。在JS框架网站(与angularjs，Reactjs.)，您有您的CSS为您的所有路线，但取决于您的页面，您可能只需要20%的CSS规则在网页上。

举个例子:在ComponentA中有'/about‘，对于JS框架网站，您也将在'/home’页面上加载CSS For ComponentA，但是在这种情况下，CSS是无关紧要的。

我很好奇，如果开发代码只加载组件显示的css将真正提高我的性能，尤其是SEO。

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

编辑：@Psi部分回答。我会重新制定它，使它更容易理解。

在JS框架基础上，您的页面被分割成不同的组件，大多数情况下，您将有一个组件头、正文、页脚。

因此，如果我走到'/home‘和'/about’的路线上，组件的页眉和页脚应该是相同的，但是主体组件会改变。因此，为了进行优化，我考虑每次都为页眉和页脚组件加载CSS。但是，加载的CSS应该根据路由而改变，如果我更改路由(页面没有重新加载，它由JS处理)，则将加载另一个主体组件，但我将拥有先例路由主体组件的CSS。事实上，通常您有CSS为您的所有身体组成部分，为您的网站的每一个路线。

因此，您有许多未使用的CSS规则。因此，应该通过添加和删除<link>来更改加载的CSS吗?否则，我可能会将其归结为大量的重新源操作，而浏览器对其进行了足够的优化？

Answer 1

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

首先:当然，加载到页面中的每个css都会占用它所需的内存来保持其活动状态，因为您的html页面(尽管可能是静态的)可能会被动态更改(例如$.addClass)。

因此，浏览器知道当前使用的是什么样式，但无法确定未来可能的元素，因此被迫将每个css定义保存在内存中(或将每个css定义分页到磁盘)。

第二件事是装载时间。根据加载css的顺序，您可能会遇到这样的情况:首先加载页面，然后应用css。这甚至可以被用户看到，在开始时呈现一个非样式的页面，并在以后进行样式化！

即使仅通过@import或<link rel="stylesheet">加载必要的css，这也可能是一个问题，因此最好的方法是在html本身中提供css (在将html呈现到页面时动态加载它)。

这以两种方式减少了装载时间：

当通过引用(即@import或<link>)加载css时，浏览器开始打开一个新连接(或者在html完全传输之后使用相同的连接)，并请求在html中链接的css。所以浏览器

• 加载html，尽管还没有加载css，并在拥有性(始终如此)的情况下显示html。
• 需要额外的时间来建立一个新的连接，或者等待html传输在它开始加载css之前完成。
• 如果使用的css加载得很晚，这可能只是几秒钟的问题！

虽然没有被问到：

对于javascript来说，在大多数情况下，需要的正好相反:当脚本被接收并预编译时，浏览器就开始执行它。这可能会导致不必要的行为，当脚本所引用的html尚未加载时。因此，除非您使用了一个承诺来确保页面在执行之前已经加载，否则您应该尽可能地将一行javascript放在页面的末尾。

编辑

要与您的补充问题相匹配：

怎么说呢。当然，优化的css比客户机中的重载css性能要好一些，但是这使得设计更加困难，因为您必须跟踪任何文档中的任何更改，并相应地调整css。此外，当您想要更新一个类时，它可能会导致不同页面上相同的类之间的差异(例如，.headline在page1中的外观与.headline中的page2中的不同)。

如果您自动(动态)生成样式表，则通过将精力放在优化上可以比通过减少样式表解析时间来节省更多的开销。