前端性能优化原则

规则01：尽可能减小HTTP请求

1.合并图片CSS Sprites

规则02：使用内容发布网络（CDN的使用）

CDN的全称是Content Delivery Network，即内容分发网络。其目的是经过在现有的Internet中增长一层新的网络架构，将网站的内容发布到最接近用户的网络"边缘"，使用户能够就近取得所需的内容，解决Internet网络拥挤的情况，提升用户访问网站的响应速度。

规则03：添加Expires头

浏览器使用缓存来减小HTTP请求的数据，并减少HTTP响应的大小，使页面加载更快。html5缓存

规则04：压缩组件（使用Gzip方式）

压缩js,css

规则05：将CSS样式表放在顶部

规则06：将javascript脚本放在底部

规则07：避免使用CSS表达式

CSS表达式是动态玩CSS的一种很强大的方式，可是强大的同时也存在很高的危险性。由于css表达式的频繁求值会致使css表达式性能低下。若是真想玩css表达式，能够选用只求值一次的表达式或者使用事件处理来改变css的值。

规则08：使用外部javascript和CSS

内联js和css其实比外部文件有更快的响应速度，那为何还要用外部呢？由于使用外部的js和css可让浏览器缓存他们，这样不只HTML文档大小减小，并且不会增长HTTP请求数量。另外，使用外部js和css能够提升组件的可复用性。

规则09：减小DNS查询

DNS查询有时间开销，一般一个浏览器查找一个给定主机名的IP地址须要20-120ms。缓存DNS：缓存DNS查询能够很好地提升网页性能，一旦缓存了DNS查询，以后对于相同主机名的请求就无需进行再次的DNS查找，至少短期内不须要。因此在使用页面中URL、图片、js文件、css文件等时

规则10：精简javascript

如何精简？
其实W3Cfuns已经给你们准备好精简JS所需的全部工具“前端神器”，这点W3Cfuns为你们作的很不错，在这个规则里咱们就用到“JS压缩/混淆/美化工具”
最初始的精简方式：就是移除没必要要的字符减少js文件大小，改善加载时间。包括全部的注释、没必要要的空白字符。

高级一点的精简方式就是：混淆。
它不但会移除没必要要的字符，还会改写代码，好比函数和变量的名字会被改为很短的字符串，这样使js代码更简练更难阅读。

规则11：避免重定向

重定向的英文是Redirect，用于将用户从一个URL从新跳转到另外一个URL。
最多见的Redirect就是301和302两种。
关于重定向的性能影响这里就不说了，自行查阅相关资料吧。
在咱们实际开发中避免重定向最简单也最容易被忽视的一个问题就是，设置URL的时候，最后的“/”，有些人有时候会忽略，其实你少了“/”，这时候的URL就被重定向了，因此在给页面连接加URL的时候切记最后的“/”不可丢。

规则12：删除重复脚本

重复的js代码除了有没必要要的HTTP请求以外，还会浪费执行js的时间。
将你使用的js代码模块化，能够很好地避免这个问题，至于js模块化如何实现，如今有不少可使用的开源框架。

规则13：配置ETag

Etag（Entity Tag），实体标签，是Web服务器和浏览器用户确认缓存组件的有效性的一种机制。写的很复杂，对我这种非专业的前端开发人员来讲，有点过了，关于这个原则有兴趣的本身看吧。

规则14：使Ajax可缓存

针对页面中主动的Ajax请求返回的数据要缓存到本地，固然这个是针对短时间内不会变化的数据。若是不肯定数据变化周期的话，能够增长一个修改标识的判断，我正常处理过程当中会给一些Ajax请求返回的数据增长一个MD5值的判断，每次请求会判断当前MD5是否变化，若是变化了取最新的数据。