前端性能优化

开发网站的过程中我们会经常遇到各种性能优化问题，有时候会因为一些前端代码冗余或者请求过多的问题导致页面加载过慢或者交互不友好等情况的出现。所以怎么样优化前端性能就是一个必须要考虑的问题。

前端优化可以从以下几个方面入手：

（1）减少http请求，合理设置 HTTP缓存

在浏览器中输入"www.xxxxxx.com"并按下回车，浏览器再与这个URL指向的服务器建立连接，然后浏览器才能向服务器发送请求信息，服务器在接受到请求的信息后再返回相应的信息，浏览器接收到来自服务器的应答信息后，对这些数据解释执行。
而当我们请求的网页文件中有很多图片、CSS、JS甚至音乐等信息时，将会频繁的与服务器建立连接，与释放连接，这必定会造成资源的浪费，且每个HTTP请求都会对服务器和浏览器产生性能负担。

减少http的主要手段是合并CSS、合并javascript、合并图片。将浏览器一次访问需要的javascript和CSS合并成一个文件，这样浏览器就只需要一次请求。图片也可以合并，多张图片合并成一张，如果每张图片都有不同的超链接，可通过CSS偏移响应鼠标点击操作，构造不同的URL。

缓存的力量是强大的，恰当的缓存设置可以大大的减少 HTTP请求，能缓存越多越好，能缓存越久越好。

（2）请减少对DOM的操作

合理的使用JavaScript变量储存内容，考虑大量DOM元素中循环的性能开销，在循环结束时一次性写入。减少对DOM元素的查询和修改，查询时可将其赋值给局部变量。

（3）启用压缩
在服务器端对文件进行压缩，在浏览器端对文件解压缩，可有效减少通信传输的数据量。如果可以的话，尽可能的将外部的脚本、样式进行合并，多个合为一个。文本文件的压缩效率可达到80%以上，因此HTML、CSS、javascript文件启用GZip压缩可达到较好的效果。

（4）懒加载图片

当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度。

（5）将CSS和JS放到外部文件中引用，CSS放头，JS放尾

这样可以防止因JavaScript过与庞大和复杂而阻止页面的渲染，同时也可以对css和js做很好的区分，修改起来方便。

（6）压缩图片和使用图片Sprite技术

（7）注意控制Cookie大小和污染

因为Cookie是本地的磁盘文件，每次浏览器都会去读取相应的Cookie，所以建议去除不必要的Coockie，使Coockie体积尽量小以减少对用户响应的影响；
Cookie是有生命周期的，所以请注意设置合理的过期时间，合理地Expire时间和不要过早去清除coockie，都会改善用户的响应时间。

关于前端性能优化的方法还有很多种，如代码层面的优化，虚拟dom等等，需要我们不断的探索和研究。