YAOHAIXIAO.COM

HTML(5),CSS(3),JavaScript,DOM,Ajax,JSON,Front-end technologies & Yaohaixiao

热门标签:JavaScript Performance 前端开发 前端性能优化 原创

Rss

Home » Frontend » Performance » 前端性能优化:Make fewer HTTP requests

前端性能优化:Make fewer HTTP requests

作为前端工程师,一个重要的职责就是要做前端性能优化。今天开始我就带着大家对照YSlow的前端性能优化的指标,逐个经行讲解。今天我们要介绍的就是:Make fewer HTTP requests(尽量减少请求的数量)。

如何查看页面的 HTTP requests 的数量?

在讲解具体怎么减少 HTTP requests 之前,我们要知道如何查看页面的 HTTP requests 的数量?这里我先给出一个Firebug的网络请求的视图给大家看看,讲解起来会更加直观。

YAOHAIXIAO.COM 首页的网络请求视图

YAOHAIXIAO.COM 首页的网络请求视图

是的,HTTP requests 的数量我们很难通过肉眼观察来计算,我们需要借助网络流量的分析工具,例如我这里要介绍的Firebug这款工具。

在Firefox浏览器中安装 Firebug

上图是截取的Firefox浏览器的Firebug插件中的网络视图的截图。要获得这个视图,首先要在安装Firebug插件。具体安装过程如下:

点击在菜单栏的“工具”菜单选中“附加组件”,或者(默认安装Firefox浏览器是不显示菜单栏)点击浏览器左上角的“Firefox”菜单,选择“附加组件”。开启“附加组件”窗口的快捷键是”Ctrl+Shift+A”。这是我们可以看到“附加组件管理器”窗口,如下图:

“附加组件管理器”窗口

“附加组件管理器”窗口

在搜索框输入Firebug,按Enter键。等待一会,在搜索结果中就会显示Firebug插件的信息。点击“安装”按钮,开始安装。安装完成后,点击“立即重新”,重新启动后,就会在浏览器的地址栏后面看到Firebug插件的启动按钮,如下图:

Firebug插件的启动按钮

Firebug插件的启动按钮

启动 Firebug插件的网络视图功能

点击Firebug插件的按钮,或者使用快捷键 F12就会启动Firebug插件。不过默认安装时,网络视图功能是没有打开的,选中“网络”标签,然后点击“启用”。即可得到打开网页的网络流量视图,如下图:

YAOHAIXIAO.COM 首页的网络请求视图

YAOHAIXIAO.COM 首页的网络请求视图

HTTP requests 都包括哪些元素?

现在我们就对照这个网络流量的视图可以很清楚的看到,YAOHAIXIAO.COM首页在空缓存情况下的HTTP requests数量是19个。Firebug工具的网络分析工具把HTTP requests包含的内容也很清晰的给出了,HTTP requests元素包括:HTML文档、CSS文件、JavaScript文件、XHR(Ajax请求)、图片、插件、(音频、视频)媒体、字体。其中插件和字体是新版本的Firebug新增加的HTTP requests元素。(我们知道CSS3增加了@font-face,可以在线加载用户本地没有的字体,而这个在以前是做不到,用户浏览器只能加载本地的字体库。)

YAOHAIXIAO.COM 首页的网络请求视图

YAOHAIXIAO.COM 首页的网络请求视图

另外,在这里我要介绍的一个定义就是“空缓存情况下的HTTP requests数量”,它指的是在用户第一次加载一个页面时的HTTP requests数量。而以后再次访问同一个页面,HTTP requests数量通常会比这时的数量少。这是因为我之后要介绍的前端性能优化的另一个指标: Add Expires headers,也就是设置静态资源的缓存后,浏览器在下次访问同一个页面时,对设置缓存的资源会直接调用浏览器本地缓存,而不再向服务器请求。例如在此请求YAOHAIXIAO.COM首页,HTTP requests数量就只有15了。

HTTP requests数量的计算

好了,回到查看HTTP requests数量,我们对照上图,可以看到HTTP requests数量的计算是计算的不重复的请求元素的数量。例如YAOHAIXIAO.COM首页no-photo.gif图片出现了多次,但是在计算HTTP requests数量的时候只算作一个HTTP requests。其实,从上面的图中我们也可以清晰看到,HTTP requests没有重复的元素

YAOHAIXIAO.COM 首页的网络请求视图

YAOHAIXIAO.COM 首页的网络请求视图

从上图我们也可以看到,这19个HTTP requests的体积,以及页面加载完毕所用的时间。我们做Make fewer HTTP requests的优化,就是为了减少页面加载完毕所用的时间。当然,我们以后也会介绍如何压缩HTTP requests的体积,来优化前端性能。

好了,知道了如何查看HTTP requests 的数量,知道了HTTP requests元素都包括哪些内容和HTTP requests数量的计算方法,现在我们要了解HTTP requests数量为对前端性能带来哪些影响,也就是为什么我们要Make fewer HTTP requests?

为什么要 Make fewer HTTP requests?

YAHOO 的 YSlow 文档对于这个问题是这么解释的:

80% of the end-user response time is spent on the front-end. Most of this time is tied up in downloading all the components in the page: images, stylesheets, scripts, Flash, etc. Reducing the number of components in turn reduces the number of HTTP requests required to render the page. This is the key to faster pages.

80% 的(页面)响应时间都在前端,而这其中绝大部分的时间就是等待这些HTTP requests元素加载并执行。所以减少HTTP requests数量,减少这些元素加载运行的时间就成了优化前端性能的关键点。

其实,如果有一些服务器知识的朋友也知道,我们的Web服务器(IIS\Apache\Nginx.etc)每秒处理HTTP requests请求数量的能力也是有限的。如果一个访问量比较大的站点,例如 Taobao 这样的站点,如果页面HTTP requests过多,服务器的压力是会比较大的,为了应付巨大的请求量,可能就要花更多的经费来扩展服务器来做负载均衡,以保证服务器能够及时相应用户的请求。而如果前端工程师能够合理的优化,将页面请求数降到最低,就可以剩下那些用来购买服务器的维护经费了。也就是说,做好前端性能优化,Minimize HTTP Requests 就可以有效的降低运行成本,是可以为公司带来经济效益的。这也是前端工程师工作的意义所在。

Anyway,Make fewer HTTP requests 对于优化前端性能来说是非常重要的了。那么如何Make fewer HTTP requests呢?

如何 Make fewer HTTP requests?

还是先来看看 YSlow 的建议吧:

Combined files are a way to reduce the number of HTTP requests by combining all scripts into a single script, and similarly combining all CSS into a single stylesheet. Combining files is more challenging when the scripts and stylesheets vary from page to page, but making this part of your release process improves response times.

CSS Sprites are the preferred method for reducing the number of image requests. Combine your background images into a single image and use the CSS background-image and background-position properties to display the desired image segment.

Image maps combine multiple images into a single image. The overall size is about the same, but reducing the number of HTTP requests speeds up the page. Image maps only work if the images are contiguous in the page, such as a navigation bar. Defining the coordinates of image maps can be tedious and error prone. Using image maps for navigation is not accessible too, so it’s not recommended.

Inline images use the data: URL scheme to embed the image data in the actual page. This can increase the size of your HTML document. Combining inline images into your (cached) stylesheets is a way to reduce HTTP requests and avoid increasing the size of your pages. Inline images are not yet supported across all major browsers.

YSlow 给出了4点建议:打包合并文件(合并CSS和JS文件),使用 CSS Sprites 合并背景图片、使用图像地图、Inline images 也就是使用data URI嵌入图片数据(浏览器的兼容性还不太好)。

打包合并文件,这个很容易做到。比如我们网页中包含3个CSS文件,reset.css、grids.css和layout.css。把所有的CSS代码按原先加载的顺序都添加到1个CSS文件中。这样我们就将原先的3个HTTP requests,减少到了1个,少了2个HTTP requests。JavaScript 文件也是一样,按照JS文件的依赖关系,按顺序合并到一个文件中。这里要注意的是:代码合并时按照原先的加载顺序合并代码。而且,我们在合并代码前,往往都是要压缩代码的,关于代码的压缩,可以看看《隐藏 JavaScript 源代码?不,你只能混淆和压缩JavaScript源代码》。

CSS Sprites,的原理就是将多个背景图片按照合理的显示位置整合到一个图片文件中,不同的HTML元素使用相同的background-image的url地址,而使用不同的background-position属性定义不同位置来显示不同的图片区域。例如YAOHAIXIAO.COM的CSS Sprites图片:

YAOHAIXIAO.COM 的 CSS Sprites图片

YAOHAIXIAO.COM 的 CSS Sprites图片

一般CSS Sprites图片都是使用的GIF或PNG格式的图片,不同区域用适当的透明空间来隔开,以便可以适应页面不同区域的不同背景颜色。处理的好的CSS Sprites,可以减少很多的HTTP requests数量,而且集中了多个图片的CSS Sprites图片的体积甚至比多个文件相加的体积更小。具体的说明,还是看看 ALISTAPART的《CSS Sprites: Image Slicing’s Kiss of Death》。

Image maps 也就是我们长说的图片热区链接,直接在图片上使用热区链接。不推荐的做法,我们平时也很少用。

Inline images是使用Base64的data URI地址来替换传统的img标签的src地址。例如这样的:

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/
/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp
V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" 
width="16" height="14" alt="embedded folder icon"/>

可以看到data URI的地址要比传动的URL地址长,所以HTML页面的体积会交以前有增大,但是图片数据作为了HTML页面本身一部分,以此不再向服务器发出HTTP请求。但目前Inline images的支持度,浏览器的兼容性还不好。如果你的网站不需要针对IE些列的浏览器兼容,可以是试试。

DataURL相关的文档:Inline Images with Data URLs》、《Data URIs explained》、《Automatic data URI embedding in CSS files》、《Data URIs make CSS sprites obsolete》、《CSS Sprites vs. Data URIs: Which is Faster on Mobile?》、《data URIs》。

DataURL地址生成工具:DataURL.net

其实,除了上面提到的4个方法之外,另外的一个方法就是我前面提到的设置缓存:Add Expires headers,因为它将帮助你在用户在此访问相同页面时,减少不少的HTTP requests。

好了,关于 Make fewer HTTP requests 的话题就到这里了。如果有什么遗漏和错误的地方也请大家指正。

声明:本文采用BY-NC-SA协议进行授权。转载请注明转自:前端性能优化:Make fewer HTTP requests

« »

发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(Spamcheck Enabled)