前端性能优化方案

一、使用CDN【内容分发网络】加速

1、CDN

CDN【Content Delivery Network】，即内容分发网络。属于http缓存技术中的一种。

2、原理：

    其基本思路是尽可能避开网络上可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。CDN管理分布在多个地理位置上的服务器，其系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重定向到一个能提供最好用户体验的服务节点上。
    总的来说，内容服务基于缓存服务器，也称作代理缓存【网关缓存】，它位于网络的边缘，据用户仅“一跳”之隔。代理缓存提供数据中心服务器的一个镜像，当用户对某网址访问的请求并非第一次，那么代理缓存在很大概率上缓存了域名，就不需要大费周章通过DNS【域名服务系统】来获取对应域名。
    这里引用一个很喜欢的小比喻：古代交通不便，当有蛮夷入侵【用户请求】时朝廷从京城【数据中心服务器】调兵到边防，等军队到达的时候敌人早已一溜烟儿跑了。于是君主改变策略，将一批军队调配到边防驻扎，这些边防部队就能有效抵御入侵，正如代理缓存能快速响应用户请求\(^o^)/~

二、减少http请求【减少请求数，降低请求量】

1、脚本合并

原理

通常一个大型网站需要依赖多个JS文件。可以把多个文件合并成一个，这样只需要引用一个

方法

① Grunt
② JSCompress

2、CSS雪碧图

优点

① 减少http请求，提高页面加载速度。只需加载一张图片，且由于只需要一个对应的色表，这张图片的大小很可能比拼合前的总尺寸小。
② 减少鼠标滑过的bug：IE6不会主动预加载：hover中的背景图片，因此使用多张图片时会出现闪白的现象。

缺点

① 最大的问题是内存的使用：除非非常小心的组织，否则会留下大量无用的空白。
② 影响页面缩放功能：缩放时要避免雪碧中相邻图片露出来。

3、文件压缩

原理

包括CSS、JavaScript、图片的压缩。
JavaScript：

• > 最小化：删除注释和空格等不必要的字符。安全、直白