一个大的css文件与多个小的css文件

时间:2015-08-17 00:30:38

标签: html css

我已经阅读了有关此问题的不同信息,我总是看到人们建议使用一个大的css文件,从性能的角度来看。但是我不明白,当它被请求时,是否需要花费更多的时间为所有页面加载css文件然后为每个页面加载每个页面? (我见过的例子:Multiple css files or one big css file?Single huge .css file vs. multiple smaller specific .css files?)。是的,也许会有多个http请求,但它们会在不同的时间段内发生,因此在需要时加载每个页面基本上不是更好,然后浪费时间为每个页面加载css开始然后在飞行中显示它们?

3 个答案:

答案 0 :(得分:8)

两种方法都有利弊。

拥有多个CSS文件,您可以在开发过程中正确组织和CSS个文件。但是,这也意味着要发出多个HTTP个请求。 HTTP请求在加载时间方面更加昂贵,因为它必须联系服务器并获取文件。

一旦加载了文件,它就会被浏览器缓存。这意味着,即使加载huge.css的速度最初可能较慢,但在您浏览网站时也不需要再次加载。

根据我的经验并且由大多数开发人员改编,你可以做下面这样的事情来获得这两个世界的大部分。

使用SASSLESS等css pre-processers。不要问我哪一个更好,已经有足够的论据围绕着topic。选择一个你觉得舒服的。我的偏好是SASS

CSS预处理器允许您将CSS文件划分为更小的更有组织的文件。例如,您可以拥有main.sass,其中包含menu.sass, footer.sass, etc.

<强> main.sass

include _menu
include _footer
include _header
...

_告诉sass不要为每个这些sass文件编译单独的文件。所以它们都只会被编译成一个main.css。这些预处理器具有将给定的sass文件编译成浏览器可以读取的css文件的功能。您还可以使用[livereload][4]等工具实时编译它们。

您的开发代码中将包含这些sass文件。但是在生产代码中,您只需使用已编译的单个css文件。

如果您感觉更有利并希望更进一步,可以使用GruntGulp等工具。它们允许自动化您的开发任务或构建流程。理想情况下,在开发过程中,您可以使用grunt task来监视所有sass文件,并自动将它们编译到main.css文件中。在index.html中,您可以参考此main.css。一旦你开心,你还可以拥有另一个名为build task的任务,它可以自动编译你所有的css文件并最小化它们。

澄清您的问题:

这取决于具体情况,具体情况,您拥有的网站类型以及构建方式。

如果您的网站访问者最有可能永远不会浏览网站而不是某些特定网页,那么最好加载特定于该特定网页的css而不是将其合并。您可以在特定于这些页面的部分中加载这些css文件。

根据我建立许多网站的经验,

  1. 它几乎总是最好加载一个组合的CSS。
  2. 如果特定页面要求css不太可能经常被访问,请在其模板中单独包含一个页面特定的css,并带有条件script标记。
  3. 几乎100%的时间最小化所有css文件
  4. 另外,我建议你花更多的时间来提高服务器端代码或数据库的效率,然后过多担心css。由于大部分效率都在服务器端,因此效率会更高。

答案 1 :(得分:-1)

在回答这个问题时,最好检测用户正在查看该页面的浏览器,然后根据该x.css, y.css加载 package com.joe.biomarker; import android.app.Activity; import android.app.SearchManager; import android.content.Intent; import android.database.Cursor; import android.os.Bundle; import android.widget.SimpleCursorAdapter; import android.widget.ListAdapter; public class SearchResultsActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); handleIntent(getIntent()); } @Override protected void onNewIntent(Intent intent) { super.onNewIntent(intent); handleIntent(intent); } private void handleIntent(Intent intent) { if (Intent.ACTION_SEARCH.equals(intent.getAction())) { String query = intent.getStringExtra(SearchManager.QUERY); showResults(query); } } private void showResults(String query) { // Query your data set and show results // ... Cursor results = mDataTableInstance(query, mColumnsArray); SimpleCursorAdapter adapter = new SimpleCursorAdapter(getContext(), R.layout.search_results, results, mFromArray, mToArray); mListView.setAdapter(adapter); } } 。这也可以大大减少浏览器中显示的CSS错误的数量,有传闻说这对SEO有利。

答案 2 :(得分:-1)

我使用多个css文件,按功能划分。有一个全局的,一个用于页面布局,一个用于菜单,一个用于选项卡控件等。我还有用于桌面和移动的级联 - 只有一个应用。然后我根据用户的喜好进一步级联了皮肤。我根据页面,平台和用户选择要加载哪些。这就是PHP的用途。