解决前端html2canvas生成图片慢问题

分享一个小发现

这里首先直接说结论：

        由于html2canvas生成图片的过程会从html的head、body层标签开始遍历，所以对于项目较大，但是只需要对某个dom（下文以D称呼）生成图片的情况非常不友好！

        所以，一定要通过ignoreElements过滤掉大部分没用的标签。

        至于怎么过滤，我用了dom方法comparedocumentposition（如果有更好的办法可以在评论区分享一下），先用上述方法判断当前遍历的element与D是否有父子关系，有关系则不忽略，没关系的话还要判断是否head标签和样式的link标签和style标签（如style标签较多的话可以考虑对style也按需忽略），其余标签可以忽略。如果D里有滚动的话，还要通过对element的offsetTop判断在可视范围外则忽略。

        由于html2canvas需要通过拿到的style来计算图片里的显示样式，所以需要保留部分需要的style标签，并留一下生成的图片样式会不会有问题。

        这样下来效率会得到质的提升！对于我的现状来说，一个又长又臭的破elUI表格从20秒提升到1秒，很nice！