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. 合并脚本和样式表

适当地把多个脚本合并为一个脚本,把多个样式表合并为一个样式表。

基础知识

服务器离用户越近,HTTP请求的响应时间将更短。 CNAME:别名记录,当多个域名需要指向同一服务器IP,可以使用一个域名做A记录指向该服务器IP,然后让多个域名指向该A记录。 ICP:Internet Content Providor。 DNS:Domain Name System。

什么是内容分发网络?

CDN(Content Deliver Network)是一组分布在多个不同地理位置的Web服务器,通过将网站的资源发布到最接近用户的网络”边缘“,供用户就近取得所需内容。CDN可以看作一种缓存代理,主要用于对静态资源(如图片,css,js等)的缓存。

CDN的网络架构

CDN的网络架构主要分为中心和边缘两个部分,中心服务器主要负责DNS解析和全局负载均衡;而边缘服务器指异地节点,作为CDN分发的载体,包括负载均衡和高速缓存。边缘服务器的负载均衡负责缓存内容的负载均衡,保证节点的工作效率,同时还负责与中心服务器通信,实现整个系统的负载均衡。边缘服务器的高速缓存负责存储从客户源服务器获取的资源,并提供给本地用户访问。

CDN的工作原理

除了一些大型互联网公司拥有自己的CDN,其他公司基本都会选择CDN运营商合作。

所以作为ICP,需要把域名解释权交给CDN运营商,操作时ICP修改自己的域名解析部分,一般用CNAME的方式,将自己的静态资源域名指向一个CDN提供的CNAME。

而作为CDN运营商,需要对CNAME提供专用DNS解析,同时需要维护客户服务器的域名和IP地址映射列表。

CDN工作流程如下:

1.浏览器获得需要访问的资源的域名; 2.通过域名解析得到该域名指向CDN的一个CNAME; 3.为了获得IP地址,需要对CNAME进行域名解析,这时请求就会被发送到CDN的中心服务器,全局负载均衡通过预先设定的规则,同时根据用户访问的地理位置信息,把最合适的边缘服务器IP地址返回; 4.浏览器获得IP地址后,就向边缘服务器发出请求; 5.边缘服务器根据访问域名,首先搜索缓存,查看资源是否存在,存在则直接返回资源给浏览器,直接完成整个资源请求过程,否则就根据缓存内部的DNS解析得到资源实际IP地址(即客户的服务器IP地址),向该IP地址发起资源请求; 6.边缘服务器向客户服务器请求资源成功后,就把该资源加入本身的高速缓存中,并把资源发送给用户。

CDN的简单应用

其实CDN的使用并没有和我们想象中那么遥远,JQuery应该是当今Web开发领域使用最为广泛的js框架之一,很多时候我们的网站都需要引用一个jquery.min.js的引用,我们可以将这个js文件存储在自己的服务器,或者更好的选择:使用大公司的CDN服务提供的jquery.min.js. 微软和google都提供了jquery的CDN免费服务,你只需做的事情就是在项目中引用它们,就能享受CDN带来的便利。

原文发布于微信公众号 - 我为Net狂(dotNetCrazy)

原文发表时间:2016-11-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏zhisheng

Python爬虫入门二之爬虫基础了解

1.什么是爬虫 爬虫,即网络爬虫,大家可以理解为在网络上爬行的一直蜘蛛,互联网就比作一张大网,而爬虫便是在这张网上爬来爬去的蜘蛛咯,如果它遇到资源,那么它就会抓...

3386
来自专栏玩转JavaEE

SpringBoot+WebSocket实现在线聊天(一)

本文是vhr系列的第十四篇,项目地址:https://github.com/lenve/vhr 在线聊天功能是为了方便HR快速交流,由于HR人数有限,因此这...

3203
来自专栏腾讯大数据的专栏

那些年,我们一起走过的 iOS 推送的坑

本文针对iOS推送接入过程中遇到的一个实际案例,提出了iOS推送排查问题的思路,在解决该问题的基础上,更给出了通用的iOS推送自测的检查路径。

6080
来自专栏Android机动车

安卓优化之apk瘦身(27.7M--&gt;17.5M)

apk瘦身作为优化的一部分,它的大小决定安装的时间与占用的内存,进行针对性的瘦身也能够提高用户体验,下面就看我怎样将一个27.7M的安装包减肥到17.5M,足足...

1004
来自专栏web开发

javascript设计模式——发布订阅模式

前面的话   发布—订阅模式又叫观察者模式,它定义对象间的一对多的依赖关系,当一个对象的状态发生改变时,所有依赖于它的对象都将得到通知。在javascript开...

8566
来自专栏大数据和云计算技术

操作系统底层技术——CPU亲和性

image.png 头图是加拿大lake simcoe自然风光,非常漂亮,基本没有中国游客,适合深度游。 这是操作系统底层技术第二篇,前一篇是《Codegen技...

3119
来自专栏实用工具入门教程

如何部署 NTP 服务器

NTP 全称为 Network Time Protocol ,中文翻译为网络时间协议,1985年就已经被提出,旨在缩短互联网上所有计算机设备与 UTC 的时间差...

3631
来自专栏数据科学与人工智能

【Python环境】Python爬虫入门(2):爬虫基础了解

1.什么是爬虫 爬虫,即网络爬虫,大家可以理解为在网络上爬行的一直蜘蛛,互联网就比作一张大网,而爬虫便是在这张网上爬来爬去的蜘蛛咯,如果它遇到资源,那么它就会抓...

2749
来自专栏bboysoul

conky主题Harmattan安装和介绍

Harmattan是一款conky主题,安装和使用都很简单,而且提供了很多样式,方便你选择。

1151
来自专栏互联网开发者交流社区

SEO-搜索引擎高级搜索指令

1585

扫码关注云+社区