关于前端性能优化

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

服务器优化:

减少HTTP请求

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

使用CDN

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

添加expires

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

压缩组件

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

减少DNS查找

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

客户端优化：

将样式表放在顶部，将脚本资源放在底部

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

避免CSS表达式和精简JS

使用CSS表达式会导致持续的在页面上计算，会不断的导致页面重绘，影响页面性能。

使用外部js文件和CSS

使用外部脚本和css资源，是为了缓存文件，减少页面请求

避免重定向

重定向会多几次页面的跳转，会延长响应时间。

删除重复脚本

删除重复脚本，可减少HTTP请求，同时多次运算也会浪费时间。

配置Etag

Etag是服务器和客户端用来缓存组件有效性的一种机制。它用来判断浏览器缓存里的元素和服务器的是否一致，使用Etag可以减少Web应用贷款和负载

使Ajax可缓存

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

按需加载资源

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

划分主域

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