玩转C科技.NET

从学会做人开始认识这个世界!http://volnet.github.io

导航

将所有图片包含在一张图片中,以提高网页访问速度

image

当我们开始大量地使用图片美化网站的时候,不知道是否想过可以在不改变原貌的情况下提高网页的性能呢?

网页的性能来源于哪些?

  • 网页内容的数量,N多图片的网页比起纯文本的网页,都会相对肥重一点。与此相同的技术还有返回Gzip压缩的数据。
  • 请求的次数,每次请求本身都需要耗费传输数据以外的额外资源,包括但不限于三次握手连接,服务器线程占用,以及浏览器实现请求所带来的代码执行所带来的花销。
  • 还有一些包括脚本执行效率等,不在本文讨论范围。

我们通常很容易想到第一条,但却常常忽略了第二条。与此相同的技术实现还有“合并脚本输出”等。

其实在一些页面,很多图片都是必然同时出现的。比如Windows Live的图标(如图所示)以及Bing的搜索按钮,还有默认的头像等。

原本需要三次访问服务器的图片,我们在一次连接中就将其完整取回,后续的访问将依靠浏览器缓存,而不再向服务器请求数据,这无疑减少了访问请求的数量,对于超大型的网站而言,这样的投资是有意且显而易见的。

下面的代码罗列了一些用于分割图片的方法,仅作示例:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title>Request Only One Picture</title>
</head>
<body>
    本实例中的.png可以从http://img.wlxrs.com/$live.controls.images/h/s3.png获取。
    <hr />
    <img src="1.png" alt="Normal" />
    <hr />
    <div style="height: 40px;">
        <img src="1.png" alt="Windows Live" style="clip: rect(0px 18px 17px 0px); position: absolute;
            border: 1px solid;" />
        <img src="1.png" alt="Windows Live" style="clip: rect(0px 36px 17px 18px); position: absolute;
            left: 40px; border: 1px solid; left: 30px;" />
        <img src="1.png" alt="Windows Live" style="clip: rect(17px 36px 52px 0px); position: absolute;
            left: 80px; border: 1px solid; top: 90px;" />
    </div>
    <hr />
    <div>
        <a href="http://home.live.com" style="cursor: pointer"><span style="background: url(1.png) no-repeat 0px 0px;
            width: 18px; height: 17px;"></span></a><a href="http://www.bing.com" style="cursor: pointer">
                <span style="background: url(1.png) no-repeat -18px 0px; width: 18px; height: 17px;">
                </span></a><a href="http://bit.ly/S9RA5" style="cursor: pointer"><span style="background: url(1.png) no-repeat 0px -17px;
                    width: 36px; height: 36px;"></span></a>
    </div>
    <hr />
    其中:no-repeat表示不拉伸图片。
</body>
</html>

posted on 2009-07-05 12:11  volnet(可以叫我大V)  阅读(1388)  评论(5编辑  收藏  举报

使用Live Messenger联系我
关闭