悟道web标准:前端性能优化

makemyownlife

浏览: 532504 次
性别:
来自: 武汉

最近访客更多访客>>

morelily

让蛋蛋飞_007

qq_23565683

luojy200

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javascript/ajax

Web CSS 浏览器 Flash IE

悟道web标准:前端性能优化

前端性能优化完全是一个技术话题，但是对于项目的用户体验有非常大的影响，如果你的网站打开要等待三五秒或者等到浏览器提示无法连接，那网站哪来的流量，哪来的品牌影响和用户忠诚度，挣钱就算了。

3s，作为判断一个用户忍受你网站速度的限度，如果超过3s，用户已经对这个网站产生了负面的抵触心理。
前端性能优化和web标准有什么关系，接着第一篇悟道web标准——统一思想，遵循标准，这是对你遵循web标准的一个补偿或者是对标准的一个认可。
前端性能优化了解yahoo性能优化N条的同学应该不会陌生，安装一个YSlow评分并对照着优化就可以了，但是有没有想过为什么要这么做就可以提升速度，这些与Web标准有没有某种关联或者因果呢。

我把这些个条目分成三类，服务端运算优化，传输优化，客户端运算优化：

第一类，服务器端优化

服务器端就是对你的网站的动态语言的执行(asp,php)，数据库查询，存储等速度，总的来说就是输入/输出的运算。这些跟前端没关系，但是影响着前端。YSlow里面没有，鬼知道你网站的服务器性能如何，看不出来，就自行优化服务器性能，数据库性能，多买点服务器扩容。
yslow有一条尽早刷新 Buffer (Flush the Buffer Early)，貌似是不等html完成生成就传输。
提高域名的DNS解析速度。减少DNS的解析个数。这个不好归类，暂时放到这里吧。
第二类，传输优化

这类是大头，很烦，首先是字节，字节越小越好，怎么能小下来，最有效的方式就是google的方案，把首页做的极其精简，图片，html，静态文件都很小，再就是缓存，把文件放到本地缓存区读取。还有http请求数，减少文件传输中的排队等待。

字节优化：

 1. 减少冗余html，结构化，语义化的html来实现，行为，表现，结构分离，独立的html文件将变得很小。
 2. 压缩文本文件，css，html，js去掉注释、空格、换行等。
 3. 降低图片字节，选择合适的图片类型，png-8是一个好东西，再用工具将图片进行压缩去掉，比如png-8的压缩工具。用合适的图片尺寸，不要把大图控制一下宽高就用上了。
 4. gzip压缩一下，减小服务器端传输到客户端时候的字节。
 5. flash文件和flash+xml的动态flash也减小字节

缓存：
服务器端配置一下，提高缓存的命中率和把不经常修改的文件缓存了。
Add Expires headers、Etags、ajax使用get方式便于缓存。
把能分离出来的css，js分离成外部文件便于缓存。
使flash和xml文件可缓存。
打通不同运营商的限制
CDN提高不同类型运营商的网络传输速度，电信，网通，铁通，教育网统统搞定。

请求数：
减少文件请求数，能合并到一起的合并一下，css，js，图片等，减小排队等待和服务器端开销。
分域提高同时加载数，优化排队等待。
避免404无效请求数。
避免重定向。

延迟加载和预载：
把暂时不用的文件等主体页面加载完了再加载，把用户稍后要看浏览的内容预先加载进来，相册浏览就是很好的例子，先用小图片放大再把大图展示出来，看本张图片时把下一张预载进来等等。

第三类：客户端优化

 1. 讨厌的IE的滤镜和CSS expressions少用，小心把浏览器搞挂，CUP 100%死机。
 2. CSS放到前面，js能放到后面的放在代码后面。将页面尽早展示给用户。
 3. 减少iframe的使用，避免CPU扛不住。
 4. 减少DOM个数，减低浏览器解析压力。
 5. 使用 <link> 而不是@importChoose <link> over @import，在 IE 中 @import 指令等同于把 link 标记写在 HTML 的底部。而这与第一条相违背。
 6. 提高js的执行效率，话题太大不提了
 7. 缩小 Cookie，针对 Web 组件使用域名无关性的 Cookie (Use Cookie-free Domains for Components)
 8. 还有小图片的repeat背景会提高浏览器的CPU占用。
 9. 合理的DOM排序，把重要的内容代码前置，优先加载。

再就是些没对号入座的雅虎性能优化的条目。至此可以检验到页面工程师不是盖的，需要对代码、文件，http协议，缓存，服务器等精准的学习和控制，达到提供用户最最基本的体验——访问速度的体验。

Web标准的分离思想和结构化语义化html促成了以上很多条的实施，这是美工时代所不能比拟的。

2011-12-21

引用

http中Last-Modified 与If-Modified-Since 都是用于记录页面最后修改时间的 HTTP 头信息，注意,在这
Last-Modified 是由服务器往客户端发送的 HTTP 头，另一个
If-Modified-Since是由客户端往服务器发送的头，可以看到，再次请求本地存在的 cache 页面时，客户端会通过
If-Modified-Since 头将先前服务器端发过来的 Last-Modified
最后修改时间戳发送回去，这是为了让服务器端进行验证，通过这个时间戳判断客户端的页面是否是最新的，如果不是最新的，则返回新的内容，如果是最新的，则
返回 304 告诉客户端其本地 cache
的页面是最新的，于是客户端就可以直接从本地加载页面了，这样在网络上传输的数据就会大大减少，同时也减轻了服务器的负担。而且在一些ajax应用中，要
求获取的数据永远是最新的，而不是读取位于缓存中的数据，做这样的设置是非常有必要的。 无意中测试发现nginx与apache对此有不同的算法: APACHE: （1）直接发送请求,返回200,Last-Modified: Mon, 26 Apr 2010 13:22:17 GMT [root@test ~]# curl -I http://www.pengyao.org/test.html HTTP/1.1 200 OK Date: Mon, 26 Apr 2010 14:59:09 GMT Server: Apache/1.3.41 (Unix) Last-Modified: Mon, 26 Apr 2010 13:22:17 GMT ETag: “92c027-897-4bd59389″ Accept-Ranges: bytes Content-Length: 2199 Content-Type: text/plain (2)指定与Last-Modified时间相同的If-Modified-Since 发送GET请求,返回304 [root@test ~]# curl -I -G -H “If-Modified-Since: Mon, 26 Apr 2010 13:22:17 GMT”  http://www.pengyao.org/test.html HTTP/1.1 304 Not Modified Date: Mon, 26 Apr 2010 15:02:06 GMT Server: Apache/1.3.41 (Unix) ETag: “92c027-897-4bd59389″ (3)调后If-Modified-Since 1小时，再次发送GET请求，返回依然为304 [root@test ~]# curl -I -G -H “If-Modified-Since: Mon, 26 Apr 2010 14:22:17 GMT”  http://www.pengyao.org/test.html HTTP/1.1 304 Not Modified Date: Mon, 26 Apr 2010 15:05:02 GMT Server: Apache/1.3.41 (Unix) ETag: “92c027-897-4bd59389″ 说明Apache 在判断浏览器cache是否过期时，依据从If-Modified-Since开始，文件Last-Modified是否修改过来判断的,与RFC1945中对If-Modified-Since描述吻合. 那么再看下nginx对于此的测试结果: (1)直接发送请求,返回200,Last-Modified: Wed, 21 Apr 2010 13:14:21 GMT [root@test pengyao.org]# curl -I http://www.pengyao.org/index.html HTTP/1.1 200 OK Server: nginx/0.7.61 Date: Mon, 26 Apr 2010 15:18:29 GMT Content-Type: text/html; charset=UTF-8 Content-Length: 323 Last-Modified: Wed, 21 Apr 2010 13:14:21 GMT Connection: keep-alive Accept-Ranges: bytes (2)指定与Last-Modified时间相同的If-Modified-Since 发送GET请求,返回304 [root@test pengyao.org]# curl -I -G -H “If-Modified-Since: Wed, 21 Apr 2010 13:14:21 GMT” http://www.pengyao.org/index.html HTTP/1.1 304 Not Modified Server: nginx/0.7.61 Date: Mon, 26 Apr 2010 15:20:45 GMT Last-Modified: Wed, 21 Apr 2010 13:14:21 GMT Connection: keep-alive (3)调后If-Modified-Since 1小时，再次发送GET请求，发现返回的结果为200,与Apache不同 [root@test pengyao.org]# curl -I -G -H “If-Modified-Since: Wed, 21 Apr 2010 14:14:21 GMT” http://www.pengyao.org/index.html HTTP/1.1 200 OK Server: nginx/0.7.61 Date: Mon, 26 Apr 2010 15:21:19 GMT Content-Type: text/html; charset=UTF-8 Content-Length: 323 Last-Modified: Wed, 21 Apr 2010 13:14:21 GMT Connection: keep-alive Accept-Ranges: bytes 由此可以判断出，nginx在判断浏览器cache是否过期时，判断If-Modified-Since与Last-Modified是否匹配，如果不匹配，则认为cache过期，返回200重新下载. 要
说更喜欢哪种算法，个人更倾向于nginx的这种，因为在对文件更新前，本人习惯于对需要修改的文件进行备份(保留时间戳)，一旦测试出现问题，及时的回
滚，使用nginx的这种算法就能保障回滚前后浏览器cache失效，而Apache的这种策略导致回滚到之前的时间戳的话(Last-
Modified)，本地由于进行了测试，本地cache文件的If-Modified-Since时间一般比回滚后的Last-Modified新，这
样本地的cache认为依然有效，返回304,而实际上文件已经不是最新的。当然，Apache的这样设计完全遵守RFC,个人喜好不代表真实需求. 如何利用客户端缓存对网站进行优化? If-Modified-Since & If-None-Match 介绍         你的网站在并发访问很大并且无法承受压力的情况下,你会选择如何优化?        

很多人首先会想从服务器缓存方面着手对程序进行优化,许多不同的服务器缓存方式都有他们自己的特点,像我曾经参与的一些项目中,根据缓存的命中率不同使用
过 Com+/Enterprise Libiary Caching/Windows服务,静态文件等方式的服务器端缓存和 HTTP
Compression技术,但客户端缓存往往却被人们忽略了,即使服务器的缓存让你的页面访问起来非常地快,但她依然需要依赖浏览器下载并输出,而当你
加入客户端缓存时,会给你带来非常多的好处.因为她可以对站点中访问最频繁的页进行缓存充分地提高 Web
服务器的吞吐量（通常以每秒的请求数计算）以提升应用程序性能和可伸缩性。        

一个在线购物调查显示，大多数人愿意去商店排队，但在在线购物时却不愿意等待。Websense调查公司称多达70%的上网者表示不愿意在页面读取上超过
10秒钟。超过70%的人会因为中途速度过慢而取消当前的订单。       基础知识         1) 什么是”Last-Modified”?        

在浏览器第一次请求某一个URL时，服务器端的返回状态会是200，内容是你请求的资源，同时有一个Last-Modified的属性标记此文件在服务期
端最后被修改的时间，格式类似这样：         Last-Modified: Fri, 12 May 2006 18:53:33 GMT         客户端第二次请求此URL时，根据 HTTP 协议的规定，浏览器会向服务器传送 If-Modified-Since 报头，询问该时间之后文件是否有被修改过：         If-Modified-Since: Fri, 12 May 2006 18:53:33 GMT        
如果服务器端的资源没有变化，则自动返回 HTTP 304 （Not
Changed.）状态码，内容为空，这样就节省了传输数据量。当服务器端代码发生改变或者重启服务器时，则重新发出资源，返回和第一次请求时类似。从而
保证不向客户端重复发出资源，也保证当服务器有变化时，客户端能够得到最新的资源。         2) 什么是”Etag”?        
HTTP 协议规格说明定义ETag为“被请求变量的实体值” （参见 —— 章节 14.19）。
另一种说法是，ETag是一个可以与Web资源关联的记号（token）。典型的Web资源可以一个Web页，但也可能是JSON或XML文档。服务器单
独负责判断记号是什么及其含义，并在HTTP响应头中将其传送到客户端，以下是服务器端返回的格式：         ETag: "50b1c1d4f775c61:df3"         客户端的查询更新格式是这样的：         If-None-Match: W/"50b1c1d4f775c61:df3"         如果ETag没改变，则返回状态304然后不返回，这也和Last-Modified一样。本人测试Etag主要在断点下载时比较有用。               Last-Modified和Etags如何帮助提高性能?        
聪明的开发者会把Last-Modified 和ETags请求的http报头一起使用，这样可利用客户端（例如浏览器）的缓存。因为服务器首先产生
Last-Modified/Etag标记，服务器可在稍后使用它来判断页面是否已经被修改。本质上，客户端通过将该记号传回服务器要求服务器验证其（客
户端）缓存。         过程如下:                 1. 客户端请求一个页面（A）。                
2. 服务器返回页面A，并在给A加上一个Last-Modified/ETag。                
3. 客户端展现该页面，并将页面连同Last-Modified/ETag一起缓存。                
4. 客户再次请求页面A，并将上次请求时服务器返回的Last-Modified/ETag一起传递给服务器。                
5. 服务器检查该Last-Modified或ETag，并判断出该页面自上次客户端请求之后还未被修改，直接返回响应304和一个空的响应体。 示例代码         下面的例子描述如何使用服务器端代码去操作客户端缓存:          Code 1//默认缓存的秒数 2 int secondsTime = 100; 3 4 //判断最后修改时间是否在要求的时间内 5 //如果服务器端的文件没有被修改过，则返回状态是304，内容为空，这样就节省了传输数据量。如果服务器端的文件被修改过，则返回和第一次请求时类似。 6
if (request.Headers["If-Modified-Since"] != null &&
TimeSpan.FromTicks(DateTime.Now.Ticks -
DateTime.Parse(request.Headers["If-Modified-Since"]).Ticks).Seconds <
secondsTime) 7 { 8     //测试代码,在这里会发现,当浏览器返回304状态时,下面的日期并不会输出 9     Response.Write(DateTime.Now); 10 11     response.StatusCode = 304; 12     response.Headers.Add("Content-Encoding", "gzip"); 13     response.StatusDescription = "Not Modified"; 14 } 15 else 16 { 17     //输出当前时间 18     Response.Write(DateTime.Now); 19 20     //设置客户端缓存状态 21     SetClientCaching(response, DateTime.Now); 22 } 23 24 /**//// <summary> 25 /// 设置客户端缓存状态 26 /// </summary> 27 /// <param name="response"></param> 28 /// <param name="lastModified"></param> 29 private void SetClientCaching(HttpResponse response, DateTime lastModified) 30 { 31     response.Cache.SetETag(lastModified.Ticks.ToString()); 32     response.Cache.SetLastModified(lastModified); 33     //public 以指定响应能由客户端和共享（代理）缓存进行缓存。 34     response.Cache.SetCacheability(HttpCacheability.Public); 35     //是允许文档在被视为陈旧之前存在的最长绝对时间。 36     response.Cache.SetMaxAge(new TimeSpan(7, 0, 0, 0)); 37     //将缓存过期从绝对时间设置为可调时间 38     response.Cache.SetSlidingExpiration(true); 39 } 如果你的缓存是基于文件的方式,如XML或http中的.ashx处理,也可以使用下面的基于文件方式的客户端缓存: SetFileCaching 1/**//// <summary> 2/// 基于文件方式设置客户端缓存 3/// </summary> 4/// <param name="fileName"></param> 5private void SetFileCaching(HttpResponse response, string fileName) 6{ 7    response.AddFileDependency(fileName); 8    //基于处理程序文件依赖项的时间戳设置 ETag HTTP 标头。 9    response.Cache.SetETagFromFileDependencies(); 10    //基于处理程序文件依赖项的时间戳设置 Last-Modified HTTP 标头。 11    response.Cache.SetLastModifiedFromFileDependencies(); 12    response.Cache.SetCacheability(HttpCacheability.Public); 13    response.Cache.SetMaxAge(new TimeSpan(7, 0, 0, 0)); 14    response.Cache.SetSlidingExpiration(true); 15} 16          结论        

我们已经看了如何使用客户端缓存减少带宽和计算的方法,如前所述,如果能正确合理的利用各种不同的缓存,他们会给你带来很多的好处.我希望本文已为你当下
或将来基于Web的项目提供了精神食粮，并正确地在底层利用Last- Modified和ETag响应头去优化你的项目。

分享到：

CSS兼容：如何解决IE7和IE8的BUG | JavaScript对象探讨

2009-12-14 09:40
浏览 1592
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论