提升前端性能优化方法

一、服务器端

1.减少网络请求，合并请求，包括JS、CSS，使用雪碧图CSS Sprite，内联小图片使用Base64；

2.使用内容分发网络CDN；

3.适当使用缓存；

4.启用GZIP压缩；

5.减少DNS查找；

6.避免重定向；

7.配置有效的ETAG；

8.让AJAX请求可缓存；

9.尽快输出第一个字符；

10.使用无cookie域名加载静态资源；

二、浏览器端

1.把CSS放在Head中加载，这样可更早开始加载，避免闪屏；

2.把JS放在Body末尾加载，因为JS脚本文件加载时会阻塞html和css渲染；

3.不使用css表达式；

4.用外联方式引用css和js，减少html体积

5.压缩js和css，删除不必要的注释和空白

6.不要重复加载js

7.get方式发起ajax请求；

8.延时加载-懒加载，关键资源优先加载；

9.减少Dom节点；

10.避免使用Iframe,必要时可采用load；

11.尽量减少cookie体积，因为cookie请求时会被带上；

12.减少Js中的Dom访问；

13.充分使用JS事件机；

14.使用常见的图片优化手段（pngcrush、jpegtran、pngquant）；

15.尽量不在html中缩放图片；

16.尽量不要把img的src置空；

17.任何资源都要在25k以内。

三、性能诊断工具：

yslow、webpagetest、googlepagespeed、性能魔方、阿里测、17CE

推荐使用性能魔方，国内的服务响应比较快