看了关于页面请求及响应的整个流程图，感觉很有意思，帖上来大伙看看.

一品梅 2008-05-27 01:11:49

...全文

606 23 打赏收藏转发到动态举报

写回复

用AI写文章

23 条回复

切换为时间正序

请发表友善的回复…

发表回复

newKoala 2008-05-28

打赏
举报

MARK一下
然后仔细看看～～～

tantaiyizu 2008-05-28

打赏
举报

great

clal 2008-05-27

打赏
举报

mark

netfeel2008 2008-05-27

打赏
举报

感谢

小D2013 2008-05-27

打赏
举报

mark

pinejeely 2008-05-27

打赏
举报

好多图片啊

一品梅 2008-05-27

打赏
举报

不知道，我只是把一篇文章翻译了一下，呵呵。
小灰，还有那个处理图片的问题，怎么找到位置啊

比如：background-position:0px -50px;}

原始整图

在网页中显现：

怎么你从你制作的大图中确定坐标

翻译完发现不会，呵呵，菜菜啊...

iuhxq 2008-05-27

打赏
举报

你这个是IIS7吧?

一品梅 2008-05-27

打赏
举报

减少请求和响应包的大小：

压缩基于text的文件ie.HTML, JAVASCRIPT, CSS file(s).
IIS
In IIS Manager, double-click the local computer, right-click the Web Sites folder > Properties > Service > HTTP compression section:

Please note: You may also need to configure Web Service Extension and Metabase. (You can configure for certain text-based (*.htm, *.css, *.js etc) files.)

AJAX

一品梅 2008-05-27

打赏
举报

5.避免动画与flash
6.背景尽量用颜色而不用图片
7.不要把图片放在服务器的多个目录上，（避免在两个请求中，得不到最优从第一次缓存图片）
8.在下载大图片时用进度条掩饰，这是个小把戏，但不会引起用户的反感.
9.尽量使用小于10kb的一张图片，尽量不要把大图裁成小图，因为这样会增加request的次数。
使用CSS Sprites或image maps代替
可以把零碎的一些小图拼成一张大图，然后使用css sprites或image maps

body

	{font: 10pt Arial;}

#nav li {

	display:inline;

 	list-style-type:none;

	font-size:1em;

	font: 12pt Arial;

}



#nav li a {

	background-image:url('image1.gif');

	background-repeat:no-repeat;

	padding:10px 35px;

	line-height:40px;

}



#nav li a.option1 {background-position:0px 0px;}

#nav li a:hover.option1 {background-position:0px -50px;}



#nav li a.option2 {background-position:0px -100px;}

#nav li a:hover.option2 {background-position:0px -150px;}



#nav li a.option3 {background-position:0px -200px;}

#nav li a:hover.option3 {background-position:0px -250px;}



#nav li a.option4 {background-position:0px -300px;}

#nav li a:hover.option4 {background-position:0px -350px;}

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>CSS Sprites - by Assad Baig</title>

<link rel="stylesheet" type="text/css" href="Sprites.css"/>

</head>

<body>

<ul id="nav">

	<li><a class="option1" href="#">Print</a></li>

	<li><a class="option2" href="#">Add to Favorites</a></li>

	<li><a class="option3" href="#">Email to a Friend</a></li>

	<li><a class="option4" href="#">Download</a></li>

</ul>

<br />

<br />

<br />

<br />

<br />

<p>(Roll your mouse over the links to see image transitions.)</p>



<p>Please note:

<ul>

	<li><b>Only 1 image is used</b> to display 4 gray icons + 4 mouse over colored icons.</li>

	<li>One gif file means only <b>One HTTP request</b></li>

	<li>Yahoo uses similar technique (<a href="EXAMPLE_YAHOO_10MAY2008.png">Click to see Yahoo Example</a>) or try <a href="http://us.i1.yimg.com/us.yimg.com/i/ww/t7/pa-icons2.gif">live one</a>.</li>

</ul>

</p>

<br />

</body>

</html>

Please note:

Only 1 image is used to display 4 gray icons + 4 mouse over colored icons.
One gif file means only One HTTP request
Yahoo uses similar technique (Click to see Yahoo Example) or try live one.

一品梅 2008-05-27

打赏
举报

翻译得好累呵，文章原址：http://www.codeproject.com/KB/HTML/SpeedUpWebsite.aspx
下面继续：
优化image
为什么要优化？
image消耗大量下载时间及带宽，在这方面节省时间会得到卓著的功效。
怎样优化？
1.减少图片的使用频率
2.使用css rollovers代替图片链接。
3.设置恰当的宽度与高度（尽量小）
4.仔细地选择图片的颜色与格式;
GIF: works best for solid colors and sharp-edged transitions from one color to other, Maximum colors: 256.
JPEG: works best for continuous gradations of many colors or grey tones.

一品梅 2008-05-27

打赏
举报

优化html
为什么优化它？
大体来说html只耗20%的时间而其它（CSS，Javascript,images)要消耗80%的时间
html包裹所有的对象（标签控件）和styles，这些都提供与浏览器进行解析,解包和render(生成）.
由于浏览器之争（竞争）和x/html/css的兼容问题.浏览器被设计为两种模式：普通（快模式，信任模式），quirk模式（必须要验证HTML/CSS,找到和"原谅错误")
怎么优化它？
1.减少下载时间
将冗长的一页尽量载减为多页
2.快速生成render
使用非常简单的设计
standard vs quirk mode两种模式的选择.
建立信任的standard模式（前提，设计者达到专业水平遵循标准)以使得浏览器使用最优化的解析
切换模式为标准模式

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

     "http://www.w3.org/TR/html4/strict.dtd">



<html>

  <head>

    <title>DTD - Example</title>

    .....

  </head>



  <body>

  .......

  </body>

</html>

移除inline CSS改为外部CSS引用（减少内部脚本书写，如document.write())
如果遵循以上原则：浏览器会在生成内容与应用CSS和脚本改变布局之间踌躇，这种情况下会暂停内容的生成，所以要引用外部CSS，JS。
如果不遵循这条原则：外部文件意味着多了一个外部资源请求，如果主页CSS，JS很少，则用内联，减少请求数，加快响应速度。

减裁内容

少用table,转用div.为什么呢？浏览器不能生成实体控件对象（标签对应）直到捕捉到标签尾ie.</table>
若布局用bigger outer，（超多标签）

一品梅 2008-05-27

打赏
举报

对于Image/CSS/Javascript,按以下方法配置web server
*IIS
右键点击目录或文件folder or file >properties>http headers>click on Enable Content Expiration > Expire on {set future date} > click Apply. See example below for folder images:

一品梅 2008-05-27

打赏
举报

为什么减少请求数量
请求执行顺序：
e.g.: index.htm and then global.css, spring.css, logo.jpg, menu1.jpg, menu2.jpg, menu3.jpg, 1x1.gif, corner1.gif, common.js, validation.js etc...)
在加载页面时，浏览器从URL中（src)中提取头链接href={url},css文件链接和发送每个请求的资源。
大体上，浏览器在每台客户机提出页面请求时只并发下载2-4个资源请求，（取决于http和浏览器版本），一般来说，Firefox要比IE略好一些.
结论：请求与连接越少，则响应越快.
怎样减少请求数量？
减少文件数目（css,js,image)
合并文件（尽可能的）所有的CSS文件尽量合并归一，所有的JS文件尽量合并归一，

使用浏览器缓存
当第一次请求时，减少资源，之后将依靠cache机制，不必再请求资源。
使用"expires"头，

html>

  <head>

    <title>Cache - Example</title>

    <meta http-equiv="Expires" content="Sat, 16 Jul 2016 18:45:00 GMT">///附带expires头，

    .....

  </head>



  <body>

  .......

  </body>

</html>

<html>