我正在使用几个PNG图像(通过CSS)到网站的模板,xhtml和CSS中.
我保持png尽可能小,并尽可能优化,但在任何浏览器(Safari,Firefox,IE)中测试时,至少需要2秒才能渲染.
不幸的是我不能在这里分享代码,但我可以说我已经删除了所有的javascript和我的html代码相当小(大约250行,没有表)并且正确验证.
我想知道PNG是否是"有罪"部分,因为这是我的第一个网站几乎完全用pngs(而不是gifs + jpegs)完成(我不支持IE6,所以不需要黑客).
如果您有许多图像(不一定是PNG),则下载时间将受到影响.默认情况下,浏览器使用有限数量的线程来下载内容(IIRC FF有4个),因此您拥有的图像越多,所需的时间就越长.
此外,如果您未在图像上指定尺寸,则浏览器只能在图像到达时正确布局页面.它需要为每个这样的图像重新布局布局,这既昂贵又耗时.
简而言之,确保您没有太多要下载的图像,并且HTML标记具有适合它们的尺寸.
拥有许多图像的一种解决方法是使用CSS sprites.
不,他们没有时间来渲染(除非你有一台非常慢的计算机).什么需要时间,是检索很多小文件.当您在Web服务器中查询小文件时,检索文件本身的时间不会很长.但是设置连接等等加起来.
那么,你应该做的是制作所谓的"精灵".将所有小图像合并为一个大图像并用CSS"切割"它们.这里解释了它是如何完成的以及它究竟是什么:
http://css-tricks.com/css-sprites/
和这里
| 归档时间： |
|
| 查看次数： |
8049 次 |
| 最近记录： |