构建高性能网站----减少页面中的http请求数
对于互联网产品,近几年一直在听周围的产品和技术说着用户体验,尤其是Steve jobs say good bye了以后,但是什么是真正的用户体验。漂亮,fashion,吸引人当然是非常重要,但这些都是基出美工人员的设计。
那么,除了美工制作诱人的图片以外,还有什么方法来提升用户体验呢?
当用户访问你的网站时,我们总是想尽量减少用户等待时间,如果不是这样,那么Ajax技术的出现我想也没有什么必要了。
当我们访问一个网站或是一个网页时,首先要做的就是从浏览器对服务器进行一次请求,然后通过服务器的响应把从服务器上请求到的组件呈现在浏览器上。很显然,在这一过程中,我们希望时间越短越好,这样才能更快的将页面上的内容或是组件尽快的呈现给用户。
说到底就是减少网页对服务器的http请求次数,请求次数少了,时间自然就少了,但是对于互联网来说,减少网页中组件数量又不太可能,尤其是对于那些复杂又看上去绚丽的网页来说。正因为这样,所以我们在开发网页的时候,就需要前端设计人员进行一些技巧上的处理。
一.图片地图
图片地图允许你把一个图片分割成多个部分,然后在每个分割的部分上添加自己的事件。
如你正在使用导航栏或是图片导航这类的应用,使用这种方法,服务器只产生一次http请求,避免了多个图片产生多个http请求的情况,并且实现起来也比较简单。
例子如下:
我有一幅忍者神龟的图片,我在这四个小龟脑袋上针对不同的忍者神龟添加四个alert
<html>
<head>
<title>构建高性能网站-减少页面中的http请求数-图片地图</title>
</head>
<body>
<img src="TMNT.jpg" border="0" usemap="#TMNTmap" alt="TMNT" />
<map name="TMNTmap" id="TMNTmap">
<!-- coords 圆心加半径 rect 左上角的坐标到右下角的坐标-->
<area shape="circle" coords="273,373,50" href ="javascript:alert('这是第一只龟');" alt="First"/>
<area shape="circle" coords="442,375,50" href ="javascript:alert('这是第二只龟');" alt="Second"/>
<area shape="circle" coords="563,382,50" href ="javascript:alert('这是第三只龟');" alt="Third"/>
<area shape="rect" coords="688,344,780,415" href ="javascript:alert('这是第四只龟');" alt="Fourth"/>
</map>
</body>
</html>
这里主要使用的就是html中的<map>和<area>标签。
一.CSS Sprites
CSS Sprites比图片地图更加灵活,它可以在网页中的任何一个位置显示某一张图
片的某一个部分。
还用我的忍者神龟为例,在图片地图中我们在每一个龟脑袋上都添加了js事件。
现在我们把这四个小王八从上到下的顺序排列
效果如图:
<html>
<head>
<title>构建高性能网站-减少页面中的http请求数-CSS Sprites</title>
<style>
#First{
background-image:url(TMNT.jpg);
background-position:-230px -335px;
width:90px;
height:70px;
}
#Second{
background-image:url(TMNT.jpg);
background-position:-400px -341px;
width:90px;
height:70px;
}
#Third{
background-image:url(TMNT.jpg);
background-position:-518px -340px;
width:90px;
height:70px;
}
#Fourth{
background-image:url(TMNT.jpg);
background-position:-686px -342px;
width:90px;
height:70px;
}
</style>
</head>
<body>
<div id="First"></div>
<div id="Second"></div>
<div id="Third"></div>
<div id="Fourth"></div>
</body>
</html>
区别:
图片地图是把一张图片分割成不同的区域,在不同的区域上可以增加单独的事件。
Css sprites是可以把一张图片将某一部分裁剪下来显示到不同的元素上去,甚至可以让其显示
成一幅新图。
- 大小: 262.2 KB
- 大小: 259 KB
分享到:
相关推荐
在当今的互联网环境中,构建高性能、可扩展的网站至关重要,尤其对于ASP.NET开发者来说,这是一项挑战与机遇并存的任务。本资源提供了一整套解决方案,包括详细的理论讲解和实战代码,旨在帮助开发者提升ASP.NET应用...
【描述】中的"构建高性能可扩展ASP.NET网站.pdf"表明该书的核心内容可能涵盖了ASP.NET技术在构建高性能网站时的关键策略和最佳实践。PDF格式使得读者可以方便地阅读和查阅,而SourceCode则提供了实际示例,让开发者...
减少请求数是提升网页性能的关键策略之一,因为每次HTTP请求都会带来额外的数据传输,包括请求头信息和可能的响应头信息,这在处理小资源时尤为明显,甚至可能导致请求数据量超过资源本身。以下是针对减少请求数的...
在构建高性能的Web站点时,PHP作为一门广泛使用的服务器端脚本语言,扮演着至关重要的角色。本篇文章将深入探讨如何利用PHP技术实现高效的Web应用,优化网站性能,并提供一些关键知识点。 首先,理解PHP的基础架构...
高性能的CSS开发是网站优化的重要环节,能够提高页面加载速度,提升用户体验,降低服务器负载。本资料“CSS高性能开发-源代码”提供了关于这一主题的深入学习资源,下面我们将详细探讨相关的知识点。 1. **选择器的...
构建高性能web站点的知识点涵盖了从基础的网站架构设计到前端优化、后端性能提升、数据库优化、内容分发网络(CDN)的使用以及负载均衡等多个方面,每一个环节都至关重要。 1. 高效的网站架构设计: - 架构模式:...
1.4 减少网页中的HTTP请求 1.5 加快服务器脚本计算速度 1.6 使用动态内容缓存 1.7 使用数据缓存 1.8 将动态内容静态化 1.9 更换Web服务器软件 1.1 页面组件分离 1.11 合理部署服务器 1.12 使用负载均衡 ...
《高性能网站建设指南》通过介绍一系列实用的性能优化规则和技术,帮助读者构建出高效、响应迅速的网站。这些规则涵盖了从减少HTTP请求到避免重定向等多个方面,旨在全面提升网站性能,为用户提供更好的浏览体验。...
总之,在构建高性能WEB站点过程中需要综合考虑各方面因素,并灵活运用各种技术和方法来不断改进和完善现有体系结构。只有这样才能够满足日益增长的需求变化,保持竞争力并在激烈市场竞争中立于不败之地。
在智能手机和移动设备普及的今天,构建高性能的移动Web成为了前端开发人员所面临的一项重要任务。移动Web能够覆盖更广泛的用户群体,并且可以跨平台运行,而不像原生应用那样受限于特定的操作系统。腾讯作为一家领先...
1.4 减少网页中的HTTP请求 1.5 加快服务器脚本计算速度 1.6 使用动态内容缓存 1.7 使用数据缓存 1.8 将动态内容静态化 1.9 更换Web服务器软件 1.1 页面组件分离 1.11 合理部署服务器 1.12 使用负载均衡 ...
在构建高性能Web站点的过程中,我们需要考虑多个关键领域,以确保网站能够快速响应用户请求,提供流畅的用户体验,并能处理高并发访问。以下是一些核心知识点: 1. **前端优化**: - **代码压缩**:合并JavaScript...
如果你希望构建高流量页面,并且改善用户访问网站的体验,那么本书是你不可或缺之物。 Steve Souders,Chief Performance Yahoo!,为Yahoo!的其他产品团队开发了性能分析工具,并致力于推广这些最佳实践和工具...
### 架构师实战Nginx构建高性能WEB服务器 #### 1. Nginx入门简介 Nginx是一款高效、稳定、功能丰富的Web服务器软件,同时也是一款优秀的反向代理服务器和邮件代理服务器。Nginx最初由Igor Sysoev为解决当时Web...
- 减少页面元素的数量,通过合并多个CSS和JavaScript文件为单一文件来减少请求次数。 - 使用CSS Sprites技术将多个小图标合并成一张图片,从而减少图片文件的请求。 2. **利用Edge Computing技术** - 利用边缘...