2

随着浏览器终于​​开始在 CSS3 上达成一致,许多 Web 开发人员正在为他们新的、无图像的 Web 设计兴奋地搓着手。他们很干净。它们是可扩展的。他们很强大。

有了border-radii、box-shadows、font-faces等,现在我们可以将设计师漂亮的设计转化为代码行,而不是用img标签来包装我们的页面。

两个相关问题:

  • 当样式表变得如此之大以至于它们实际上[负面]影响性能到明显程度时,是否有一点?
  • 在具有大量图标(大小在 16 像素到 48 像素之间)的 Web 应用程序中,使用图标字体对性能的提升会有多明显?
4

4 回答 4

2

当样式表变得如此之大以至于它们实际上[负面]影响性能到明显程度时,是否有一点?

这真的只是常识。如果您的样式表变得非常大,那么这将与拥有大量图像一样产生负面影响。一般来说,一个样式表(有很多 CSS3 和花哨的位)会比下载大量图像更快。

我建议根据下载速度、浏览器支持要求、桌面与移动设备等因素,逐案确定 CSS 或图像是否提供更好的解决方案。

在具有大量图标(大小在 16 像素到 48 像素之间)的 Web 应用程序中,使用图标字体对性能的提升会有多明显?

除非您在谈论成百上千的图标,否则性能上确实不会有非常明显的差异。请记住,对于图标字体,您也可能让用户下载一些自定义字体。

同样,这确实是使用最适合当前项目的情况。

我认为您的问题没有明确的答案,但希望我所说的可以为您澄清一点。

于 2012-11-26T17:21:54.100 回答
1

在某些情况下,CSS 文件的大小确实会影响性能。如果CSS特别大,会引起一些问题。但正如其他人提到的,它是文本,所以它可能是非常小的文件。但是,如果该 CSS 被拆分为多个文件,这将成为一个更大的问题。我见过一些有 10-20 个 css 文件的站点,它们都位于一个服务器上。根据浏览器的不同,它一次只能打开 2-6 个(可能是 8 个)到每个服务器的连接。如果你有 10 个 css 文件,再加上另外 10 个 js,再加上 100 个其他资产,那么打开和关闭各种连接将需要相对较长的时间。解决此问题的一种方法是将 CSS 文件连接为开发过程的一部分。我喜欢的一些执行此操作的工具是 Yeoman 或 Codekit。

使用图标字体很好,因为它们是可扩展的并且使用单个文件。当您放大页面时,图标仍然看起来很棒,而您可能使用的 png 看起来很糟糕。图标字体也是一个文件,因此出于与上述相同的原因,它是一个文件而不是 10s-100s。如果您确实需要为某些不是图标的部分使用 PNG 文件,请考虑使用精灵,通常称为 CSS Sprite。这是一种将多个图像组合成一个 png 文件的技术,然后可以在网站上使用一些有创意的 CSS。

于 2012-11-30T19:37:04.443 回答
1

我不认为有一个“点”,性能与尺寸无关,而是与样式规则本身有关。我看到的主要问题与 CSS 渐变(尤其是径向渐变)有关。这是大约一年前,但我记得测试了一些混合渐变的移动设备和(webkit)移动设备,网页的显示明显滞后。删除渐变并添加图像消除了滞后。现在,据我所知,现在大多数设备可能都有更新的 webkit 显示引擎,可以解决这个问题,但我认为这仍然是一个值得考虑的问题。

于 2012-11-26T17:29:46.907 回答
0

CSS 的全部意义在于样式相互层叠。非常大的样式表会让我相信 CSS 没有正确编写,因此不会级联。话虽如此,我想它可能有适当的大型级联样式表,在这种情况下,我建议使用缩小器来消除空白并压缩代码以加快加载时间。

至于图标,您可以创建一个精灵(多个图像的集合),然后使用 CSS 定位仅显示您需要的图标。这样,服务器将只获取一个大图像而不是许多较小的图像。诚然,一个图像比其他图像大,但没有什么比服务器对图像的大量获取请求更能缩短加载时间并降低页面性能了。

于 2012-11-26T17:36:39.980 回答