网站优化之减少HTTP请求

news/2024/5/9 13:39:24/文章来源:https://blog.csdn.net/chinalinuxzend/article/details/3768427
原贴:http://lovelaozang.cn/show-6786-1.html


网站优化之减少HTTP请求

  今天给大家分享一些网站优化的一些经验,如有不对的地方欢迎批评指正或与我讨论。关于网站优化,可以从多个方面说起,比如在网站制作过程中、在服务器架设中。关于HTTP请求,在这里就不多说了,可以到在网上搜一下,了解一下。今天主要说一下从图片地图、CSS Sprites、合并脚本和CSS这三个方面来减少HTTP请求。

  现在介绍几个常用的减少HTTP请求方法:

1、图片地图

举个简单的例子,方便理解:

 

  这是我随便的弄了一张图,在上面的Mozilla Firefox我将地A地址链接到了,相应的一个地址。将下面的Navicat 部分链接到了另外一下地址,可以看一下这块所利用的源代码。

 

XML/HTML代码
  1. <img height="153" width="75" src="http://lovelaozang.cn/uploads//date_200901/0c93907f87b99831b61b5046eea05220.jpg" alt="" usemap="#Map" />  
  2. <map id="Map" name="Map">  
  3. <area href="http://lovelaozang.cn/show-6740-1.html" coords="5,2,65,65" shape="rect" />  
  4. <area href="http://lovelaozang.cn/show-581-1.html" coords="35,108,31" shape="circle" /> </map>  

 

利用一张图片链接到了多少地址,此时你可能会有疑问:图片放在一起不变大了吗?是的,的确是大了。但根据测试,获取图片地址的时间比获取为每个图片使用分离的超链接时间快56%

2、CSS Sprites

  跟图片类似,CSS Sprites也是可以合并图片的,一起来分析一下六间房主页所写的部分CSS

 

CSS代码
  1. .fontHeader .more a,.idxSideBox .more a ,#hostFav .more a {float:rightright;padding-right:12px;background-positionrightright -395px !important;background:url(http://r.6.cn/imges/new_6/idx_v5.png) no-repeat rightright -396px;color:#FD3337;  
  2. }  

 

下面是此段CSS所调用的图片

http://r.6.cn/imges/new_6/idx_v5.png

说一下这样做的优点:通过合并图片的方式,减少了HTTP请求,降低了下载量。也许会有为类似上面的疑问,再做一下补充,这样做实际上,合并后的图片会比分离的图片的总和要小,这是因为它降低了图片自身的开销[如颜色表、格式信息,等等]

3、合并脚本和CSS

这个像在编程的过程中所用的到公共类一样,也举个例子:北京的交通大家都知道,不管有车没车都是堵。在这里也号召一下大家多乘用公共交通工具。网站 也是如此,多用共用js和CSS做到的不仅仅是减少了HTTP请求,还美化了自己的代码。何乐而不为呢?具体怎么去写,就要靠在平常的代码管理与敲的过程 中去提升了。

  这些只是减少HTTP请求的一些简单方法,只是起一个抛砖引玉的效果,没有做不到,只有想不到哦!欢迎大家经验的分享与交流。


如需转载,请注明:转载自老臧's blog [ http://lovelaozang.cn/show-6786-1.html ]

图片附件:
大小: 3.22 K
尺寸: 75 x 153
浏览: 0 次
点击打开新窗口浏览全图

Tags: 网站优化, 网站架构


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_831755.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

10个精选免费网站分析工具

原贴&#xff1a;http://www.cnbeta.com/articles/75109.htm10个精选免费网站分析工具 感谢zhengyongmw的投递 新闻来源:译言 在本文中&#xff0c;你将发现10个精选的免费web分析工具和应用程序&#xff0c;他们可以帮助你收集和分析与你网站内容有关的数据。 什么是Web分析学…

学习豆瓣好榜样--网站架构

原贴:http://www.dbanotes.net/arch/douban_arch.html 学习豆瓣好榜样--网站架构 这次的 QCon 会议&#xff0c;《豆瓣网技术架构的发展历程》这个议题差不多是最受关注的。洪强宁在演讲开始告诫大家期望值不要太高&#xff0c;我还是相信不会有人觉得失望的。 先说几句题外话&…

小规模低性能低流量网站设计原则

原贴&#xff1a;http://www.dbanotes.net/arch/small_site_arch.html 小规模低性能低流量网站设计原则 作者: Fenng | 可以转载, 转载时务必以超链接形式标明文章原始出处和作者信息及版权声明 网址: http://www.dbanotes.net/arch/small_site_arch.html 到处都是什么大规模啊…

使用Varnish代替Squid做网站缓存加速器的详细解决方案[原创]

原贴:http://blog.s135.com/post/313/ 使用Varnish代替Squid做网站缓存加速器的详细解决方案 大 | 中 | 小 [2007-11-29 22:11 | by 张宴 ] [文章作者&#xff1a;张宴 本文版本&#xff1a;v1.2 最后修改&#xff1a;2008.01.02 转载请注明出处&#xff1a;http://blog.s135.…

简约而不简单:网站着陆页的设计(Landing Page Design)

着陆页是一个在线营销的概念&#xff0c;是指当访客点击一个搜索引擎优化的搜索结果进入的第一个页面或“着陆”页面。这是一个重要的页面&#xff0c;它和提供的产品或服务的广告有点类似&#xff0c;提供了与产品相关的精确的信息&#xff0c;告诉客户可以购买的产品或服务。…

大型高并发高负载网站的系统架构[转载]

鄙人先后在CERNET做过拨号接入&#xff0c;在Yahoo&3721搞过搜索前端&#xff0c;在猫扑处理过mop.com的架构升级&#xff0c;在6.cn视频网站从事开发工作&#xff0c;还在多年的工作中接触和开发过不少大中型网站的模块&#xff0c;因此在大型网站应对高负载和并发的解决方…

一步步学习SPD2010--第八章节--理解工作流(7)--创建网站工作流

一步步学习SPD2010--第八章节--理解工作流&#xff08;7&#xff09;--创建网站工作流 在之前版本的SP中&#xff0c;所有工作流都是以文档为中心。然而&#xff0c;不是所有的工作流都像那样。为了应对其他情况&#xff0c;SP2010现在支持网站工作流。网站工作流在SP网站上下文…

Hexo博客网站再配置

这两天整理网站方面的事&#xff0c;本地IIS部署&#xff0c;个人网站&#xff0c;发现我的hexo做的个人网站实在很单调&#xff0c;于是找来资料做进一步的配置。 一、网站图标 看一下hexo\themes\modernist\layout\_partial\head.ejs&#xff0c;找到这句&#xff1a; <li…

[前端]分享一个Bootstrap可视化布局的网站

如果你像我一样&#xff1a;是个前端渣&#xff0c;能看懂css和html&#xff0c;略懂Bootstarp&#xff0c;懒&#xff01; 当你每次都想独立完成一个web页面而不知道从哪里下手的时候&#xff0c;那么下面的这个网站&#xff0c;就是你所以需要的&#xff01; http://www.runo…

unity3D 在官方网站 下载资源 路径存储问题

第一步打开 官网 https://store.unity3d.com/account/users 或者 在unity3D软件中&#xff0c;单击 window 再单机 asset store 即可进入商店&#xff0c;在商店中可以找到免费的学习案例&#xff0c;如&#xff1a;Unity Sample UI&#xff0c;在搜索栏中输入Unity Sample …

你必须知道的,常用的机器学习相关网站!!!

很多人因为人工智能的大火&#xff0c;转变了职业规划或研究方向&#xff0c;开始了学习相关领域的知识之路&#xff0c;虽说人工智能领域应用很广泛&#xff0c;涉及到的知识的也很广泛&#xff0c;但机器学习作为基础知识是每个人必须要了解的知识。 机器学习的相关资料相信…

网站接入短信平台验证流程

以网站注册用户为例 前端页面,此处用到volicity前端验证,暂时不做深入 <form action"$!webPath/register_finish.htm" method"post" name"theForm" id"theForm"><table width"900" border"0" cellpaddin…

不知名网站编程(一)

不知名网站编程记录&#xff08;一&#xff09; function place(a) {c.fillStyle "red";c.fillRect(a,0,20,20);c.fillStyle "green";c.fillRect(a20,20,20,20);c.fillStyle "blue";c.fillRect(a40,40,20,20); }var a 0; while(a<200) {…

不知名网站编程(二)

不知名网站编程记录&#xff08;二&#xff09; var a 0; var b 0; while(b<6) {c.fillStyle "blue";c.fillRect(12*a,12*a,240-24*a,240-24*a);a 1;c.fillStyle "orange";c.fillRect(12*a,12*a,240-24*a,240-24*a);a 1;b 1; }var a 0; var b …

不知名网站编程(三)

不知名网站编程记录&#xff08;三&#xff09; var a 0; var b 0; do { c.fillStyle rgb(0,0,a);c.fillRect(b,b,20,20);a a 60;b b 20; }while(b<80);var a 0; var b 0; do {c.fillStyle rgb(255-1.2*a,255-0.6*a,a);c.fillRect(b,b,200-2*b,200-2*b);a a 6…

不知名网站编程(四)

不知名网站编程记录&#xff08;四&#xff09; var a 0; var b 0; do {c.fillStyle rgb(128a,0,128-a);c.fillRect(b,b,200-2*b,200-2*b);a a 32;b b 20; }while(b<80);var a 0; var b 100; do {c.fillStyle rgb(255-a,0,0);c.fillRect(0,0,b,b);a a 63;b b …

基于jsp技术的校园二手交易网站

【项目介绍】基于jsp的校园二手商品交易网站系统使用jsp技术进行开发&#xff0c;项目主要实现了一整套的校园二手交易逻辑&#xff0c; 主要功能如下&#xff08;包括但不限于&#xff0c;只列出主要功能&#xff09;&#xff1a;管理员模块 |-----用户管理 |-----商品管…

Windows 2012 R2版本下部署IIS网站

Windows 2012 R2是一个比较稳定的服务器版本&#xff0c;本文分享一篇在Windows 2012 R2版本下搭建IIS项目的操作流程。 1. 安装IIS Web服务器 打开远程桌面->控制面板->程序和功能->打开或关闭Windows功能->添加角色和功能 安装您的实际需求勾选必要的安装&#x…

技术文章精美配图模板网站推荐-创客贴

最近上海的风景很好&#xff0c;有清晨的微风、有蓝天白云&#xff0c;小编被大好河山迷住了&#xff0c;只顾着欣赏美景佳人&#xff0c;今天开始上班&#xff0c;把思绪和心情收回来&#xff0c;得花一些时间来写写东西&#xff0c;记录记录生活。我经常逛知乎&#xff0c;也…

手把手教你查看网站遭受到的Web应用攻击类型

常见Web应用攻击类型有&#xff1a;webshell、SQL注入、文件包含、CC攻击、XSS跨站脚本攻击、敏感文件访问、远程命令、恶意扫描、代码执行、恶意采集、特殊攻击、其他攻击十二种攻击类型。 如何查看网站遭受的Web应用攻击&#xff1f; &#xff08;请参照以下步骤&#xff1a;…