前端性能测试要点

原文地址：http://diaoge.iteye.com/blog/686638

1.返回包是否进行gzip压缩？ 

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

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


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


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


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


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


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


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


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


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


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


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

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


14.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”这种格式的时候，结果可能不符合预期