前端性能优化原则
规则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是否变化,如果变化了取最新的数据。