前端性能优化

对于老板来讲，肯定希望用较低的成本开发一个高性能的网站，增加用户访问量，那么提高网站性能有哪些方法呢？下面就简单介绍一下雅虎--YAHOO 军规中的14条优化前端性能方面的方法，提高网站速度！

1.尽可能的减少HTTP请求数：

什么是HTTP请求呢？就是你打开网页时所看到的文字，图片，多媒体等，这一切的内容都是从服务器获取的，每一个内容的获取就是一个http请求。

2.使用CDN（内容分发网络）：

这个是要话费money的，CDN简单通俗的来讲就是在离你最近的地方，放置一台性能好，连接顺畅的副本服务器，让你能够以最近的距离最快的速度获取内容，相当于服务器复制，一般我们都是在上面放一些静态资源，一些不经常变动的资源来

减轻服务器压力，如果放一些动态资源，更新速度会很慢，就达不到我们要的效果了。

3.添加Expire/Cache-Controller头

Expire头的内容是一个时间值，值就是资源在本地的过期时间，存在本地，在本地缓存阶段找到一个对应的资源值，一旦发现当前时间还没有超过过期时间，就是用本地资源，不会发送HTTP请求。

Cache-Controller是http协议中常用的头部之一，顾名思义，他是负责页面的缓存机制，如果该头部指示缓存，缓存的内容也会存到本地，操作流程和expire相似，但也有不同的地方。Cache-Controller有更多的选择，而且有更多的处理方式。

4.启动Gzip压缩

很多文件都可以压缩，压缩可以大大的减少体积，方便轻巧，大大的提升下载速度。

5.将css放在页面最上面

页面执行过程是自上而下执行，将css放在页面的最上面，避免出现样式闪烁问题。

6.将Script放在页面最下面

将js放在上面，并行下载量加大，会阻止dom数的解析过程。

7.避免在css中使用Expressions

要避免在css中使用Expressions，因为表达式每一次执行页面都要重新计算一次。

8.把javascript和css都放在外部文件中

把javascript和css都放在外部文件中，有利于脚本维护，提高js和css的复用性，减少页面体积。当然对于js和css是单独提取还是写在页面内，各有各的好处，写在页面内，可以减少页面请求，提升页面渲染速度，但是

这只适合单一的页面，不经常访问的页面，页面样式少的情况下。

9.减少DNS查询。
每次访问一个地址，地址要经过域名解析找到对应的ip地址，再经过DNS查询到相应的服务器，这个过程一般在20ms左右。所以设置一下缓存用来节省时间，每个浏览器缓存时间不一样，ie为30m，火狐和谷歌为60m，这个应该和供应商

有关系，当缓存时间长时：能减少DNS的重复查找，节省时间。当缓存时间短时：即使检测网站服务器的变化，保证正确性！

10.压缩Javasrcipt和CSS

去除不必要的空白符，格式符，注释符

简写方法名，参数名和压缩js脚本。

11.避免重定向

重定向会增加请求次数，这里要说一下301和302的区别

301：被移到了另外的位置

        永久重定向（会被搜索引擎记住，并删除更改为最新的地址，下次直接访问）

302：被找到了

　　　临时重定向（下次搜索引擎还会接着跳转）

12.移除重复的脚本

当引入重复的脚本时，重复的脚本都会执行，不信可以自己写个测试脚本试一下，这样不仅达不到我们想要的结果，而且会大大的影响到性能。

13.配置实体标签Etags

Etags（实体标签）属于http协议，受web服务支持，是使用特殊字符串来标识某个请求的资源版本，当用户get请求时服务器首先会检测传过来的Etag和服务器上的是否一致，一致的话返回304状态码，说明没有变化直接

去本地缓存数据就可以了，服务器就不需要执行了。

14.使用AJAX缓存

Ajax缓存只能缓存Get请求，不能缓存POST请求。