使用图片或CSS更好地保持网页或应用程序的性能尽可能高吗？ [英] Is it better to use images or CSS to keep performance of a webpage or application as high as possible?
问题描述
我的项目的创意设计师和我有一些友好的不同意见是否更好地使用他的comp的切片或依靠浏览器的渲染引擎创建用户体验的某些方面。
一个具体的例子是使用水平bar运行窗口小部件的整个宽度。他创造了一个真正奇怪的渐变，涉及几个不同的颜色和不透明度的停止，他认为图像的小尺寸是更好的或至少可以比较添加的CSS代码生成梯度本身需要的行。
我们已经使用CSS sprite技术来减少从服务器返回的次数，所以这对我们来说不是一个问题。现在，它只是使用切片图像而不是使用CSS和HTML渲染的专业人士和骗子。
有一个明确的规则，图像需要多大
更新：由于几个人已经提到梯度的复杂性作为一个因素I' m将在此呈现： -webkit-渐变（线性，左上，左下， ，rgb（0,0,0）），to（rgba（0,0,0,0.9）））;
非常复杂！ ; - ）
测量吧！不是你喜欢的答案我认为，但它真的取决于复杂的CSS将是什么，因此需要多长时间被呈现。
在大多数情况下，它将是渲染时间（CSS版本）与请求开销和传输时间（映像版本）。你很可能会看到大数字在这里。由于您已在使用图片精灵，因此您将请求开销降至最低。
浏览器兼容性也应该是您应该注意的。
一些非常复杂的CSS3网站来展示我的意思： http://lea.verou.me/css3patterns/
这是一个非常好的案例研究，但令人难以置信的缓慢。加载时滞后。它滚动时滞后更多。我确信它比使用图像精灵的所有解决方案的解决方案慢得多。
不要对待我错了！我喜欢CSS，但图像也很好。有时甚至更精细。
摘要
测量！当你没有时间测量时，然后估计css会是多么复杂。当它趋向于变得复杂，然后使用图像。遇到兼容性问题后，请使用图片。
My project's creative designer and I have had some amicable disagreements as far as whether it is better to use slices of his comp or rely on the browser's rendering engine to create certain aspects of the user experience.
One specific example is with a horizontal "bar" that runs the entire width of the widget. He created a really snazzy gradient that involves several stops of different colors and opacities, and he feels that the small size of the image is preferable or at least comparable to the added lines of CSS code needed to generate the gradient natively.
We're already using CSS sprite technique to reduce the number of return trips from the server so that's not an issue for us. Right now it's simply the pro's and con's of using sliced up imagery versus rendering with CSS and HTML.
Is there a definitive rule as to how large an image needs to be to be the "worse" option of the two?
UPDATE: Since a few people have mentioned the complexity of the gradient as a factor I'm going to present it here:
-webkit-gradient(linear, left top, left bottom, color-stop(50%, rgb(0,0,0)), to(rgba(0,0,0,0.9)));
Very complex! ;-)
Measure it! Not the answer you like I think, but it really depends how complex the CSS will be and therefore how long it takes to be rendered.
In most cases it'll be the render time (CSS version) vs. request overhead and transmission time (image version). You will most probably see the big numbers here. Since you're already using image sprites you're reducing the request overhead to a minimum.
Browser compatibility should also be something you should be aware of. Here images will often win over CSS when it comes to gradients and something like that.
Some very complex CSS3-site to demonstrate what I mean: http://lea.verou.me/css3patterns/ This is a VERY nice case study, but incredible slow. It lags when loading. It lags even more when scrolling. And I am sure it is much slower than a solution using an image sprite for all of that.
Don't treat me wrong! I love CSS, but images are fine too. Sometimes even finer.
Summary
Measure it! When you do not have the time to measure, then estimate how complex the css would be. When it tends to get complex, then use images. When you've compatibility issues, then use images.
这篇关于使用图片或CSS更好地保持网页或应用程序的性能尽可能高吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
