2022-06-21

SVG 图片加载 图片首次渲染 跨域 canvas 安全机制
一. 优化前问题记录
当图纸有49个 “水泵彩41” 设备时，保存时转化为图片的时间是 2183 ms
整个保存操作耗时是 2534 ms

1.png

二. 优化分析

2.png

从上面流程图中的可以分析得出，图纸信息保存过程耗时较长。接口耗时对总体影响较小，优化集中在保存图纸信息。

下面是 图纸保存 具体业务逻辑

3.png

1.业务代码相关问题记录
a. 为什么要重新构建svg
b. base64图片解决了什么问题
c. 构建好的svg又被添加到dom树上
d. 为什么在代码中使用settimeout，等待1000ms

2. 业务代码相关问题解答
   a. 重建构建SVG，是为了截取制定区域相关内容
   b. base64是为了解决图片跨域问题，跨域问题会导致canvas不能导出图片
   c. html2canvas将canvs转化为图片时，需要svg节点被添加到DOM树上，这个动作会有性能消耗
   d. settimeout是因为之前的开发者无法判断最后一张图片被渲染到屏幕到时间，只好将时间固定死，等待1000ms后再截屏

3. 技术方案

   
   
   3.png
   
   

   我们可以通过canvg工具库，canvg可以在canvas中绘制svg。并且可以设置图片加载允许跨域

   a. 使用canvg工具库
   b. 因为cdn图片资源的域名与页面的主域不同，svg图片转化为canvas时，会导致canvas被污染，导致无法调用相关截图API
   c. 将svg中图片设置允许跨域。这样就不需要对图片进行base64编码
   d. canvg图片提供第一次渲染后的生命周期钩子，我们可以在这里进行生产截屏操作。
   三. 技术调研
   四. 优化结果

4. 第一次优化后记录

   
   
   4.png
   
   

   使用计数器的形式，监听图片加载完成事件。在所有图片加载渲染完成后，立刻生成缩略图。
   优化后性能提升34%，但是会随着图片的数量增多。优化效果随之衰减。

5. 第二次优化后记录

   
   
   5.png
   
   

   在相同条件下，图纸保存中的生成缩略图的耗时 从 2183ms 优化到 目前耗时 385ms 。优化程度达 82.3%。

6. 优化细节
   优化前构建SVG使用的是模版字符串，迭代成本高。因此抽象出构建函数，参数化构建SVG。

   a. 优化前构建SVG有一些错误用法，生成缩略图时，通过绝对定位和反向位移来调整缩略图的位置。优化后，使用svg的特性。viewport来截取对于相关区域
   b. 通过Canvg的文档，我们可以通过设置canvg构建函数，来解决跨域问题。
   五. 产品相关建议

7. 保存缩略图是非重要业务，可以使用后台静默上传，而不是串行等待。导致业务体验比较差