前端性能优化
1:尽量减少HTTP请求
2:使用内容发布网络(CDN的使用)
3:添加Expries头
4:压缩组件
5:将CSS样式表放在顶部
6:将JS脚本放在底部
浏览器在加载css文件时,页面逐步呈现会被阻止,直到所有css文件加载完毕,所以要把css文件的引用放到head中去,这样在加载css文件时不会组织页面的呈现。但是对于js文件,在使用的时候,它下面所有也页面内容的呈现都会被阻塞,将脚本放在页面越靠下的地方,就意味着越多的内容能够逐步呈现。
7:避免使用CSS表达式
CSS表达式是动态玩CSS的一种很强大的方式,但是强大的同时也存在很高的危险性。因为css表达式的频繁求值会导致css表达式性能低下。如果真想玩css表达式,可以选用只求值一次的表达式或者使用事件处理来改变css的值。
8:使用外部JS和CSS
内联js和css其实比外部文件有更快的响应速度,那为什么还要用外部呢?因为使用外部的js和css可以让浏览器缓存他们,这样不仅HTML文档大小减少,而且不会增加HTTP请求数量。
另外,使用外部js和css可以提高组件的可复用性。
9:减少DNS查询
DNS查询有时间开销,通常一个浏览器查找一个给定主机名的IP地址需要20-120ms。
缓存DNS:缓存DNS查询可以很好地提高网页性能,一旦缓存了DNS查询,之后对于相同主机名的请求就无需进行再次的DNS查找,至少短时间内不需要。
所以在使用页面中URL、图片、js文件、css文件等时,不要使用过多不同的主机名。
10:精简JS
如何精简?最初始的精简方式就是移除不必要的字符减小js文件大小,改善加载时间。包括所有的注释、不必要的空白字符。
高级一点的精简方式就是:混淆。它不但会移除不必要的字符,还会改写代码,比如函数和变量的名字会被改成很短的字符串,这样使js代码更简练更难阅读。
其实实际开发过程中,从文件大小和代码可复用性来说,不仅仅是js代码需要精简,css代码一样也很需要精简。
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是否变化,如果变化了取最新的数据,如果不变化,则不变。