Snapshot the DOM into a stateful and serializable data structure. Also provide the ability to rebuild the DOM via snapshot.
This module export following methods:
snapshot
will traverse the DOM and return a stateful and serializable data structure which can represent the current DOM view.
There are serveral things will be done during snapshot:
- Inline some DOM states into HTML attributes, e.g, HTMLInputElement's value.
- Turn script tags into noscript tags to avoid scripts being executed.
- Try to inline stylesheets to make sure local stylesheets can be used.
- Make relative paths in href, src, css to be absolute paths.
- Give a id to each Node, and return the id node map when snapshot finished.
rebuild
will build the DOM according to the taken snapshot.
There are serveral things will be done during rebuild:
- Add data-rrid attribute if Node is an Element.
- Create some extra DOM node like text node to place inline css and some states.
- Add data-extra-child-index attribute if Node has some extra child DOM.
serializeNodeWithId
can serialize a node into snapshot format with id.
buildNodeWithSN
will build DOM from serialized node and store serialized information in __sn
property.