vue前端用服务器上路径的图片展示_谈谈前端性能自动化

前述：前段时间出了性能分析的需求，需要对前端页面性能做一套自动化测试工具。领导都发话了，那咱说干就干。花了一周时间去找资料以及匹配优秀并且合适的开源插件。花了一个月的时间(断断续续，需求也要做的~)完成了这个工具的建设和开发。目前也搭建了一套平台来支撑这样的工具使用。前端用的VUE，后端用的node(由于本人较熟悉前端)，数据库用的是mangoDB。好了，话不多说，上才艺~

设计背景 & 前端原理
设计背景：
1. 硬性需求：web端以及H5上的页面，需要进行性能分析与优化
2. 痛点：
2.1 数据收集需要手动干预：通过chrome dev-tool的Perfomance进行分析，需要手动刷新，并手动记录，需要大量的重复工作，尤其是要控制变量测试的情况；
示例：

2.2 图形化持续集成复杂：通过代码打log，即通过performance.timing中记录的TimeEvent时刻计算页面性能指标，指标的完整性和图形化展示仍需要工作量
3. 目的：将性能数据收集结合selenium，进行自动化收集，分析，处理。植入动态脚本，进行UI自动化操作时，实时收集分析数据。
浏览器渲染原理：
1. 浏览器渲染

2. 浏览器渲染引擎
2.1 浏览器是Html解析和页面最终展示的工具。
2.2 主要功能：将用户选择的web资源呈现出来，需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其它格式。在浏览器组成部分中，渲染引擎是用户直接相关，呈现用户所需页面的部分。
2.3浏览器内核[渲染引擎]：作用是将页面转变成可视化的图像结果。渲染引擎工作流：

第一步，解析HTML构建DOM树：从html标签的解析开始，将各种标签解析为dom树中的各个节点，标签和dom树种的节点是一一对应关系。
第二步，构建渲染树：将CSS和style标签中的样式信息解析为渲染树，渲染树由一些包含有颜色和大小等属性的矩形组成，将按照正确的顺序显示到屏幕上。
第三步，渲染树布局：确定每个节点在屏幕上的确切显示位置。
第四步，渲染树绘制：遍历渲染树并用UI后端层将每一个节点绘制出来。

H5页面执行过程：[页面加载耗时:firstPaint、DomContentLoaded(首屏页面可见)、OnLoadÿ