前端是庞大的，包括 HTML、 CSS、 Javascript、Image 、Flash等等各种各样的资源。前端优化是复杂的，针对方方面面的资源都有不同的方式。那么，前端优化的目的是什么 ?
1. 从用户角度而言，优化能够让页面加载得更快、对用户的操作响应得更及时，能够给用户提供更为友好的体验。
2. 从服务商角度而言，优化能够减少页面请求数、或者减小请求所占带宽，能够节省可观的资源。

总之，恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。以下从几个方面介绍关于前端方面的优化：

1.Html方面

从html的健壮性、可维护性和语义化入手

健壮性是指你搭建的html代码框架要稳固，并且尽量减少DOM元素的编写，Write less do more是程序员必备的思想，用最少的代码布最好的框架；

可维护性和语义化，这两者相互依赖。如上条所说，减少DOM元素也是为了以后便于维护和修改，使用语义化的标签或者语义化的类名的道理都是为了便于后期的维护，也是防止css样式缺失/无法渲染的时候，用户也能像阅读文档一样浏览网页。

2.CSS方面

同html一样都是需要语义化处理的，并且减少DOM层级嵌套，这一点上用css的预编译处理器就能很好的处理，将经常用到的属性或功能用变量缓存，便于多次利用和减少代码量；less的层级嵌套虽然好用，但是也要避免多层的嵌套（用grunt的less转换插件转换成css时就会看到过多层级的恐怖）；还有一些css3的属性也很影响性能：text-shadow\box-shadow\gradient(渐变) 这些属性在渲染的时候很影响性能。

避免使用CSS expression（css表达式）又称Dynamic properties(动态属性)；需要设置很多样式时设置className而不是直接操作style。

3.JavaScript方面

首要的就是减少http请求（图片、音频、视频文件会向服务器发送请求），如何减少呢？

图片：1.部分背景图片使用图片精灵使之转换成雪碧图（发送一次请求就可以将许多背景图片缓存）；

2.小图标使用font-icon字体图标，用文本的形式加载；

3.较大的背景图片使用懒加载（lazyload）和预加载。

其次是减少对DOM的操作，会使该元素重绘或重构，也是很影响性能。（重绘和重构见之前的文章）对需要多次操作的DOM元素给其设置变量名缓存，减少遍历整个HTML页面的次数开销。

还有许多细节的处理方式：

同一父元素的多个子元素有同样事件绑定，无需将其逐一绑定（给每个子元素都加上一个方法），而是使用“事件委托”给它父元素绑定事件，在用条件判断每次需要执行的子元素是谁（switch）。

尽量不使用滚轮事件和滚动条相关事件；针对一些频繁操作的动画使用“函数防抖”或“函数节流”（个人推荐使用函数节流）；少用全局变量避免变量污染（组间操作的时候 你的全局变量可能和他人变量重名 会导致事件异常 变量污染）；使用for循环语句代替for in语句；使用DOM2级事件而少使用DOM0级事件；用innerHTML代替DOM操作，减少DOM操作次数。