内容主要来之雅虎的前端优化原则：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属性
设置宽和高，过大的图片渲染会降低速度
0 条评论。