CSS sprites vs數據URI

我聽說了很多關於使用精靈的重要性，以便讓您的請求倒計時。但我的想法是，而不是使用精靈，你可以使用URI來完成相同的事情，並且更容易（不需要創建精靈）。CSS sprites vs數據URI

使用sprites或uris更好嗎？

2010-08-19 Mark

對於那些像我自己誰不知道什麼數據URI是在這篇文章之前，http://www.nczonline.net/blog/2010/07/06/data-uris-make-css-sprites-obsolete/ – 2010-08-19 19:59:47

@meder，* ooooooh * +1！ =） – 2010-08-19 20:58:42

Base64編碼的數據比原始字節大三分之一左右，所以在下載所有圖像數據所花費的時間比提出請求長三倍以上的頁面上，CSS sprites優於性能基礎。

此外，內聯數據URI使文件本身花費的時間與實際數據加base64編碼圖像一樣長。如果數據URI位於實際的HTML頁面上，則意味着渲染停止並等待圖像加載。如果數據URI位於樣式表中，這意味着數據URI必須等待處理之後的任何規則。另一方面，使用精靈文件，圖像可以與您的其他資源同時加載。這可能是值得的一個額外的請求的成本，特別是當你考慮到base64罰款。

來源

2010-08-19 20:33:20 Chuck

+1跨瀏覽器兼容性也是一個問題。 – 2010-08-19 20:35:40

這些都是好點。儘管如此，我並不認爲這個精靈需要這個缺點。主要缺點是必須製作它們，如果進行了編輯，則會重新制作它們。 – Mark 2010-08-19 23:30:33

嘿查克，你做過任何真正的性能測試使用數據uris與spsses/img在css文件之間的差異？或者你知道這個話題的任何資源？ – andrej 2011-12-07 16:20:14

我想對IE5,6和7的支持將是一個很好的理由使用精靈的URIs，如果這些目標對你很重要。

來源

2010-08-19 19:53:45 twerq

因此，如果您的目標是減少對您網頁的請求數量，則應在主CSS文件中使用數據URI，然後爲使用精靈的<= IE7提供替代表單。 – 2010-08-19 20:04:01

您始終可以使用MHTML作爲這些瀏覽器的替代方案。 – Ryan 2011-02-02 10:59:15

CSS sprites vs數據URI

回答

相關問題