如何建立图片数据与用户注意力之间的连接？

生产工艺-图文渲染

如果说生产架构解决了宏观的生产工序问题，那么渲染就是面向微观的工艺问题。

渲染首先要解决的是效果统一，除了直接通过服务端渲染图片以外，在商家侧需要所见即所得的二次编辑能力，也就是对于同一套 DSL 数据协议，在前后端需保证渲染效果统一，为此我们构建了前后端同构的渲染方案，开发了基于 canvas 的画布引擎，在前端通过 UI 的包装提供图片可视化编辑能力；在云端通过 puppeteer 无头浏览器加载 canvas 画布引擎实现图片生产。

其次渲染需要保证对视觉设计的还原能力，尤其是文字渲染效果。前端渲染对丰富文字效果的支持由于字体库安装问题很难完成，同时后端也缺乏对文字效果的标准协议定义。而有了同构的渲染能力后，我们可以将前端协议的优势与后端字体库的优势结合，灵活的完成视觉还原。

淘宝首焦 banner 场景下，单字单样式的模板较普通模板在 AB 分桶试验下点击率平均提升约 13% 。

生产保障-性能优化

在 10 亿 量级的规模下，如果没有高性能的工程保障，一切效果的提升都是零，双十一期间鹿班的平均合图 RT<5ms ，从 DSL 解析到 OSS 上行链路完成平均 RT<200ms ,在没有增加机器资源的情况下，实现了相较于去年的整体系统吞吐性能提升 50% 。整个后端引擎分为两部分：

渲染：将结构化的 layer 数据转换为独立的图片数据流。不同类型图层转换交由对应的 handler 处理。执行并行化渲染。

合图：将渲染得到的多个图层数据进行图像合并计算，经过编码压缩，图片上传，得到成图。

性能优化主要分以下几点：

图层拉取并行化，本地采用 LRU-K 主动缓存，减少 tfs 拉图消耗。

GPU 显存主动调度管理，对显存预先分段分片，减少频繁显存的申请分配与释放消耗。

jpg 编码优化，通过 SIMD 进行加速，软编码的平均耗时由 70ms 下降至 20ms 。

未来展望

图片作为商品信息展示的重要载体，无论是在公域的搜索推荐还是私域的店铺详情都承担着传递商家意图与帮助消费者决策的双重作用。

对于商家：通过技术与数据赋能商家在图片生产上的持续优化，让结构化的图片能够更好的被机器理解，更高效的分发。同时增加商家的运营抓手。

对于消费者：利用更多维的图片特征获得对受众更泛化更精细的刻画能力，更好的满足甚至激发用户兴趣。

本文转载自淘系技术公众号。

原文链接：https://mp.weixin.qq.com/s/OCIo4nY2YVWHU0t5O_-a4g