Caching and re-using tree of HtmlElement objects

Question

I am using the WebBrowser control in my project to display complex HTML documents that are generated/manipulated at runtime.

I have noticed that constructing the DOM programmatically from C# by creating HtmlElement objects is about 3x slower than generating an HTML string and passing it to the WebBrowser, which in turn parses it to generate the DOM. Both ways create a noticeable delay when navigating between lengthy documents.

I am looking for the fastest way to switch between multiple documents in the same WebBrowser control, ideally without having to repeatedly generating the DOM tree for each document. Is it possible to cache a tree of HtmlElement objects somewhere in my program, and then re-insert them into the WebBrowser as needed?

Thanks!

Answer 1

Maybe rather than caching the DOM you could just flip between several WebBrowser controls on the form - with only the active one being visible?

Answer 2

I'd really need to know more about how you are generating these documents. It might be faster to get your data into a XML document and then use a XSL transform to convert the data to HTML and pass that to the WebBrowser control.

The nice thing about the XSLT implementation of .NET is that it takes the XSL source and compiles it to a temporary assembly to speed up the transforms.

If you decide to go that route look up the MVP.XML project which adds some nice exslt functionality to the stock XSLT implementation.

Answer 3

I will describe the solution in terms of the native win32 COM APIs; it shouldn't be too difficult to write the interop to do it in C# (or find it at pinvoke.net). Alternatively, you may need to use the properites that the managed objects expose to get the native ones.

You're not likely to be able to build the DOM yourself faster than IE's parser, so create a blank HTMLDocument (which in native code would be CoCreateInstance(CLSID_HTMLDocument)) and QueryInterface() the HTMLDocument for its IMarkupServices implementation. Also create two IMarkupPointers using the IMarkupServices::CreateMarkupPointer() method.

Next call IMarkupServices::ParseString() to parse your HTML. This will give you a pointer to an IMarkupContainer that contains your DOM, as will as two IMarkupPointers that point to the beginning and end of you DOM. Now you can use IMarkupServices::Move() to move your data from one IMarkupContainer to another.

So the general scheme you would use is to have a single HTMLDocument which is your "display" document, and it's associated IMarkupContainer (which you can just QueryInterface() for). Then you have a vector or list or whatever of all the non-displaying markup containers. Then you just create a markup pointer for your display doc, call IMarkupPointer::MoveToContainer(displayDocumentContainer, true) and then use that to move stuff around from your display container to the not-displaying containers and vice-versa.

One thing to note: you must only access these objects on the thread you create them from, or acquire them on. All IE objects are STA objects. If you need multi-threaded access, you must marshal.

If you have specific follow up questions, let me know.

References:

• IMarkupContainer
• IMarkupServices
• Introduction to Markup Services

Answer 4

Could you do something like this?

• Create the contents you want to display inside a DIV
• Create secondary contents (in the background) inside non-visible DIVs
• Swap the contents by playing with the visibility

Answer 5

This will do it

// On screen webbrowser control
webBrowserControl.Navigate("about:blank");
webBrowserControl.Document.Write("<div id=\"div1\">This will change</div>");
var elementToReplace = webBrowserControl.Document.GetElementById("div1");
var nodeToReplace = elementToReplace.DomElement as mshtml.IHTMLDOMNode;

// In memory webbrowser control to load fragement into
// It needs this base object as it is a COM control
var webBrowserFragement = new WebBrowser();
webBrowserFragement.Navigate("about:blank");
webBrowserFragement.Document.Write("<div id=\"div1\">Hello World!</div>");
var elementReplacement = webBrowserFragement.Document.GetElementById("div1");
var nodeReplacement = elementReplacement.DomElement as mshtml.IHTMLDOMNode;

// The magic happens here!
nodeToReplace.replaceNode(nodeReplacement);