WEB前端性能优化

优化的目的

1.从用户的角度：优化能够让页面加载速度变快，对用户操作响应更及时，能够给用户更好的体验。
2.从服务商角度：优化能够减少页面请求数，或者减少请求所占带宽，能够减少可观的资源。

前端优化的方法

前端优化的途径有很多，按粒度大致可以分为两类：
第一类是页面级别的优化，例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;
第二类则是代码级别的优化，例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。

一、页面级优化

1.减少http请求
（1）简化页面
保持页面简洁，减少资源使用。
（2）合理设置HTTP缓存
恰当的缓存设置可以大大的减少 HTTP请求。
（3）CSS Sprites
合并 CSS图片，减少请求数的又一个好办法.
例子：

.bg_sprite{background-image:url(/整图地址); background-repeat:no-repeat}

#ico1 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
#ico2 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}

2.将外部脚本置底
如果将外部脚本放在前面，在外部脚本加载完成之前，其它图片、样式等资源都会处于拥塞状态，影响页面加载速度和用户体验。

3.将CSS放在HEAD中
如果将 CSS放在其他地方比如 BODY中，则浏览器有可能还未下载和解析到 CSS就已经开始渲染页面了，这就导致页面由无 CSS状态跳转到 CSS状态，用户体验比较糟糕。

二、代码级优化

1.JavaScript
（1）DOM
尽可能的减少DOM操作，DOM操作会引起浏览器渲染，而渲染是相当慢的。
（2）减少作用域链的查找
在循环中需要访问非本作用域下的变量时请在遍历之前用局部变量缓存该变量，并在遍历结束后再重写那个变量，这一点对全局变量尤其重要，因为全局变量处于作用域链的最顶端，访问时的查找次数是最多的。