前端优化原则

内容主要来之雅虎的前端优化原则:http://developer.yahoo.com/performance/rules.html
对于部分内容做了解释,感觉其中的部分原则是相同的,遵循了一种一条,自然就遵循了另一条,例如第一条和第二十条,同时还有一些原则是单纯的优化而优化,大可从整体设计风格和设计原则上考虑,例如第15条。

1.减少http请求数
80%的后端响应时间都是花在前端加载上,大部分时间在尝试下载页面的组件:图片、css、js、flash等。所以减少加载请求的数量就能够更快的加载页面。
一种办法减少页面组件数量就是简单化页面,但是现在页面更多的富客户端,需要一些负载的组件,针对这种情况以下有几种方法可以处理。

合并文件是降低请求数的一个方法,将多个js合并成一个,将多个相似的css合并成一个,将多个图片合并成一个图片。
css sprites 可以解决将多个背景图片合并成一个,通过使用CSS background-image 和 background-position属性来显示需要的图片段,详细可见:http://alistapart.com/article/sprites
Image maps 可以合并多个图片到一个图片,全局大小是不变的,但是减少了链接请求数。Image maps的使用限制条件是合并的图片必须是相邻的,例如导航栏,若是一个出错的话,整体都不能访问,所以不是很推荐。
Inline images:内置图片,通过使用data: URL scheme 将图片内置到实际的页面中,这种方式会加大页面的大小,若是将内置图片放在你的缓存的css中,可以既满足减少请求数同时不增加页面大小,缺点是现在并不是所有的主流浏览器支持这种方式。

减少请求数对于第一次访问用户是一个很重要的原则,并能够达到很好的实际效果。
现在浏览器对于同一个域名下的数据并发请求是有限制的,还有个办法是将不同的组件放在不同的域名下,但是在不用的域名下可提高加载数据。

2.使用CND(Content Delivery Network)
将部分数据放到用户最近的地方,使得用户能够更快的加载数据。
一般对于响应速度,大家的第一选择是将应用做成分布式的系统,通过横向的扩容机器来提高响应,这确实也是种办法,但是会面临一些问题,例如如何做分层,各层如何处理数据及会话信息的处理等等。
但是在请求数不变更的情况下,提高响应更多的可以从前端下手,因为80%的问题在于前端资源的加载上,而使用CDN就是一个很好的办法,将不同区域的用户加载数据放到理他最近的CND上,若是自身资产雄厚可以自建CND,例如淘宝,当然也可以采用现在已有的CDN服务商,如:WEBLUKER。

3.添加Expires 或者 Cache-Control到header信息中
对于静态资源,可以采用永久不实现策略
对于动态资源,设置良好的缓存策略

这点主要是利用现有的WEB基础设施,来实现缓存,现在的缓存大致上分为客户端缓存和代理缓存和反向代理缓存:具体可建 系统设计之缓存篇(http://www.inter12.org/archives/411).
良好的使用缓存能够大大提升我们的性能。

4.压缩资源Gzip Components
对于请求中的数据进行压缩,这点也是我们的互联网基础设置良好提供的机制。
请求: Accept-Encoding: gzip, deflate
响应:Content-Encoding: gzip

Gzip 是目前最受欢迎和最有效的压缩方式,是GNU组织提供并成为了RFC1952 标准,还有方式是deflate,但是效率比不上gzip。
gzip基本能够将网络数据压缩70%,目前现在90%的浏览器支持gzip压缩,若是使用apache的话,apache 1.3版本依赖的模块是 mod_gzip , Apache 2.x 使用的是 mod_deflate.

5.将css样式放到最顶部
在雅虎的前端性能优化实践中发现将数据放到HEAD中,能够更快的加载页面。因为浏览器的加载顺序是按照页面的,若是放到头部的话,可以加载到部分样式,给用户一个反馈我们在努力加载中,提高系统的响应性。

6.将js放到页面的底部
因为加载js会阻塞其他资源的下载,若是在浏览器的并发线程满的情况下,http1.1标准是建议开启最大两个请求,同时在页面渲染的时候并不是需要js,所以尽可能的情况下还是把js放在页面的底部。

7.禁止使用css正则表达式
CSS正则表达式是在IE5版本启用,对于动态的css属性执行非常强大,但是在IE8被停止支持,同时正则需要耗费一定的cpu资源,并且目前只有IE支持css正则!

8.将js和css单独部署
因为单独部署能够独立的坐缓存,而不是依赖于页面

9.减少DNS查找
目前现在的DNS服务商提供者,大多会缓存DNS解析并将请求路由到最近的服务器上

10.尽量减少js和css
例如去除一些注释,减少一些临时变量

11.尽量减少重定向
就是减少301和302跳转

12.去除重复性的代码

13.利用Etag和If-None-Match: 来缓存数据

14.页面加载可优先返回部分数据
一个页面加载可能需要200-500毫秒时间,若是能在这个等待时间中,优先返回部分数据,那么浏览器可以渲染这部分数据,能够得到更好的响应性

15.ajax请求尽量使用GET,而不是POST
浏览器对于POST请求的处理是分为两部分,第一首先发送header,然后才是发送数据,发送GET请求,只会建立一次TCP链接。因为一些浏览器对于GET请求的长度是有限制的,例如IE是2K,若是超过这个限制的话,那没办法,只好考虑POST请求了,但是,但是,从rest的实现角度看,get更多是获取数据,post是绝对更新,put是局部更新,这个具体还是留给自己考量吧!

16.尽量减少DOM中包含的元素

17.对于不同的组件放置在不同的域名下,因为浏览器对于单个域名的并发下载是有限制的

18.尽量减少iframe的使用

19.减少cookie数量

20.对于部分组件采用Cookie-free Domains
当你向服务端发起一个请求的数据,通常会将一些你并不是需要的cookie也带到服务端,这个会加剧网络的带宽,若是将这些cookie放到不同的domain下,就能避免这个问题
21.最小话DOM的解析路径

22.建立良好的事件触发机制

23.使用link代替@import

24.避免使用空的IMG src
straight HTML

JavaScript
var img = new Image();
img.src = “”;

25.页面限制在25K以下

26.不要对图片使用scale属性
设置宽和高,过大的图片渲染会降低速度

作者: inter12

在这苦短的人生中,追求点自己的简单快乐

发表评论

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