Web前端性能优化教程01：减少Http请求
性能黄金法则
只有10%-20%的最终用户响应时间花在接收请求的HTML文档上，剩下的80%-90%时间花在HTML文档所引用的所有组件(图片，script，css，flash等等)进行的HTTP请求上。
前言
有关前端性能优化的资料参考于《高性能网站建设》这本书，这一系列的文章可以看作是对这本书的阅读笔记。
改善响应时间的最简单途径就是减少组件的数量，并由此减少HTTP请求的数量。接下来将探讨几个技术实现。
1. 图片地图
图片地图允许你在一个图片上关联多个URL。目标URL的选择取决于用户单击了图片上的哪个位置。
以导航栏为例，当点击图标的时候将打开一个新的窗口。要实现的效果如下图：
我们可以通过使用五个分开的图片，然后让每个图片对应一个超链接。然而这样无疑就产生了5个Http请求，我们的目标是要减少HTTP请求，这里图片地图就可以派上用场了，通过将五个图片合并为一张图片，然后以位置信息定位超链接，这样就把HTTP请求减少为一个了，又可以保证设计的完整性和功能的齐全性，实现代码如下：
- <img usemap="#map1" border=0 src="">
- <map name="map1">
- <area shape="rect" coords="0,0,31,31" href="javascript:alert('Home')" title="Home">
- <area shape="rect" coords="36,0,66,31" href="javascript:alert('Gifts')" title="Gifts">
- <area shape="rect" coords="71,0,101,31" href="javascript:alert('Cart')" title="Cart">
- <area shape="rect" coords="106,0,136,31" href="javascript:alert('Settings')" title="Settings">
- <area shape="rect" coords="141,0,171,31" href="javascript:alert('Help')" title="Help">
- </map>
2. CSS Sprites
CSS Sprites中文翻译为CSS精灵，通过使用合并图片，通过指定css的backgroud-image和backgroud-position来显示元素。
这里重点提一下backgroud-position属性。backgroud-position:x y; x和y可以写负值也可以写正值，我们可以想象图片的左上方为(0,0)，以(0,0)坐标向右是为负数的x轴，以(0,0)坐标向下是为负数的y轴。正值的情况则以图片左下方为(0,0)，向右是为正数的x轴，向上是为正数的y轴。
来看一张来自豆瓣的翻页图片：
可以明显地看到这里组合了4张图片，上面两个按钮是初始显示按钮样式，当鼠标移到上面的时候就变为下面两个按钮样式，实现代码如下：
- <html>
- <head>
- <title></title>
- <style type="text/css">
- .left{ background-image:url(2.png); background-position:0px 0px; width:18px; height:18px; }
- .right{ background-image:url(2.png); background-position:-18px 0px; width:18px; height:18px; }
- .left:hover{ background-position:0px -18px; }
- .right:hover{ background-position:-18px -18px; }
- </style>
- </head>
- <body>
- <div>
- <div class="left"></div>
- <div class="right"></div>
- </div>
- </body>
- </html>
通常情况下，前端切图得到的是一张张小图标，要将其合并为一张图，可以使用专门的工具，例如CSS Sprite Generator，这个工具不仅可以合并图片，同时还可以生成图片的css样式。
与图片地图做一个对比：图片地图是依赖于html实现，CSS精灵依赖于CSS实现，CSS精灵的实现方式更为灵活。
3. 合并脚本和样式表
适当地把多个脚本合并为一个脚本，把多个样式表合并为一个样式表。
注：相关网站建设技巧阅读请移步到建站教程频道。
Web前端性能优化教程01：减少Http请求的更多相关文章
- Web前端性能优化教程06：减少DNS查找、避免重定向
本文是Web前端性能优化系列文章中的第六篇,主要讲述内容:减少DNS查找.避免重定向.完整教程可查看: 一.减少DNS查找 基础知识 DNS(Domain Name System): 负责将域名UR ...
- Web前端性能优化教程09：图像和Cookie优化
本文是Web前端性能优化系列文章中的第九篇,主要讲述内容:图像和Cookie优化.完整教程可查看: 一. 图像优化 图像基础知识 gif: 适用于动画效果,例如提示的滚动条图案 jpg: 是一种使用 ...
- Web前端性能优化教程08：配置ETag
本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:配置ETag.完整教程可查看:Web前端性能优化 什么是ETag? 实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串, ...
- Web前端性能优化教程05：网站样式和脚本
本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:网站样式和脚本代码的放置位置.使用外部javascript和css.完整教程可查看:Web前端性能优化 一.将样式表放在顶部 可视性回馈的重要 ...
- Web前端性能优化教程03：添加Expires头
本文是Web前端性能优化系列文章中的第三篇,主要讲述添内容:加Expires头.完整教程可查看:Web前端性能优化 什么是Expires头? Expires存储的是一个用来控制缓存失效的日期.当浏览器 ...
- Web前端性能优化教程04：压缩组件
本文是Web前端性能优化系列文章中的第四篇,主要讲述内容:压缩组件.完整教程可查看:Web前端性能优化 基础知识 gzip编码:gzip是GUNzip的缩写,是使用无损压缩算法的一种,最早是用于Uni ...
- Web前端性能优化教程07：精简JS 移除重复脚本
本文是Web前端性能优化系列文章中的第七篇,主要讲述内容:精简Javascript代码,以及移出重复脚本.完整教程可查看: 一.精简javascript 基础知识 精简:从javascript代码中 ...
- Web前端性能优化教程02：使用内容分发网络
基础知识 服务器离用户越近,HTTP请求的响应时间将更短. CNAME:别名记录,当多个域名需要指向同一服务器IP,可以使用一个域名做A记录指向该服务器IP,然后让多个域名指向该A记录. ICP:In ...
- 阿里巴巴 web前端性能优化进阶路
Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践.可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化 ...
随机推荐
- Quartz集群配置
先看看quartz的持久化基本介绍: 引用 1 大家都清楚quartz最基本的概念就是job,在job内调用具体service完成具体功能,quartz需要把每个job存储起来,方便调度,quartz ...
- bzoj1082[SCOI2005]栅栏
Description 农夫约翰打算建立一个栅栏将他的牧场给围起来,因此他需要一些特定规格的木材.于是农夫约翰到木材店购 买木材.可是木材店老板说他这里只剩下少部分大规格的木板了.不过约翰可以购买这些 ...
- webpack常用加载器和插件
css文件加载器: style-loader,css-loader,sass-loader,less-loader //style和css加载器必须放在一起使用,且style必须放前面(style!c ...
- HTML 学习笔记 CSS样式（文本）
CSS文本属性可以定义文本的外观 通过文本属性 您可以改变文本的颜色 字符间距 文本对齐装饰文本 对文本进行缩进等等. 缩进文本 把web页面上的段落的第一行缩进,这是最常用的文本格式化效果. css ...
- childNodes的兼容性问题
元素.childNodes:只读 属性 子节点列表集合 标准浏览器下:包含文本和元素类型节点,也会包含非法嵌套的子节点 非标准浏览器下:只包含元素类型节点,ie7下不会包含非法嵌套的子节点 child ...
- .Net Core 控制台程序错误：Can not find runtime target for framework '.NETCoreApp,Version=v1.0' compatible with one of the target runtimes: 'win10-x64, win81-x64, win8-x64, win7-x64'.
.Net Core 控制台程序错误:Can not find runtime target for framework '.NETCoreApp,Version=v1.0' compatible wi ...
- phantomjs模拟登录
最近在做一些公司其他部门系统的后台模拟操作,但由于那边的系统最开始是外包给其他公司开发的,现在那边的开发也不知道有些post的参数是如何生成的.于是想考察下是不是可以把phantomjs这个工具给加进 ...
- 从零开始使用Jenkins来构建Docker容器(Ubuntu 14.04)
当开发更新了代码,提交到Gitlab上,然后由测试人员触发Jenkins,于是一个应用的新版本就被构建了.听起来貌似很简单,duang~duang~duang,我用了是这样,你们用了也是这样,看起来这 ...
- matlab：启动后无法调用工具包
matlab有时候一打开会出现warning,然后任何工具包(包括set path)都执行不了,在网上找到解决方法,存下来备用. 1. 在matlab的command里输入: restoredefau ...
- windows 10磁盘占用100%解决方案
可以试试在 控制面板–管理工具–服务– HomeGroup Listener和HomeGroup Provider禁用. (这2项服务是家庭组共享用的,一般我们也不会去共享什么的.) 效果:我的磁盘是 ...