前端优化技巧

总结一些前端优化技巧：

减少HTTP请求

• 把CSS/JS文件进行合并压缩(前端压缩一下,服务器做一下GZIP压缩),一个页面只有一个CSS/JS。
• 在移动端页面开发过程中,如果CSS/JS的代码量不是很多的话,我们尽量使用内嵌式。
• 数据缓存(localStorage):把我们的CSS/JS代码存储到本地,下一次刷新页面的时候直接的在本地缓存中读取即可,不需要重新的发送HTTP请求了(需要更新可以通过JS的版本号来实现更新)。
• CSS SPRITE 把静态的资源图片进行合并,合并到一张大图上,通过POSITION定位找到具体的图片,这样的话只需要发送一次HTTP请求即可。
• 能够用代码(SVG)绘制出来的图片我们尽量不使用IMG来做。
• 图片的延迟加载：首屏图片等到一段时间在进行加载,其它屏幕的图片当页面滚动到对应区域的时候在进行延迟加载。
• 静态资源小图可采用BASE64技术进行编码。
• 数据的异步加载:第一次只请求出部分数据(一般都是一到两屏幕的数据),当我们滚动到的底部的时候在开始加载下面的两屏幕数据(上拉/下拉刷新)。
• 数据缓存(localStorage):第一次把请求回来的数据保存在自己的本地,在有效时间内,我们刷新页面的时候,只需要把本地的存储数据获取到绑定到页面中即可,不需要重新的发送Ajax请求,直到时间过期,在从新的发送请求,用最新请求的数据替换本地之前存储的数据。
• 把音视频播放进行延迟加载(PRELOAD='NONE'),在JS中做延迟播放,播放的时候在加载资源;有条件的话可以把音视频都用文件流的方式进行操作;

减少HTTP请求资源的大小

• 雅虎优化34条建议
• CSS/JS去除冗余代码(低耦合高内聚)
• 图片尽量压缩
• 每一次请求回来的数据尽量少一些,我们可以分批请求
• 所有的CSS/JS上传到服务器的都是经过压缩过的

代码优化

• 尽量减少不销毁闭包的使用(堆栈内存的释放问题)
• 尽量多使用异步编程,少使用同步编程
• 移动端开发,能够使用CSS实现的功能最好也不用JS;能够使用CSS3实现的动画,绝对不用JS;能用TransForm实现的动画尽量用它实现(TransForm开启了硬件加速);能够自己使用原生的JS实现的,绝对不用任何的框架或者类库(多人开发,项目偏大,我们在使用相关的框架);