无图像网页设计带来的性能提升

时间:2012-11-26 17:03:52

标签: css performance css3

随着浏览器终于​​开始就CSS3达成一致,许多网络开发人员对他们新的无图像网页设计感到非常兴奋。他们很干净。它们是可扩展的。他们很强大。

使用border-halii,box-shadow,font-faces等,现在我们可以将设计师的漂亮设计转换为代码行,而不是使用img标签打包我们的页面。

两个相关问题:

  • 当样式表变得如此之大以至于它们实际上[负面]影响性能达到显着程度时,是否有一点?
  • 在具有大量图标(范围为16px到48px)的Web应用程序中,使用图标字体可以显着提升性能?

4 个答案:

答案 0 :(得分:2)

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

这真的是常识。如果你的样式表变得非常大,那么它将具有与具有大量图像一样的负面效果。一般而言,样式表(包含大量CSS3和花式位)的下载速度比一堆图像更快。

我建议逐案考虑并决定CSS或图像是否提供更好的解决方案,考虑下载速度,浏览器支持要求,桌面与移动等等。

在包含大量图标的Web应用程序中(大小在16px到48px范围内),使用图标字体可以显着提升性能吗?

除非你在讨论数百/数千个图标,否则性能上的差异确实不会很明显。请记住,使用图标字体,您也可能让用户下载一些自定义字体。

同样,它确实是使用当前项目的最佳选择。

我认为你的问题没有明确的答案,但希望我所说的能为你解决一些问题。

答案 1 :(得分:1)

我认为没有“点”,而且表现与尺寸无关,因为它与风格规则本身有关。我看到的主要问题与CSS渐变(尤其是径向渐变)有关。这是一年左右的时间,但我记得测试一些移动设备有一些渐变和webkit移动设备,网页的显示特别落后。删除渐变和添加图像消除了滞后。现在,据我所知,大多数设备现在可能有更新的webkit显示引擎可以解决这个问题,但我认为它仍然是一个值得考虑的有效点。

答案 2 :(得分:1)

在某些情况下,CSS文件的大小确实会影响性能。如果CSS特别大,则会导致一些问题。但正如其他人提到的,它是文本,所以它可能是非常小的文件。但如果CSS分散在许多文件中,那就会成为一个更大的问题。我看到一些网站有10-20个css文件,都位于一台服务器上。根据浏览器的不同,每次只能打开2-6个(可能是8个)连接到每个服务器。如果你有10个css文件,加上另外10个js,再加上100个其他资产,那将需要相对长的时间来打开和关闭各种连接。解决此问题的一种方法是将CSS文件作为开发过程的一部分进行连接。我喜欢这样做的一些工具是Yeoman或Codekit。这些工具还会自动缩小CSS,使其生成的文件更小。

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

答案 3 :(得分:0)

CSS的重点在于风格相互串联。非常大的样式表会让我相信CSS没有正确编写,因此不能级联。话虽这么说,我想它可能有很大的正确级联样式表,在这种情况下,我建议使用缩小器来消除空白区域并压缩代码以加快加载时间。

至于图标,你可以创建一个精灵(多个图像的集合),然后使用CSS定位只显示你需要的图标。通过这种方式,服务器只能获取一个大图像而不是许多较小的图像。当然,一个图像比其他图像大,但是没有什么能够比服务器对图像的大量提取请求消耗加载时间并降低页面性能。