Hiding HTML Inside < text area > ASP.NET

As soon as browser gets some HTML,it parses it and starts down loading external resources like images, stylesheets, and Java Script immediately. Sometimes this results in un wanted resources down loading. For example, you might have a pop-up dialog box hidden inside the Default.aspx that you show only on certain actions. However,the browser will get the HTML for the pop-up dialog and down load the graphics files associated with the content, which wastes a precious HTTP connection during site load. Of course, you can defer loading such UI elements by using the on-demand UI loading approach, but sometimes you need to deliver some essential UI elements instantly when the user performs some action and cannot wait for an XML HTTP call to complete, e.g., confirmation dialog boxes.

When the user deletes a wid get, she sees a warning dialog box(see Figure). The HTML for the warning dialog box is embedded inside Default.aspx

When a widget is deleted, a confirmation window pops up. The HTML of the popup is in side Default.aspx.

When a widget is deleted, a confirmation window pops up. The HTML of the popup is in side Default.aspx.

When you put the HTML for the pop-up dialog box inside Default.aspx,the image used in the stylesheet is downloaded even though the popup is not visible on the screen.If the popup has multiple decorative images, such as a background picture, icons, and button shades, they will be downloaded during page load, wasting several HTTP calls and band width (see Example).

Pop-up HTML embedded inside Default.aspx makes the browser down load associated images during page load


The HTML snippet is at the end of the document to force the images to download as late as possible.But it still does not eliminate CSS images (Example),even though the popup is not visible on screen until the user clicks on a widget’s close button.

CSS defined for the popup


By using an HTTP analyzer like Nikhil’s web development helper ,you can see the image is down loaded during page load,as shown in Figure

The browser downloads images for all the HTML, regardless of whether it is visible on the UI

The browser downloads images for all the HTML, regardless of whether it is visible on the UI

Popups occupy a significant amount of bandwidth during page load, but the solution is to deliver the HTML without letting the browser parse it.You pass a large amount of HTML inside a <textarea> tag.The browser will get encoded HTML inside a <textarea> tag and not parse the content. Because it will not see the HTML,it will not download the associated images.When you need to get the HTML,extract the value of the <textarea>, decode the content to get the HTML, and inject the HTML inside DOM.

In Example,the HTML is encoded inside a <textarea> tag, so the browser cannot parse the HTML and apply it to the DOM.An easy way to convert a block of HTML to its encoded form is to copy the HTML inside Visual Studio HTML editor and then select Edit ➝ Paste Alternative.

Delivering HTML for the popup inside <textarea>tags


Extracting HTML from <textarea>and injecting it into the DOM


You can create checks to make sure you do this only once because if you repeatedly add the same elements to the DOM, you’ll duplicate the ID and won’t be able to access the elements via the $get call.

One draw back of this approach is that resources referenced by the HTML block will get down loaded only after they are added in the DOM.So,the HTML will appear with out graphics for a moment until the browser down loads the resources.


All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

ASP.NET Topics