关于前端性能优化

前端优化性能是前端必经之路，优化性能可以极大地改善用户体验。可以从服务器和客户端两个方面进行优化.
服务器优化:

1. 减少HTTP请求
   在请求资源时，应尽量合并图片、css和js，减少网络请求次数。加快页面的加载，优化手段有使用CSS sprites.

2. 使用CDN
   CDN（内容分发网络）是一组分布在不同地理位置上的Web服务器。用于更加有效地向用户发布网络。使用CDN可以减少用户响应时间，一般用于部署静态资源，如图片、脚本、样式表和Flash.

3. 添加expires
   浏览器利用缓存可以减少HTTP请求的数量，并减少HTTP响应的大小。所以expires是用来设置文件的过期时间，下次请求相同资源即可从浏览器缓存区读取。

4. 压缩组件
   使用Gzip压缩组件，可以通过设置请求头Accept-Encoding来压缩文本类资源。

5. 减少DNS查找
   减少DNS查询可以节省每次查询的性能消耗。可以利用DNS缓存服务器 ，一般查找过程是限度去浏览器缓存，后是系统缓存，后是路由器缓存。同时可以使用Keep-alive和较少的域名重用现有连接避免了重复的DNS查找。
   客户端优化：

6. 将样式表放在顶部，将脚本资源放在底部
   资源加载时从上至下的，所以页面放在顶部能够优先渲染页面。而将脚本资源放在底部，不会阻塞其他的资源的下载。会等所有资源加载完后再加载脚本。

7. 避免CSS表达式和精简JS
   使用CSS表达式会导致持续的在页面上计算，会不断的导致页面重绘，影响页面性能。

8. 使用外部js文件和CSS
   使用外部脚本和css资源，是为了缓存文件，减少页面请求
9. 避免重定向
   重定向会多几次页面的跳转，会延长响应时间。
10. 删除重复脚本
    删除重复脚本，可减少HTTP请求，同时多次运算也会浪费时间。
11. 配置Etag
    Etag是服务器和客户端用来缓存组件有效性的一种机制。它用来判断浏览器缓存里的元素和服务器的是否一致，使用Etag可以减少Web应用贷款和负载

12. 使Ajax可缓存
    异步请求同样的造成用户等待，所以使用ajax请求时，要主动告诉浏览器如果该请求有缓存就去请求缓存内容。

13. 按需加载资源
    可以采用图片懒加载技术加载资源，可以减少向服务器发生的并发请求数量。且可以进行图片优化在不降低分辨率的情况下。

14. 划分主域
    浏览器限制服务器的连接数量。将内容分配到两个域能够加快并行下载资源的时间。