前端性能测试要点

返回包是否进行gzip压缩？
使用[size=x-small;]httwatch[/size]抓包，看返回包的里面的content-Encoding字段（gzip）
 

是否进行了合适的缓存处理？
使用httwatch抓包，看返回包的里面的Expires或者Cache-Control字段：
这里还要关注过期时间是否设置合理（比如logo图片等长期不变的内容，我们可以做长cache，其它的可以根据业务需要设置不同的缓存时间）


js是否做了初级混淆？
使用httwatch抓包，查看content内容（空行或空格等）


http返回码检查
查看是否存在 404、50*、abort请求；另外302的跳转请求也需要检查是否确实有跳转的需要


图片大小检查
是否有超过200K的图片（一些特殊的广告图片除外）


文件访问顺序是否合理？
css加载靠前，js加载靠后，统计类需求放最后面


页面是否进行分屏加载
清空缓存，打开httpwatch，访问测试页面，待页面加载完毕后，清空httpwatch抓取的记录，然后滚动拖动滚动条访问非页面非首屏能展示的内容，如果能看到httpwatch能抓到内容，正确页面做了分屏加载，如果没有抓到内容，说明该页面没有做分屏加载。


文件是否会被重复加载？
同一个请求在一个页面出现多次


多个小图片是否合并成整图
同一类的图片是否分散加载，而不是整图的形式


静态内容和动态内容是否有考虑分域名部署
动静域名分离，主要是静态页面（图片、html等）和数据类请求域名是否分开


图片格式检查
普通图片尽量使用png格式


不要缩放固定的图像大小
查看源文件、通过IE developer或者firebug工具查看(图片的实际大小和页面展示的大小不一致）

 
是否应用了不需要文件（如js、图片等）
是否加载了一些多余的文件（比如有些页面就没有调用某个js，但访问这个页面的时候加载了）


js、css文件适当合并
多个比较小的js、css可以合并


样式引用是否使用代替@import导入
不能使用@import导入css

1、  是否符合拍拍js代码框架

2、  是否录入到前端代码开发平台

3、  可以组件化的功能是否开发为基础函数录入平台

4、  长字符串的连接是否用数组实现

5、  操作同一个dom对象的时候是否先用变量把对象预存起来。而不是反复获取。

6、  代码中所调用的接口是否已经录入到接口平台中

7、  代码注释是否合格：每个function至少有一行注释、业务初始化代码区是否每行代码一条注释




1、是否存在alert,debugger调试代码；                            //调试代码

2、是否使用jquery；                                                   //尽量减少jquery的使用

3、是否未录入系统；                                                  //所有代码逐渐录入系统中

4、是否循环获取length；                                             //采用for（var i=0,len=arr.length;i<len;i++）形式

5、是否循环绑定element；                                     //在父级element绑定操作

6、是否读取scrollTop等；                                      //减少回流和重绘

7、是否未关闭setInterval、setTimeout；                  //减少cpu消耗

8、字符串拼接是否使用数组；                                 //提高运算性能

9、是否使用window变量；                                     //尽量使用函数的闭包特性，减少全局变量的使用

10、是否使用非系统函数；                                     //所有函数尽量录入系统中，方便维护和管理，严格禁止代码中和系统中各一份差不多的代码

11、loadScript是否未注明回调函数；                        //loadscript必须注明回调函数

12、switch是否缺少break；                                    //贯穿引发的问题难以定位

13、是否使用“==”；                                                  //判断的时候必须清楚变量的可能值，使用”===”替换“==”（来自《javascript语言精粹》的建议）

14、是否使用“++”；                                                  //++和—容易引发缓冲区溢出，使用i=i+1来替换（来自《javascript语言精粹》的建议）

15、是否使用eval；                                              //代码难以阅读，性能显著降低，尽量减少使用（来自《javascript语言精粹》的建议）

16、是否使用with；                                              //代码难以阅读，性能显著降低，尽量减少使用（来自《javascript语言精粹》的建议）

17、是否使用continue；                                        //会降低性能（来自《javascript语言精粹》的建议）

18、是否缺少块符号；                                           //if(test) a=b；需修改为：if(test){a=b}，单句语法也加上{}，方便阅读

19、是否使用new；                                              //多使用函数闭包特性，减少new的使用（来自《javascript语言精粹》的建议）

20、parseInt是否未定义为10进制；                       //如果使用parseInt，则必须采用parseInt(num,10)这种形式的，否则当num为“08”这种格式的时候，结果可能不符合预期