网站性能优化

内容方面

1）  尽量减少HTTP请求次数

终端用户响应的时间中，大部分是在下载各项内容。这部分时间包括下载页面中的图像，样式表，脚本，Flash等。通过减少页面中的元素可以减少HTTP请求的次数。

下面介绍几种通用的减少HTTP请求的方法：

1.      合并文件，就是多个脚本放到一个文件中。可以采用minify工具来压缩js或css文件。Minify不仅可以将多个脚本放到一个文件中，还可以压缩文件中的空格等。

2.      CSS Sprites是减少图像请求的有效方法。其主要原理是将多张图片整合到一张图片中，通过background-image和background-position属性来显示图片的不同部分。

2)  减少DOM元素数量

关注以下原则：

1.      一个复杂的页面意味着需要下载更多的数据，同时也以为这Javascript遍历DOM的效率越慢。

2.      只有在语意上有意义时才使用<div>,而不是因为它具有换行效果才使用它。

3.      缓存已经访问过的元素

4.      使用分页加载内容或按需加载内容。

Document.getElementByYagName(‘*’).length来回去dom数量

3）    Iframe的数量最小

     Iframe让页面无缝集成的特性使之在Web系统中大受青睐，但同时我们也要看到iframe的缺点：

即使内容为空，加载也需要时间；

会阻止页面加载；

没有语意的iframe请使用div代替；

对客户端的负载相对较重。

4）  减少DNS查询

一次DNS的解析至少需要20毫秒的时间，而在此期间浏览器却无法下载任何资源。但是好在于一般浏览器都有缓存机制。所以只有首次加载或缓存失效时，加载比较费时。

常用策略：一个网站使用2到4个域来提供资源。一般网站规划会讲静态资源放在类似于static.example.com，动态内容放在www.example.com上。

3）  不要出现404错误

HTTP请求时间消耗很大的，因此使用HTTP请求来获得一个没有用处的响应，是完全没有必要的。

4）  避免页面跳转

当客户端收到服务器的跳转恢复时，客户端再次根据服务器回复中的location指定的地址再次发送请求。而在此时用户看不到任何内容，只有浏览器进度条一直在刷新。

5）  缓存Ajax

Ajax可以帮助我们异步下载页面的内容。即使是异步加载，用户还得等待它的返回结果。

添加Expires或Cache-Control报文头使回复可以被客户端缓存：静态类容添加Expires，将静态内容设为永不过期，或者很长时间以后。

 Cache-Control 适合动态的内容，让浏览器根据情况来发送请求。

压缩回复内容

精简javascript

配置Etags

6）  延迟加载

延迟加载的意思就是确认网页最初加载需要的最少内容集市是什么，剩下的内容就可以推到延迟加载的集合中。

7）  提前加载

无条件提前加载：当页面完成加载后，立马去下载一些其他的内容。例如goole会在页面加载成功后马上去下载一个所有结果会用到的imagesprite.

有条件加载：根据哟过户的输入推断需要加载的内容

服务器方面

1）  采用缓存机制

缓存机制指的是促进客户端访问系统时，尽量采用本地缓存文件，避免与服务器端进行重复的交付。这种方式能够最大程度的减轻服务器端和网络的负荷，有效提高页面性能。

httpResponse.addHeader(“Cache-Control”,”private,max-age=86400”);//缓存一天

2）  采用CZip压缩

GZip是指把文件现在服务器端进行压缩，然后载传输。这样可以显著减少文件传输

的大小。传输完毕后浏览器会重新对压缩过得内容进行解压缩，并执行。GZip的压缩比例非常大，一般压缩率为85%。

1）  尽早flush输出

网页后台程序中有个方法叫Response.Flush(),一般调用它都是在程序末尾，单注意这个方法可以被调用多次。目的是将现有缓存中的回复先发给客户端，让客户端“有活干”。当我们需要加载较多的外部脚本或者式样表时，可提前调用一次，客户端收到了关于脚本或其他外部资源的链接可以并行的先发请求去下载，服务器接下来把后续的处理结果发给客户端。.

2）  避免空的图片src

空的图片src仍然会使浏览器发送请求到服务器，这样会浪费服务器的资源。

3）  减少Cookie大小

Cookie被用来做认证或个性化设置，其信息被包含在http报文头中。对于Cookie，我们要注意一下几点，来提高响应速度：

去除没必要的cookie，如果页面不需要就完全禁掉

将cookie的大小减到最小3注意cookie设置的domain的级别，没必要的情况下不要影响到sub-domain

设置合适的过期时间，比较长得过期时间可以提高响应速度。

静态资源

1.      将CSS样式表放在页面的head区域，避免页面在加载过程中出现空白或无样式

2.      用<link>代替@import

3.      将外联JS放在页面的head区域，避免加载不到JS的情况出现

1.      将执行的JS放到页面的最下方，避免浏览器在解释JS时，发生阻塞而导致页面加载停滞

2.      主流浏览器都支持defer关键字，可以指定脚本在文档加载后执行

3.      HTML5中心增加了async关键字，可以让脚本异步执行

4.      避免使用CSS中的Expressions

1）  移除重复的脚本

很多时候由于代码不规范，代码中会包含很多重复的代码。

2）  使用小且可缓存的favicon.ico

网站图标文件favicon.ico,不管你服务器有还是没有，浏览器都会去尝试请求这个图标。所以要确保这个图标存在，文件尽量小，设置一个长得过期时间。

3）  使用CDN

CDN通过部署在不同地区服务器来提高客户的下载速度。如果你的网站上有大量的静态内容，全国各地都有用户在访问，那么CDN是必不可少的。我们自己的网站可通过免费得CDN提供商来分发资源。