# 技术测试报告写作规范
# 报告写作内容
# 综述
- 测试的原因与目的
- 测试可用的网页地址
- 测试源码
# 技术方法
- 测试环境
- 系统配置与浏览器环境
- 测试工具
- 依赖与库
- 测试材料参数
- 测试方法
- 测试步骤
- 评分依据
- 测试要点
# 结果
每一项测试结果需要包含以下内容:
- 测试条件
- 以图表, 视频的形式展示的测试结果
- 测试结果描述
# 结论
- 结果分析
- 方案推荐
# 技术测试报告模板
# 不同图片格式加载速度 技术测试报告
## 综述
### 测试原因与目的
本次测试目的在于`通过测试不同格式的图片的加载速度`, 获取合适的 `图片配置` 参数, 为 `前端性能优化` 工作提供技术依据.
### 测试地址
[测试地址](https://example.com)
### 测试源码地址
[测试源码](https://example.com)
## 技术方法
### 测试环境
- 系统配置与浏览器环境
| 项目 | 参数 |
| -------- | --------------------------------- |
| 系统版本 | Windows 10 1909 |
| 处理器 | Intel Xeon CPU E5-2620 v4 2.10GHz |
| 内存 | 16.0GB |
| 浏览器 | Chrome/81.0.4044.122 |
- 测试工具与依赖
VsCode, Chrome 浏览器, VueJS + Vuex + Vue Router
- 测试材料参数
| 编号 | 格式 | 像素大小 | 文件大小 |
| ---- | ---- | --------- | -------- |
| 1 | jpg | 1920x1080 | 200kb |
| 2 | png | 1920x1080 | 500kb |
| 3 | svg | 1920x1080 | 5kb |
| ... | ... | ... | ... |
### 测试方法
- 测试步骤
1. 按顺序加载不同编号的测试图片
2. 记录调试工具显示的加载时长
3. 重复测试 3 次
- 评分依据
记录不同编号的图片的加载时长, 取平均值作为最后评分, 加载时长越小性能越好.
- 测试要点
- 图片的加载时长包括图片下载时间与图片渲染时间, 因此图片不能放置在本地进行测试, 需要上传至统一测试地址, 通过网络请求下载对图片加载时长进行测试.
- 图片默认保留有缓存效果, 需要清除缓存才能保证测试稳定性
## 结果
| 编号 | 加载时长 1 | 加载时长 2 | 加载时长 3 |
| ---- | ---------- | ---------- | ---------- |
| 1 | 50ms | 51ms | 48ms |
| 2 | 80ms | 75ms | 90ms |
| 3 | 20ms | 15ms | 16ms |
| ... | ... | ... | ... |
相关测试图片结果如下:
## 结论
### 结果分析
图片 1, 2, 3 具有相同的像素大小, 由于格式不同, 相同的图片内容具有不同的文件大小, 这个是影响图片下载的主要因素.
测试结果表明, svg 文件在网页下载速度最快, png 格式文件下载速度最慢. 在文件大小小于 10kb 时, 下载速度可忽略不计.
渲染过程中, svg, png 格式文件具有较好的文件清晰度, jpg 相对较差.
### 方案推荐
综合上述结果分析, 推荐在 Chrome 浏览器中, 图片的使用格式为 svg.