前端性能优化

前端性能优化可以分为两大类分别是 页面级别优化 代码级别的优化包含DOM操作优化，CSS选择符优化以及图片优化等
前端里面包含的内容是丰富的，它包括HTML，CSS以及JS和图片等各种各样的资源。

优化的目的
加载速度更快 给用户带来更好的体验 对于开发者来说优化能够减少页面请求数，能够节省资源

1.减少http请求次数。

尽量合并图片、css、js。比如加载一个页面，如果有多个css文件的话，那么他会发送多个http请求，这样的话会让用户第一次访问你的页面会有长时间的等待，如果将多个文件合并的话，那只需要发出一次http请求，节省网络请求时间，加快网络的加载。

2.使用cdn

网络的静态资源即css、js、图片使用cdn分发，图片毅然。

3.避免空的src和href

当link标签href属性为空的时候，script标签的src属性为空的时候，浏览器渲染的时候会把当前页面的url作为他们属性的值。

4.为文件头指定Expires

expires是用来设置文件的过期时间的，一般对css、js、图片资源有效。他们可以使内容具有缓存性，这样下回再访问同样的资源的时候通过浏览器缓存区读取，不要再发出http请求。

5.使用gzip压缩内容

gzip能够压缩任何一个文本类型的响应，包括了html、xml、json，大大缩小了请求返回的数据量。

6.把css放置到顶部

网页上的资源加载时从上网下顺序加载，所以css放在页面的顶部能够优先渲染页面，让用户觉得加载很快。

7.将js放在底部

加载js会对后续的资源造成堵塞，必须等到js加载完成之后才会去加载后续的文件，所以就把js放在页面的底部最后加载。

8.避免css表达式

9.不要在html中缩放图片

比如需要图片尺寸是50*50

那就不要用一张500*500的图片

10.减少dom的数量

大原则是减少dom的数量，减少浏览器的负担

11.将css和js放到外置的文件中

目的是为了缓存文件，参考4

但是有时候为了减少请求，也会直接写在页面上，需要根据pv和ip的比例进行权衡

12.减少cookie的大小

cookie里面不要塞那么多东西，因为每一个请求都带着他跑

13.避免404 （请求失败，请求的资源路径错误）

比如外链的css、js文件都返回404，会破坏浏览器的并行加载

14.配置etags

用他来判断浏览器缓存的元素是否和原来服务器一样

15.精简css和js

这里就涉及到css和js的压缩。比如新浪的一个css文件，他把空格和回车全部去掉，减少文件的大小。现在的压缩工具很多，基本主流的前端构建工具都能进行css和js文件的压缩，如gulp、grunt等