分享一个小发现
这里首先直接说结论：
由于html2canvas生成图片的过程会从html的head、body层标签开始遍历，所以对于项目较大，但是只需要对某个dom（下文以D称呼）生成图片的情况非常不友好！
所以，一定要通过ignoreElements过滤掉大部分没用的标签。参考文档http://html2canvas.hertzen.com/configuration/
至于怎么过滤，我用了dom方法comparedocumentposition（参考文档https://www.runoob.com/jsref/met-node-comparedocumentposition.html），先用上述方法判断当前遍历的element与D是否有父子关系，有关系则不忽略，没关系的话还要判断是否head标签和样式的link标签和style标签（如style标签较多的话可以考虑对style也按需忽略），其余标签可以忽略。如果D里有滚动的话，还要通过对element的offsetTop判断在可视范围外则忽略。
由于html2canvas需要通过拿到的style来计算图片里的显示样式，所以需要保留部分需要的style标签，并留一下生成的图片样式会不会有问题。
这样下来效率会得到质的提升！对于我的现状来说，一个又长又臭的破elUI表格从20秒提升到1秒，很nice！
网友评论