Web前端测试要点

Web前端测试维度：

• 功能性：功能准确性、兼容性
• 易用性：易学性、易理解性、易操做性、吸引性
• 可靠性：成熟性、容错性、稳定性、可恢复性、安全性
• 可移植性：适应性、易安装性、兼容性
• 可维护性：易分析性、易测试性
• 效率：时间特性、资源利用性

调优势：

1. 减小http请求的数量

2. 用好浏览器缓存机制

3. 利用GZIP压缩机制：只针对文本类资源有效

4. 把CSS文件放在HTML的开头

5. 把JavaScript文件放到HTML的结尾

6. 避免CSS表达式

7. 减小DNS查找：把域名解析成IP地址

8. 最好使用JavaScript压缩 var username;->var u;

9. 避免重定向redirect

10.去除重复的脚本

11.使用Ajax请求：局部刷新

12.使用CDN，内容分发网，区域类的缓存服务器，静态内容

 

HTTPWatch进行性能分析

Time Chart时间分析：

Blocked：浏览器预处理的时间----缓存查找+等待时间（线程资源占用等）

DNS Lookup：域名解析----域名解析成IP地址，一个域名只会解析一次

Connect：创建http/https链接的时间

Send：请求开始到发完的时间

Wait：服务器端的处理时间0.9 +极少的网络时间0.1

Receive：从响应的第一个字节开始到接收完为止

TTFB：从刚开始发送请求到接收第一个本身为止

Network：从刚开始发送请求到接收字节结束

 

减小请求的数量：

• 减小重定向请求
• 减小预处理的时间
• 减小TCP链接的时间
• 减小发送请求的时间
• 减小服务器端硬盘IO的时间：小图合成一张大图，前端利用css定位坐标显示特定图片；把css都写到前端代码中；较少域名的数量能够减小DNS的解析时间
• 减小浏览器渲染的时间

 

文本类资源压缩状况：HTML、CSS、JavaScript、其余文本内容

• 减小内容自己的大小—空格、tab键等不可见字符；注释；变量名或函数名使用短名称

• 使用GZIP在传输过程当中压缩

 

其余分析优化技术：

• 缓存：缓存控制有两个字段：Cache-Control有不少选项（可百度）、Expires过时时间
• Css放在开头
• JavaScript放在结尾
• CSS表达式
• Ajax请求：x-requested-with：XMLHttpRequest

 

Web可用性测试

• 用户体验性 User Experience
• 使用感觉：清爽、美观、简洁

 

兼容性测试

前端兼容性：

• 客户端操做系统：PC（windows1-10，Mac OS）、手机、响应式布局css3-media
• 客户端浏览器:IE、Firefox、Safari、Chrome、UC、Opera、QQ-360-Sohu-Baidu（手机的云测试平台）
• 客户端分辨率
• 客户端处理能力

后端兼容性：

• web服务器
• 脚本引擎
• 数据库
• 操做系统

 

安全性测试

利用安全性测试技术，找到潜在的漏洞

• 认证与受权：登陆认证；受权-权限管理；避免未经受权的页面能够直接访问（经过Session变量判断isLogin）
• Session与Cookie：Session保存在服务端、Cookie保存在客户端，避免保存敏感信息到Cookie文件中；SessionID-Cookie欺骗
• DDOS拒绝服务攻击：分布式拒绝式服务供给，疯狂的向服务器发请求
  ----肉鸡：远程控制其余电脑发送请求（扩大服务器资源）；
  ----攻击联盟
  ----利用TCP创建链接的规则三次握手 C>S、S>C、C>S，客户端用假IP向服务端发送请求，服务端没法响应则等待消耗时间，须要修改底层
• 文件上传漏洞
• XSS跨站攻击：获取用户的信息、钓鱼网站
• SQL注入
• 暴力破解