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注入
- 暴力破解