推荐语:
作者是我组一位前端大佬, 对安全,算法, 性能优化,都有深刻的研究和实践。
本文内容来自他上个月的一个真实需求,做到了极致的性能优化,希望本文内容对你有所启发。
作者:Rex Zeng
原文链接:https://blog.rexskz.info/awb-tool-ultimate-optimization-for-chrome-headless.html
背景
有些同学对面单工具
这个项目应该不算陌生,因为之前我已经写过几篇跟它相关的文章了。
它的基础功能无非就是画面单:如果你从 Shopee 上买了点东西,那么快递上面贴的面单
就是用这个工具画出来的。
可能是这工具用起来比较方便,随着业务的扩张,一些不是面单的奇奇怪怪的东西也开始切换到面单工具上,例如采购系统的合同(更像是 Word 文件)、仓库的条形码(用了特殊纸张)、拣货单(可以理解成外卖单),这就对面单工具的可扩展性提出了极高的要求。
不过这不是本文的重点,之后再专门写文章好了。
我之前写过一篇文章,讲的是如何优化编辑器的渲染效率
(500 个元素从 1 s 降到 100 ms),这个结果我已经很满意了。
但是随着大量的系统开始使用这个工具,它遇到了另外一个性能瓶颈——服务端渲染太慢了……
问题解析
一张面单,从编辑器的画布上,到生成一个 PDF,中间究竟经历了什么?
前端将编辑器中的东西转换为模板语言(我们选择了 Django / pongo2);
第三方系统通过 API Call 发了一个请求,要求使用某一个模板,并提供了所有必要的数据(订单号、商品详情等);
后端对数据做了校验之后,使用模板引擎生成一份面单的 HTML;
后端使用 Chrome Headless 打开刚生成的 HTML,并将其打印为 PDF;
后端将 PDF 返回给第三方系统&