加载CSS和性能_Css_Performance_Memory_Browser

加载CSS和性能

css performance memory browser

加载CSS和性能,css,performance,memory,browser,Css,Performance,Memory,Browser,我正在用JS框架构建WebApp（基于ReactJS的InfernoJS）我想知道只加载有用的CSS有多重要。在JS框架网站（使用angularjs、Reactjs…）中，您拥有加载的所有路线的CSS，但根据您的页面，您可能只需要在网页上使用20%的CSS规则例如：对于JS框架网站，您将在“/home”页面上加载ComponentA的CSS，但是在这种情况下，CSS是不相关的我想知道，如果开发只加载组件显示的css的代码，是否真的能提高我的性能，特别是SEO性能浏览器如何处理未命名的

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

我想知道只加载有用的CSS有多重要。在JS框架网站（使用angularjs、Reactjs…）中，您拥有加载的所有路线的CSS，但根据您的页面，您可能只需要在网页上使用20%的CSS规则

例如：对于JS框架网站，您将在“/home”页面上加载ComponentA的CSS，但是在这种情况下，CSS是不相关的

我想知道，如果开发只加载组件显示的css的代码，是否真的能提高我的性能，特别是SEO性能

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

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

在JS框架的基础上，你的页面被分割成不同的组件，大多数时候，你会有一个组件的页眉、正文和页脚

因此，如果我走“/home”和“/about”路线，组件的页眉和页脚应该是相同的，但主体组件将发生变化。所以为了优化，我考虑每次加载页眉和页脚组件的CSS。但是，加载的CSS应该根据路由而改变，如果我改变了路由（页面没有重新加载，它是由JS处理的），则会加载另一个主体组件，但我将拥有先前路由的主体组件的CSS。事实上，一般来说，你的网站每一条路线的所有身体成分都有CSS

所以你有很多未使用的CSS规则。因此，通过添加和删除

来更改加载的CSS是否有趣，或者我可能会花费大量资源来完成这项工作，并且浏览器对此进行了足够好的优化？

要回答您的问题，您需要考虑几个层次

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

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

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

即使通过

@import

或

仅加载必要的css，这也可能是一个问题，因此最好的方法是在html本身中提供css（在将html呈现到页面时动态加载）

这可以通过两种方式减少加载时间：

通过引用加载css时（即

@import

或

），浏览器开始打开新连接（或在html完全传输后使用相同的连接），并请求在html中链接的css。那么浏览器呢

加载html，尽管尚未加载css，并尽快显示html（始终）
需要额外的时间来建立一个新的连接，或者等待html传输完成，然后才开始加载css
如果使用的css加载很晚，这可能是几秒钟的事情

虽然没有问：

对于javascript，在大多数情况下需要的恰恰相反：浏览器在收到并预编译脚本后立即开始执行脚本。当脚本引用的html尚未加载时，这可能会导致不必要的行为。因此，除非您使用承诺来确保在执行某项操作之前已加载页面，否则您应该将内嵌javascript尽可能放在页面末尾

[编辑]

要匹配您的附加问题：

很难说。当然，一个优化的css在客户端的性能会比一个重载的css稍好一些，但是这使得设计更加困难，因为您必须跟踪任何文档中的任何更改并相应地调整css。当您想要更新一个类时，它还可能导致不同页面上相同类之间的差异（例如，第1页中的标题与第2页中的标题不同）