原文参见:https://developer.yahoo.com/performance/rules.html
尽可能的减少http请求
总所周知:终端用户响应时间只有10-20%的时间是用来下载html页面,而80-90%的时间消耗在下载各种页面组件上,所以尽可能的减少http对服务器的请求是有效提高网站性能的方法之一
这些包括图像、脚本、css文件,flash等等。
1、采用image maps
image maps可以将多个url关联到一个图像上
<img usemap="#map1" border=0 src="/images/imagemap.gif">
<map name="map1">
<area shape="rect" coords="0,0,31,31" href="home.html" title="Home">
<area shape="rect" coords="36,0,66,31" href="gifts.html" title="Gifts">
<area shape="rect" coords="71,0,101,31" href="cart.html" title="Cart">
<area shape="rect" coords="106,0,136,31" href="settings.html" title="Settings">
<area shape="rect" coords="141,0,171,31" href="help.html" title="Help">
</map>
2、CSS Sprites
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background-repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置
<style>
#navbar span {
width:31px;
height:31px;
display:inline;
float:left;
background-image:url(/images/spritebg.gif);
}
.home { background-position:0 0; margin-right:4px; margin-left: 4px;}
.gifts { background-position:-32px 0; margin-right:4px;}
.cart { background-position:-64px 0; margin-right:4px;}
.settings { background-position:-96px 0; margin-right:4px;}
.help { background-position:-128px 0; margin-right:0px;}
</style>
3、内联图像
例如:
<IMG ALT="Red Star" SRC="data:image/gif;base64,R0lGODlhDAAMALMLAPN8ffBiYvWWlvrKy/FvcPewsO9VVfajo+w6O/zl5estLv/8/AAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAMAAwAAAQzcElZyryTEHyTUgknHd9xGV+qKsYirKkwDYiKDBiatt2H1KBLQRFIJAIKywRgmhwAIlEEADs=">
或者可以把内联图像放入css里面,这样缓存到客户端,减少了http请求数
.home { background-image: url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAAIxKA...);}
.gift { background-image: url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAAABCp...);}
.cart { background-image: url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAADlCr...);}
.settings { background-image: url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAA...);}
.help { background-image: url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAALW1t...);}
4、合并js和css
将页面用到的多个js合并为一个js文件,多个css文件合并为一个css文件,从而减少http请求数
这个可以灵活决策,如果合并之后的js很大的话,也是会增加下载压力的,毕竟有的页面只用到其中某个js的模块,可以适当合并,灵活加载。
分享到:
相关推荐
学习和构建高性能web站点不错的参考资料,适合初学者和工程开发人员
本书第一部分首先讲述了Nginx服务器的功能、模块管理和进程管理,然后讲述Nginx如何处理请求,在这个基础之上再认识Nginx提供的服务器的名字,Nginx服务器最大的焦点在于高并发和反向代理,在不多却足够使用的模块...
资源名称:零成本实现 Web 性能测试——基于Apache JMeter内容简介:《零成本实现Web性能测试:基于Apache JMeter》是一本关于Web性能测试的实战书籍,读者朋友们在认真阅读完《零成本实现Web性能测试:基于Apache ...
web技术深入交流:网站用户体验探索——之网站性能优化
超棒的web应用技术课程设计——在线影评系统.pdf超棒的web应用技术课程设计——在线影评系统.pdf超棒的web应用技术课程设计——在线影评系统.pdf超棒的web应用技术课程设计——在线影评系统.pdf超棒的web应用技术...
Web网页设计期末大作业——壁纸之家网站源码(纯手打,高分项目)Web网页设计期末大作业——壁纸之家网站源码(纯手打,高分项目)Web网页设计期末大作业——壁纸之家网站源码(纯手打,高分项目)Web网页设计期末大...
超棒的web应用技术课程设计——在线影评系统.docx超棒的web应用技术课程设计——在线影评系统.docx超棒的web应用技术课程设计——在线影评系统.docx超棒的web应用技术课程设计——在线影评系统.docx超棒的web应用...
基础-Web应用的性能优化思路——找到瓶颈【转】
Web程序设计——ASP.NET网站开发——PPT+Web程序设计——ASP.NET网站开发——源代码
本书第一部分首先讲述了Nginx服务器的功能、模块管理和进程管理,然后讲述Nginx如何处理请求,在这个基础之上再认识Nginx提供的服务器的名字,Nginx服务器最大的焦点在于高并发和反向代理,在不多却足够使用的模块...
第1章规则1——减少HTTP请求 第2章规则2——实用内容发布网络 第3章规则3——添加Expires头 第4章规则4——压缩组件 第5章规则5——将样式表放在顶部 第6章规则6——将脚本放在底部 第7章规则7——避免CSS表达式 第8...
Web架构——MVC Web架构——MVC Web架构——MVC Web架构——MVC
大流量Web系统的性能优化实践.
《Nginx高性能Web服务器详解》全面介绍了当前Internet上流行的一款开放源代码的Web服务器——Nginx。全书一共分为四大部分,分别从入门、功能、实现和应用等四个方面对Nginx服务器的知识进行完整阐述,从而满足广大...
Web答案.doc————电子版_doc版
《高性能网站建设指南》内容丰富,主要包括减少HTTP请求、Edge Computing技术、Expires Header技术、Gzip组件、CSS和JavaScript最佳实践、主页内联、Domain最小化、JavaScript优化、避免重定向的技巧、删除重复...
第1章Web网站初体验——任务源码.zip
Web2答案.doc————电子版_doc版
基于LoadRunner的Web网站性能测试实施与分析——以小说网站为例.doc
《Web前端设计基础——HTML5、CSS3、JavaScript》张树明版前十章课后习题答案