2

我在 NetBeans 中有一个大型遗留 Web 项目。大多数 CSS 文件都包含在标题中。所有（或几乎所有）页面都需要一些 CSS，而一些仅在页面子集上。

我想至少重新组织具有高流量的页面，以确保它们不包含未使用的 CSS。为此，我将不得不创建多个要包含在其中的小 CSS 文件（在标题中仅保留最少数量的包含）。但我担心如果我有多个外部 CSS 包含它会导致对该页面的更多 http 请求，所以我不确定什么是最好的解决方法。我想提高页面性能，但我不想减少未使用的 CSS 并最终在这些页面上有太多的 http 请求。

对于这种情况，什么是好的解决方案/妥协？

谢谢！

4

2 回答 2

2

使用遗留代码很难做到这一点，因为你必须把它倒过来看看页面中实际使用了什么，不太确定去那里的最佳途径，但对于新项目，有几种方法可以组织你的 css . 首先让我们讨论纯CSS：

除了一些.htaccess技巧（查看关于 .htaccess 技巧的答案）之外，没有太多方法可以解决多个请求，所以除此之外，您需要以合理的方式分解您的 css，这就是我的方法处理这个（事情。

每个页面都得到这些：

  • normalize.css 样式表

  • base.css 样式表（包含默认元素的样式，如表单元素、标题、段落等

然后我们变得更具体，我尝试使我的代码尽可能模块化，因此我尝试将 UI 组件组合在一起，例如选项卡和滑块，然后我会拥有

  • ui.css

最后是网站各个部分的单独表格，如果我有管理部分，那么admin.css这些内容对于上述任何文件来说都太具体了

我可能还有 account.css 或 app.css 用于前向代码

现在，如果您可以使用 Less 或 Sass 之类的东西，您就可以真正优化您的代码。

因为你有预编译的能力，你可以使用导入，你可以为你的站点/应用程序的部分创建更少的文件，只导入 css 组件，一个例子是这样的：

无管理员

@import 'normalize.less';
@import 'base.less';
@import 'ui/forms.less';
@import 'ui/admin-dashboard.less';
@import 'ui/admin-update.less';

无应用程序

@import 'normalize.less';
@import 'base.less';
@import 'ui/forms.less';
@import 'ui/widgets/login.less';
@import 'ui/widgets/signup.less';
@import 'ui/widgets/other-widget.less';

这就是所有这些主文件包含的内容。这样，当您需要进行更改或添加新代码或新功能时，您可以创建一个新文件，然后将其导入。您还可以根据需要创建任意数量的主文件，并且只在每个页面上准确提取所需的内容。

这为您提供了很好的控制，并使您的 css 易于维护和真正可扩展，同时还通过允许您仅包含需要的内容来提高性能。

希望这有帮助！！

于 2013-12-11T18:19:34.720 回答
1

我不知道你有一个灵丹妙药的答案。您可能需要进行一些测试才能为您的用例找到以下最佳组合：

  • 最小化初始下载大小
  • 最小化 HTTP 请求的总数
  • 最大化 CSS 的可缓存性

例如，您可能有一些 CSS 用于 50% 的页面。为了最小化初始下载大小，您可能希望将此 CSS 保存在单独的文件中。但是，这会增加重新下载需要它的页面所需的 HTTP 请求数量。因此，如果此 CSS 的大小相对较小，您可能会选择将其与主 CSS 混为一谈，获取初始下载命中，但在用户浏览您的网站时无需进一步 HTTP 请求此 CSS。

您需要进行此类分析以确定适合您网站的最佳方法。

于 2013-12-11T18:31:23.263 回答