niklasvh
Why is it necessary to clone the whole window?
Most of the processing time is due to cloning of window.
Specially slow if your window contains several script/css tags.
Why is this necessary? If this could be avoided it would be very much faster.
Agree with you. It's really slow. Furthermore, the thread would be full to handle it, your application would stop a long time. It's a bad user experience!
From above figure, the clone spent about 1s (The screen would stop during 1s). It's almost the half of whole processing time. Is there any way to solve this problem?
I have an idea may fix this problem. In the clone.js, we can add a judgement in cloneNode method. If the element is body, head, script, or target element. it would be reserved, or it would be skipped. I tried to add this argument into here:
child.nodeType !== Node.ELEMENT_NODE || (!child.hasAttribute(IGNORE_ATTRIBUTE) && (typeof this.options.ignoreElements !== 'function' || // $FlowFixMe !this.options.ignoreElements(child))))
And the result looks good!
There is an issue may happen in this case I can imagined. If we removed the element with relative position. The target locating may be wrong. But I think this issue is easy to solve.
Furthermore, I had tried a feature that we can remove some elements we don't want to show on snapshot and it worked. If you guys think this way is workable, I can delivery a MR to you.
Did you figure this out all the way? This would be a very welcome change.
@d9767192 Could you please specify some details on how you achieved speeding it up?
same question, I just want to generate canvas from one child div, but the iframe clones the whole document which results in redundant requests of all the assets.
I've switched to html-to-image because of this issue.
It loads no excess assets except for fonts: it loads all the fonts mentioned in the @font-face rules even if they aren't used on the page. The font problem can be solved by adding the fontEmbedCSS: '' option.
Same problem here, we are using it as part of PDF generation and this is by far the heaviest part of the whole process (about 90% of the time is spent cloning the DOM).
