浅谈前端性能优化

首先，我们要了解一下，前端优化的目的是什么

从用户角度，优化能够让页面加载得更快、对用户的操作响应更快，给用户提供更为友好的体验。
从服务商角度，优化能够减少页面请求数、或者减小请求所占带宽，节省资源。
大概有如下优化方法，我们看一下：

一、页面内容优化

减少http请求次数
减少DNS查询次数
避免页面跳转
缓存ajax
延迟加载（一般用在图片多的页面中，滚动时才加载）
预加载
减少DOM元素数量
减少iframe数量
避免404
二、css优化

将样式表置顶将 （CSS放在 HEAD中，防止浏览器有可能还未下载和解析到 CSS就已经开始渲染页面）
避免css表达式
用link代替@import
避免使用filters
css文件合并与压缩
三、js代码优化

将脚本置底（将脚本内容在页面信息内容加载后再加载）
使用外部javascript和css文件
去除重复脚本，避免重复的资源请求
减少DOM访问（修改和访问DOM元素会造成页面的重绘和重排，循环对DOM操作更是减慢页面加载速度）
js文件合并与压缩
四、图片优化

优化图片大小
尽量使用css sprite（精灵图也叫雪碧图）
不要在html中缩放图片
使用小且可缓存的favicon.ico
五、减少Cookie传输

Cookie包含在每次请求和响应中，太大的Cookie会严重影响数据传输，因此哪些数据需要写入Cookie需要慎重考虑，尽量减少Cookie中传输的数据量。
六、浏览器端使用缓存

CSS、JavaScript、Logo、图标这些静态资源文件更新的频率都比较低，而这些文件又几乎是每次HTTP请求都需要的，如果将这些文件缓存在浏览器中，可以极好地改善性能。
用法：通过设置HTTP头中的Cache-Control和Expires属性，可设定浏览器缓存，缓存时间可以是数天，甚至是数月。
七、服务器端使用压缩

在服务器端对文件进行压缩，在浏览器对文件解压缩，可有效减少通信传输的数据量。文本文件的压缩率可达80%以上，因此HTML、CSS、JavaScript文件启用GZip压缩可达到较好的效果。但是压缩对服务器和浏览器产生一定的压力，在通信带宽良好，而服务器资源不足的情况下要权衡考虑。