【Web技术】972- 纯前端生成海报实践及其性能调优

骑猪看日落 2022-10-05 02:55 138阅读 0赞

### 1 需求背景 ###

接到了一个紧急需求，需要根据 Excel 表格中学生的信息以及考试成绩生成相应的海报。

Excel 数据和需要生成的海报的样式如下：

![b27894e9d1c981cc04393d31a837ca12.png][]

Excel 数据

![7c9c71bb44e1d3d03a99935a29b95532.png][]

海报样式

由于需求紧急，没有时间拉上后端同学，所以 Excel 表格的数据解析和海报生成功能都需要由前端开发。

以下几个技术点需要关注：

1. Excel 可以通过 sheetjs来处理，通过在 `XLSX.utils.sheet_to_json` 将 Excel 中的数据转化为 JSON 格式数据。

2. 海报图片的生成可以先通过 html2canvas 将 HTML 转化成 canvas ，然后通过 `canvas.toBlob` 获得。

3. 最终通过JSZip 将图片打包进压缩包中。

4. 这里表单可配置项会比较多，因此我们需要一个配置导入导出功能，这里我们可以使用 FileReader 来实现表单配置导入，`FileReader.readAsTextapi` 能够读取文本的内容，更多用法可以参考 MDN FileReader。

在此基础上，确定此需求的总体开发思路：

1. 首先我们需要一个表单，获得海报可变文案的配置信息，例如不同题目考试成绩所对应的评语。

2. 遍历 Excel 中的每一条数据，根据每一条数据和表单的配置信息生成对应海报的 HTML 模板。

3. 根据 HTML 模板生成图片，并将图片数据保存进压缩包的对象中。

4. Excel 中的数据处理完后，下载压缩包，结束流程。

按照这个流程将功能开发完毕后，我在自己的机器上使用 100 条数据量的 Excel 表格进行测试，可以成功生成对应的压缩包，压缩包中的图片也没有问题，给运营同学演示后，她也表示很满意。

### 2 测试问题 ###

但是当天晚上运营同学在自己的电脑测试这个工具时，悲剧发生了……

![7a89c1b6bde043156a1f9cff54be8500.png][]

网页崩溃

在运营同学的电脑上，使用 15 条 Excel 表格数据生成海报时表现正常，当增加到 20 条 Excel 表格数据时，出现了网页崩溃的情况，提示 Out Of Memory。

### 3 分析问题 ###

#### **3.1 js内存问题** ####

现在让我们来一起分析一下，在哪里出现了问题？

分析发现，最有可能出现问题的地方是步骤 3——最终通过JSZip将图片打包进压缩包中**。**

压缩包对象所占用的内存在 Excel 表格数据处理完成并下载之前是不会被释放的，会一直增长。

所以我们有了一个简单的方案——分包。每处理 10 条数据就下载一次压缩包，将 JSZip （压缩包对象）所占用的内存释放。

但是事情真的有这么简单吗？20 张图片的数据以每张 1MB 的大小计算也才 20MB，怎么可能会导致网页崩溃呢？

凭空猜测没有作用，我们**使用浏览器的 Performance 工具进行分析**。

![b323085e37f044bc35e841fa7039c531.png][]

网页内存增长情况 1

可以看到 JS Heap 在每处理一条 Excel 表格数据后都会增长，没有得到释放，这里没有得到释放的内存占用是上文分析的 JSZip 导致的吗？

继续**使用浏览器的 Memory 工具进行分析**。

![809217f42bb18fc19162abfc028c4847.png][]

网页内存快照

可以看到，内存占用确实是一直在涨，没有得到释放，放大其中的一项。

![19722699dc53641cb36ba376ade0fde2.png][]

网页内存快照详细信息

什么？竟然是 `system.context` ？作为一个前端开发，相信你看到这个词脑子里第一个冒出的念头应该就是上下文。检查代码，发现**代码中使用了递归，所以造成了大量内存的使用**，这里就不展示问题代码了。

将代码修改为循环语句后，再进行测试。

![583fb434bf5f006b4d1187ac933217fd.png][]

网页内存增长情况 2

可以看到内存的增长已经正常。让运营同学再次进行测试。

#### 3.2 DOM 问题 ####

问题就这样被解决了吗？

信心满满的找到运营同学进行测试，结果出乎意料，运营同学的电脑依然处理不了 40 条以上的 Excel 表格数据，而且在测试中还出现了一个问题，数据处理到某个阶段时，会卡住很久！

为了解决问题，我们继续进行分析。

**排查内存溢出的问题可以从两方面入手——JS 和 DOM**。既然 JS 的问题我们已经解决，那就看看 DOM。

整体流程中，对 DOM 进行操作的地方有两点:

1. 根据 Excel 表格数据生成对应海报的 HTML 模板。

2. 根据 HTML 模板生成图片。

第一点应该不存在内存溢出问题，因为我们既没有在 HTML 模版上添加事件，在处理下一条数据时也是直接覆盖上一次生成的HTML 模板，不会导致 DOM 节点不停增加。

继续分析第二点，我使用了第三方库 html2canvas ，由对应的节点生成 canvas 对象，之后由 canvas 对象生成图片的二进制数据。

根据 html2canvas 文档的指引，设置 `removeContainer` 属性保留其生成 canvas 对象时所克隆的 DOM 元素并查看。

![80e80bd96f8bb556b32a34c5fbd2299b.png][]

DOM结构

结果出乎意料，html2canvas 完整的克隆了我们的 DOM 结构，除目标节点外还克隆了 React 的根结点，script 标签，link 标签。

此时，数据处理慢以及在处理某条数据时卡慢的问题就清楚了，由于 html2canvas 完整的克隆了我们的 DOM 结构，不仅复制了很多没用的节点，而且**由于克隆了 script 标签，link 标签，还会发起网络请求下载相关的资源**。

我们需要把进行操作的节点插入在 body 标签下，根据文档指引，可以使用 html2canvas 提供的`ignoreElements`属性解决以上问题：

const canvas = await html2canvas(root, {
      imageTimeout: 10000,
      ignoreElements: (ele) => ele.id === 'root' || ele.tagName.toUpperCase() === 'IFRAME' || ele.tagName.toUpperCase() === 'SCRIPT' || ele.tagName.toUpperCase() === 'LINK',
    });

通过以上代码，我们将无用的节点和会造成网络请求的标签进行了过滤。

优化过后，再让运营同学进行测试，这时处理一千条数据的 Excel 表格数据也不会再出现网页崩溃的问题了，同时处理速度也大大提升，1000 条数据在 4 分钟内可以处理完毕。

### 4 小结 ###

回到最开始，JSZip 占用的问题依然存在，我们依然需要进行分包，不过分包的大小可以提升到1000条数据。

但是我们可以看到，如果不能找到问题的根本所在，一开始就进行分包也无济于事。

网页显示“喔唷，崩溃啦！”怎么办？请别着急，仔细分析才能解决问题。

![23b45e707f153ed1a7f3eda4d087af48.gif][]

[1. JavaScript 重温系列（22篇全）][1. JavaScript _22]

[2. ECMAScript 重温系列（10篇全）][2. ECMAScript _10]

[3. JavaScript设计模式 重温系列（9篇全）][3. JavaScript_ _9]

4. [正则 / 框架 / 算法等 重温系列（16篇全）][_ _ _ _ _16]

5. [Webpack4 入门（上）][Webpack4]|| [Webpack4 入门（下）][Webpack4 1]

6. [MobX 入门（上）][MobX] || [MobX 入门（下）][MobX 1]

7. 120[\+篇原创系列汇总][Link 1]

![fd5b01bfbb843c945ccb20c8f8a67c1e.gif][]

回复“**加群**”与大佬们一起交流学习~

点击“**阅读原文**”查看 120+ 篇原创文章

[b27894e9d1c981cc04393d31a837ca12.png]: /images/20221005/fc9471f7037442e28238212ddf884ac1.png
[7c9c71bb44e1d3d03a99935a29b95532.png]: /images/20221005/ee3eaf80d6fa47e69e2f9d3836b39cd1.png
[7a89c1b6bde043156a1f9cff54be8500.png]: /images/20221005/dc16ea81c78542bf99ce455d2b2de707.png
[b323085e37f044bc35e841fa7039c531.png]: /images/20221005/013033d558fd4d119d197cb7691d5538.png
[809217f42bb18fc19162abfc028c4847.png]: /images/20221005/0b98333e51904b4997a96cc288a5239d.png
[19722699dc53641cb36ba376ade0fde2.png]: /images/20221005/e17c993e01c34497874bfc8bc45699b1.png
[583fb434bf5f006b4d1187ac933217fd.png]: /images/20221005/e5251cdbf3cd42b28d16c57b9a6a0cb3.png
[80e80bd96f8bb556b32a34c5fbd2299b.png]: /images/20221005/629037d03feb4162ada66a2d062e1189.png
[23b45e707f153ed1a7f3eda4d087af48.gif]: /images/20221005/a517e7eac35a440ca84f9e87c68bb51e.png
[1. JavaScript _22]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224ea86b5adfc10c3aa1841be3879b9360d671e98cc73391c2490246f1348857b9821d32c&idx=1&mid=2458453187&scene=21&sn=a69b4d7d991867a07a933f86e66b9f55#wechat_redirect
[2. ECMAScript _10]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e086b5adf6dad41a0d36b77a9bfb4bc9f0d29a816266b3e28c892e54274967dbce380b&idx=1&mid=2458453193&scene=21&sn=e5392cb77bc17c9e94b6c826b5f52a83#wechat_redirect
[3. JavaScript_ _9]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e386b5adf554ab928cdeaf7ee16dbb2d895be17f2a12a59054a75b913470ca7649bbc7&idx=1&mid=2458453194&scene=21&sn=e7f0734b04484bee5e10a85a7cbb85c1#wechat_redirect
[_ _ _ _ _16]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224e286b5adf432850f82db18cc8647d639836798cf16b478d9a6f7c81df87c6da5257684&idx=1&mid=2458453195&scene=21&sn=1e0c8b7ea8ddc207b523ec0a636a5254#wechat_redirect
[Webpack4]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251f86b5ac09dbbbb7c8e1d80c6cbd793a523cdfa690f8734def57812e616b9906aeec79&idx=1&mid=2458453302&scene=21&sn=904e40a421024ea0d394e9850b674012#wechat_redirect
[Webpack4 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2251e86b5ac08464872cd880811423e0d1bbcebbe11dcac9d99fa38c5332c089c06d65d95&idx=1&mid=2458453303&scene=21&sn=422f2b5e22c3b0e91a8353ee7e53fed9#wechat_redirect
[MobX]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264c86b5af5aa7300a04d55efead6223e310d68e10222cd3577a25c783d3429f00767960&idx=1&mid=2458453605&scene=21&sn=0a506769d5eeb7953f676e93fb4d18eb#wechat_redirect
[MobX 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c2264086b5af5611524eedb0d409afe86d859dce6ceff1c17ddab49d353c385e45611a73fa&idx=1&mid=2458453609&scene=21&sn=f0c22e82f2537204d9b173161bae6b82#wechat_redirect
[Link 1]: http://mp.weixin.qq.com/s?__biz=MjM5MDc4MzgxNA%3D%3D&chksm=b1c224dd86b5adcbd98189315e60de6a0106993690b69927cc1c1f19fd8f591fefce4e3db51f&idx=2&mid=2458453236&scene=21&sn=daf00392f960c115463c5aaf980620b4#wechat_redirect
[fd5b01bfbb843c945ccb20c8f8a67c1e.gif]: /images/20221005/0ef597fc88c04dffad008ffac7642996.png