SVG 图片加载 图片首次渲染 跨域 canvas 安全机制
一. 优化前问题记录
当图纸有49个 “水泵彩41” 设备时，保存时转化为图片的时间是 2183 ms
整个保存操作耗时是 2534 ms
二. 优化分析
从上面流程图中的可以分析得出，图纸信息保存过程耗时较长。接口耗时对总体影响较小，优化集中在保存图纸信息。
下面是 图纸保存 具体业务逻辑
1.业务代码相关问题记录
a. 为什么要重新构建svg
b. base64图片解决了什么问题
c. 构建好的svg又被添加到dom树上
d. 为什么在代码中使用settimeout，等待1000ms
业务代码相关问题解答
a. 重建构建SVG，是为了截取制定区域相关内容
b. base64是为了解决图片跨域问题，跨域问题会导致canvas不能导出图片
c. html2canvas将canvs转化为图片时，需要svg节点被添加到DOM树上，这个动作会有性能消耗
d. settimeout是因为之前的开发者无法判断最后一张图片被渲染到屏幕到时间，只好将时间固定死，等待1000ms后再截屏-
技术方案
3.png
我们可以通过canvg工具库，canvg可以在canvas中绘制svg。并且可以设置图片加载允许跨域
a. 使用canvg工具库
b. 因为cdn图片资源的域名与页面的主域不同，svg图片转化为canvas时，会导致canvas被污染，导致无法调用相关截图API
c. 将svg中图片设置允许跨域。这样就不需要对图片进行base64编码
d. canvg图片提供第一次渲染后的生命周期钩子，我们可以在这里进行生产截屏操作。
三. 技术调研
四. 优化结果 -
第一次优化后记录
4.png
使用计数器的形式，监听图片加载完成事件。在所有图片加载渲染完成后，立刻生成缩略图。
优化后性能提升34%，但是会随着图片的数量增多。优化效果随之衰减。 -
第二次优化后记录
5.png
在相同条件下，图纸保存中的生成缩略图的耗时 从 2183ms 优化到 目前耗时 385ms 。优化程度达 82.3%。
-
优化细节
优化前构建SVG使用的是模版字符串，迭代成本高。因此抽象出构建函数，参数化构建SVG。a. 优化前构建SVG有一些错误用法，生成缩略图时，通过绝对定位和反向位移来调整缩略图的位置。优化后，使用svg的特性。viewport来截取对于相关区域
b. 通过Canvg的文档，我们可以通过设置canvg构建函数，来解决跨域问题。
五. 产品相关建议 保存缩略图是非重要业务，可以使用后台静默上传，而不是串行等待。导致业务体验比较差
