前端性能优化

有以下总结。 前端性能的优化主要分为两大类 分别是页面级别的优化、代码级别的优化。

优化的目的 优化的目的在于页面加载更加快，对用户的操作响应更加及时，为用户带来更加好的体验，对于开发者来说能够减少页面的请求数，能够节省资源。 

优化的方法

前端优化的方法有很多种，可以将其分为两个大类。第一类是页面级别的优化（如http请求数、内联脚本的位置优化等）。第二类是代码级别的优化（例如JavaScript中dom操作优化、css选择符优化、图片优化以及HTML结构优化）。

现在详细对其进行展开。

页面级别的优化主要分为下面几类

http请求数

减少http请求数是前端性能优化最重要也是最有效的方法。

可以通过下面的方法来减少http请求数。

合理设置http缓存，恰当的缓存设置可以大大减少http请求。

从设计实现层面上简化页面，保持页面简洁，减少资源使用是最直接的方法。

资源合并与压缩，对外部的脚本、样式进行合并，多个合并为一个。

css雪碧图，通过合并css图片，来实现减少请求。

内联脚本位置（浏览器是并发请求的）

浏览器是并发请求的，外联脚本在加载时会堵塞其他资源（脚本在加载完成之前，脚本后面的图片处于一个堵塞的状态，直到脚本加载完成之后才开始加载，如果脚本放在靠前的位置，会影响整个页面的加载速度从而影响用户体验，所以要尽可能将脚本往后面移，减少并发下的加载影响）。

代码级别的优化

dom操作优化

要避免在document上直接操作dom元素。如可以使用类名代替大量内联样式的修改。

图片的优化

对图片进行压缩。

css选择符

浏览器对css的代码是从右向左解析的。