心血凝结而来的微信小程序「同层渲染」套路

最近，在开发小程序的过程中，与canvas的接触频率极高。在这段期间，由于兼容性的问题，还需要替换掉底层API，在其中遇到了很多令人印象深刻的坑。小程序（微信）的canvas与HTML标准canvas差异较大，甚至小程序本身的canvas底层API也存在两大版本…

一、「同层渲染」和「跨层渲染」之辨

1. 同层渲染

在前面的开发过程中，我突然发现一个现象，canvas的绘制顺序会影响页面的性能。曾经在canvas上制作一张动图，发现动图出现明显的卡顿，将图层拆开，层层渲染后，发现卡顿现象减少了。

经过反复确认后，我发现，我的分析是正确的。canvas中的绘制顺序直接影响了页面的性能，拆分层级后，页面性能会得到改善。这种绘制顺序，即所谓的「同层渲染」。

所谓的「同层渲染」，是指在同一个图层中进行绘制。同层渲染的优势在于，可以减少重绘的次数，从而提高渲染效率。

2. 跨层渲染

在了解了「同层渲染」之后，我们就需要了解一下与之对应的概念——「跨层渲染」。

「跨层渲染」，是指在不同的图层中进行绘制。这种渲染方式往往会造成性能的损失，因为浏览器需要对不同的图层进行多次合成，这会消耗更多的资源。

二、何谓微信小程序的「同层渲染」

可能有的同学不知道，微信小程序的「同层渲染」和标准的canvas的「同层渲染」是不太一样的。

微信小程序中的「同层渲染」是指在同一个worker进程中进行绘制，这是因为小程序的底层是基于WebView实现的，而WebView的每个页面都对应着一个worker进程。

在同一个worker进程中进行绘制，可以避免不同worker进程之间的通信开销，从而提高渲染效率。这种优化方式，目前仅适用于微信小程序。

三、剖析微信小程序「同层渲染」的坑

为了揭开坑底的秘密，我付出了大量的努力。现在，我总结出以下几点，供开发者朋友们参考。

1. 谨慎拆分层级

「同层渲染」固然高效，但我们也不能随意拆分层级。如果层级太多，那么就会造成管理困难，而且也可能会导致性能的损失。

因此，在拆分层级时，我们需要考虑以下几点：

• 尽量将相关的元素放在同一个图层中。
• 避免创建过多图层，否则会造成性能的损失。
• 使用合适的层级管理策略，比如z-index。

2. 避免使用过于复杂的图形

「同层渲染」虽然高效，但我们也不能滥用它。如果图形过于复杂，那么就会导致绘制时间过长，从而影响性能。

因此，在使用「同层渲染」时，我们需要避免使用过于复杂的图形。如果图形过于复杂，那么我们可以将其拆分成更简单的图形，然后再进行绘制。

3. 注意微信小程序的兼容性

前面我们提到，微信小程序的「同层渲染」是基于WebView实现的。因此，我们需要关注微信小程序的兼容性。

如果我们使用了「同层渲染」，那么就需要确保我们的页面在不同的浏览器中都能正常运行。否则，可能会出现兼容性问题。

总的来说，微信小程序的「同层渲染」是一种非常有效的优化方式，但我们也需要合理地使用它。避免陷入坑底，才能真正实现性能提升！