WPO基础：减少HTTP请求

标签： WPO网站性能优化 http请求 WPO wpo基础 性能优化 | 发表时间：2012-03-16 09:52 | 作者：谭砚耘
出处：http://www.webusability.cn

减少HTML文档的组件数量，也因此减少了HTTP请求的数量，从而节约了载入网页的时间。《高性能网站建设指南》中介绍到四种方法：

  • 使用图片地图
  • 采用CSS Sprites
  • 采用内联图片
  • 合并CSS样式表和JS脚本

对于网店尤其是Zen-Cart网店来说，最后一种方法是很有效的。因为Zen-Cart为了模块化和易读性考虑，将样式表和脚本分的很细，本来一个CSS文件搞掂的，可能会被划分成10个文件，并且分布在不同目录中。减少http请求的最快的方法，就是合并脚本和样式表，可以显著节省页面打开时间。

 

以Zen-Cart 1.39版本为例，下面是<head>区常见的一段代码

<link rel=”stylesheet” type=”text/css” href=”includes/templates/theme_name/css/stylesheet.css” /><link rel=”stylesheet” type=”text/css” href=”includes/templates/theme_name/css/stylesheet_boxes.css” /><link rel=”stylesheet” type=”text/css” href=”includes/templates/theme_name/css/stylesheet_css_buttons.css” /><link rel=”stylesheet” type=”text/css” href=”includes/templates/theme_name/css/stylesheet_main.css” /><link rel=”stylesheet” type=”text/css” href=”includes/templates/theme_name/css/stylesheet_tm.css” />

<link rel=”stylesheet” type=”text/css” media=”print” href=”includes/templates/theme_name/css/print_stylesheet.css” />

上述形式如 stylesheet*.css的6个文件，完全可以统一成一个 stylesheet.css 文件。这样就减少了5次http查询。

 

下面我们对 BuyOnMe.com 做了一个合并CSS样式表文件的实验。

 

网站首页共有四个可合并的CSS文件，前三个出现在<head>区，最后一个出现在网页中

<link rel=”stylesheet” type=”text/css” href=”includes/templates/zj_orange/css/style_jscroller.css” /><link rel=”stylesheet” type=”text/css” href=”includes/templates/zj_orange/css/stylesheet.css” /><link rel=”stylesheet” type=”text/css” href=”includes/templates/zj_orange/css/stylesheet_css_buttons.css” />……<link rel=”stylesheet” type=”text/css” href=”includes/templates/zj_orange/css/buyonme_categories.css” />

 

时间瀑布图显示需要204ms打开前面三个CSS文件，然后需要额外的96ms打开最后一个css文件。

 

图6-29：CSS合并前的时间瀑布

 

 

我们进入 includes/templates/zj_orange/css/ 目录，将三个CSS文件合并为一个文件stylesheet_all.css。

 

网站首页在合并后只有一个的CSS文件stylesheet_all.css

<link rel=”stylesheet” type=”text/css” href=”includes/templates/zj_orange/css/stylesheet_all.css” />

 

时间瀑布图显示打开stylesheet_all.css也只需要200ms，而这是四个CSS文件的合体。

图6-30：CSS合并后的时间瀑布

 

我做了十几次测试，节省的时间从90ms到500ms，不过大多数都维持在100ms左右。 : ) 似乎在性能上，只节省了100ms，性能提升的比率并不大。而实际上浏览器和网络环境千差万别。在某些情况下，打开4个http请求，也就意味着有4次机会遇到网络不稳定、浏览器发神经或者其他莫名其妙的延迟因素。所以合并CSS减少http请求，好处大于坏处。

 

作者: 谭砚耘@用户体验与可用性设计-科研笔记

版权属于: 谭砚耘 （ TOTHETOP至尚国际 ）

版权所有。转载时必须以链接形式注明作者和原始出处

http://www.webusability.cn/reduce-http-request-howto-wpo-1300/

如果你希望与作者交流，请发送邮件到 tanyanyun/at/163.com 别忘了修改小老鼠

 

 

相关 [wpo 基础 http] 推荐：

WPO基础：减少HTTP请求

- - 用户体验与可用性设计
减少HTML文档的组件数量，也因此减少了HTTP请求的数量，从而节约了载入网页的时间. 《高性能网站建设指南》中介绍到四种方法：. 采用CSS Sprites. 合并CSS样式表和JS脚本. 对于网店尤其是Zen-Cart网店来说，最后一种方法是很有效的. 因为Zen-Cart为了模块化和易读性考虑，将样式表和脚本分的很细，本来一个CSS文件搞掂的，可能会被划分成10个文件，并且分布在不同目录中.

HTTP基础

- - ITeye博客
HTTP的结构主要包括下面几个要点：. HTTP的版本主要有1.0,1.1 和更高版本.    1.1 及以上版本允许在一个TCP连接上传送多个HTTP协议，1.0能 .    1.1 及以上版本多个请求和响应可以重叠，1.0不能.    1.1 增加了很多的请求头和响应头.     一个请求行，若干小心头，以及实体内容，其中的一些消息头和实体内容是可选的，消息头和实体内容需要空行隔开.

WPO实例：纯文字网站的前台和后台WPO

- - ITeye博客
帮一个朋友的网站  www.dirs.cn 做WPO优化. 这个网站提供DNS解析、WHOIS查询、MX和A记录查询等免费服务. 为什么要做WPO呢，因为网站经常出现很慢的情况，有的时候网页打不开. 笔者使用Pagespeed和YSLow工具查询，得分分别是91分和84分，已经是比较高的得分. 再分析一下网页组件，几乎全是文字，图片非常少.

web基础-web工作原理，http协议，浏览器缓存

- - 浏览器 - 互联网 - ITeye博客
4，cookie和session. 平时用浏览器，输入网址后回车，页面响应我们想要浏览的内容，简单操作的背后蕴涵了什么原理. 当输入url回车后，客户端（浏览器）会去请求DNS服务器，通过DNS获取域名对应的IP地址，然后通过这个地址找到对应的服务器，要求建立TCP连接，建立连接，客户端发送httpRequest（请求包）后，服务器接收并开始处理请求，调用自身服务，返回httpResponse（响应包），客户端收到响应包后开始渲染body主体，等到全部接收，断开与该服务器端的TCP连接.

HTTP Headers 入门

- johnny - Time Machine
非常感谢 @ytzong 同学在twitter上推荐这篇文章，原文在此. 本文系统的对HTTP Headers进行了简明易懂的阐述，我仅稍作笔记. 什么是HTTP Headers. HTTP是“Hypertext Transfer Protocol”的所写，整个万维网都在使用这种协议，几乎你在浏览器里看到的大部分内容都是通过http协议来传输的，比如这篇文章.

HTTP Header 详解

- - 博客园_Ruby's Louvre
HTTP（HyperTextTransferProtocol）即超文本传输协议，目前网页传输的的通用协议. HTTP协议采用了请求/响应模型，浏览器或其他客户端发出请求，服务器给与响应. 就整个网络资源传输而言，包括message-header和message-body两部分. 首先传递message- header，即 http header消息.

HTTP/2 in Netty

- -
Here, we created a context for the server with a JDK SSL provider, added a couple of ciphers, and configured the Application-Layer Protocol Negotiation for HTTP/2..

HTTP负载测试

- - 博客 - 伯乐在线
英文原文： ON HTTP LOAD TESTING 来源： oschina. 有很多人在谈论HTTP服务器软件的性能测试，也许是因为现在有太多的服务器选择. 这很好，但是我看到有人很多基本相同的问题，使得测试结果的推论值得怀疑. 在日常工作中花费了很多时间在高性能代理缓存和源站性能测试方面之后，这里有我认为比较重要的一些方面来分享.

HTTP断点续传

- - CSDN博客互联网推荐文章
要实现断点续传的功能，通常都需要客户端记录下当前的下载进度，并在需要续传的时候通知服务端本次需要下载的内容片段. HTTP1.1协议（RFC2616）中定义了断点续传相关的HTTP头 Range和Content-Range字段，一个最简单的断点续传实现大概如下：.   1.客户端下载一个1024K的文件，已经下载了其中512K.

http-kit 1.2 发布

- - 开源中国社区最新新闻
Http-kit 是主要由Java 和Clojure开发，为Clojure定制的零依赖的Http lib，包括异步的高性能HTTP Server 和 HTTP Client. 在普通的PC上进行性能测试时，http-kit server 每秒能处理数万个请求. 修复处理文件上传时，content-type没能正确处理.