elementui 样式渲染的慢_对 Chrome Headless 渲染的极致优化

推荐语：

作者是我组一位前端大佬， 对安全，算法， 性能优化，都有深刻的研究和实践。

本文内容来自他上个月的一个真实需求，做到了极致的性能优化，希望本文内容对你有所启发。

作者：Rex Zeng

原文链接：https://blog.rexskz.info/awb-tool-ultimate-optimization-for-chrome-headless.html

背景

有些同学对面单工具这个项目应该不算陌生，因为之前我已经写过几篇跟它相关的文章了。

它的基础功能无非就是画面单：如果你从 Shopee 上买了点东西，那么快递上面贴的面单就是用这个工具画出来的。

可能是这工具用起来比较方便，随着业务的扩张，一些不是面单的奇奇怪怪的东西也开始切换到面单工具上，例如采购系统的合同(更像是 Word 文件)、仓库的条形码(用了特殊纸张)、拣货单(可以理解成外卖单)，这就对面单工具的可扩展性提出了极高的要求。

不过这不是本文的重点，之后再专门写文章好了。

我之前写过一篇文章，讲的是如何优化编辑器的渲染效率(500 个元素从 1 s 降到 100 ms)，这个结果我已经很满意了。

但是随着大量的系统开始使用这个工具，它遇到了另外一个性能瓶颈——服务端渲染太慢了……

问题解析

一张面单，从编辑器的画布上，到生成一个 PDF，中间究竟经历了什么？

1. 前端将编辑器中的东西转换为模板语言(我们选择了 Django / pongo2)；

2. 第三方系统通过 API Call 发了一个请求，要求使用某一个模板，并提供了所有必要的数据(订单号、商品详情等)；

3. 后端对数据做了校验之后，使用模板引擎生成一份面单的 HTML；

4. 后端使用 Chrome Headless 打开刚生成的 HTML，并将其打印为 PDF；

5. 后端将 PDF 返回给第三方系统&