QWebEngine图片渲染性能优化

1.场景

我们有一个这样的场景，就是利用QWebEngine把网页渲染成图片，再传给服务器。

我们当初采用QWebKit来渲染的，因为考虑网页可以更灵活，而且实现起来简单。

当时当我们升级Qt版本从5.5升级到5.15之后就发现，在性能差的虚拟机里面渲染2张图片，几百KB的图片就已经很吃力了。往往渲染的图片不正常，有部分黑影。最主要的就是图片渲染得不全，一边有图片一边是黑色背景。

2.如何优化

我先说下我的解决方案：

1、先把宽度固定了，在代码不需要进行宽度 resize操作。

2、监听浏览器的控件大小resize已完成。

3、把网页当成模板，动态得替换里面固定的内容。减少浏览器和js的交互。

这样几个操作下来，在原来的虚拟机上可以渲染到20张图片，将近2.7M图片没什么问题。

3.怎么做的优化

在说到这块的优化时候，我第一反应就是去找负责这块网页的同事。意思很简单给一个稳定的回调给我。

当网页加载完成之后，去回调我，我再去渲染图片。折腾了一天得出的结论网页也不知道图片是否真的加载完成，以及字体是否渲染完成。

因为我已经监听了网页加载完成的消息，但是我发现其实网页并没有渲染完成。也就是时机不对。前端同事也没招了。

我只能一点点的试到底是哪里消耗性能。

我寻找的思路很简单，尽量少的对浏览器进行耗时操作，其实我也不知道那些是耗时操作，我只能试。

所以我在UI文件中就将浏览器的宽度固定了，减少对宽度的resize。

经过不断的测试，我还发现监听浏览器控件的高度，可以提高一些准确度。原本我是监听父控件的大小。

但是感觉还是差的很远。

我再仔细观察浏览器的显示过程，总是发现文字是最后才能渲染完成。而这个文字的节点，是前端同事一个个append上去，也就是插入加入进去的。

所以我有个想法，我直接在html里面写死了。我可以把他的文件当成模板，在里面加上几个占位符。数据都是我提供的，在生成html直接字符串一替换就可以了。

好，想法有了。立马动手测试。

果然，一测试效率立马上来了。哈哈……是个值得高兴的事情，折腾我2天的时间了。

果然，要想跑得快，缓存少不了啊。本质还是对缓存的控制，原本是运行时去操作。我现在改成了生成的时候就有。

这让我想到了编译器在编译的时候也会有类似的操作在编译期间生成结果，减少运行时的运算，从而达到性能的优化。

4.总结

通过这次的优化，让我感觉缓存的重要性。

优化是个很艰巨的任务，要是没有方向的时候就像无头苍蝇一样乱飞。所以找到关键点很重要。

一般优化的思路其实不难：

1、减少不必要的操作。

2、减少不必要的数据拷贝。

3、高效的结构。

4、增加缓存机制，堆硬件。