High-performance HTML

Reprint: http://www.alloyteam.com/2012/10/high-performance-html/?bsh_bid=928776814

Avoid using IFRAME

An IFRAME is also called an inline frame, and an HTML document can be embedded in another document. The advantage of using an IFRAME is that the embedded document can be completely independent of its parent document, with this feature we can usually make the browser to simulate multi-threading, it is important to note that the use of an IFRAME does not increase the number of concurrent downloads under the same domain name, the browser connection to the same domain is always shared browser-level connection pool, This is true in all major browsers, even across windows or across tabs. And because of this, the benefits of IFRAME are greatly compromised.

The IFRAME element blocks the triggering of the parent document onload event during page loading, and the developer program typically initializes the UI action when the onload event is triggered. For example, set the focus of the login area. Because the user is accustomed to waiting for this operation, it is important to let the OnLoad event trigger as much as possible so that the user's waiting time becomes shorter. In addition, developers will be bound to some important behavior on the Unload event, but unfortunately in some browsers, only if the OnLoad event triggered after the Unload event can be triggered, if the OnLoad event has not been triggered for a long time, and the user has left the current page, Then the Unload event will never get triggered.
Is there a plan to keep the onload event from being blocked by the IFRAME? There is a simple solution to prevent the onload event from being blocked, using JavaScript to dynamically load the IFRAME element or dynamically set the SRC attribute of the IFRAME:

< = iframe1 ></iframe >  document.getElementById (' iframe1 '). SetAttribute (' src ', ' url ');

However, it is only valid in advanced browsers and is not valid for Internet Explorer 8 and below. In addition, we must know that the IFRAME is one of the most resource-consuming elements in the document, and in Steve Souders's test, load 100 A, DIV, SCRIPT, style, and IFRAME elements in the test page, respectively, in Chrome, Firefox , Internet Explorer, Opera, Safari run 10 times. The result shows that the cost of creating an IFRAME element is an order of magnitude higher than creating other types of DOM elements. All DOM elements in the test are empty, such as loading a large script or style block may take longer than loading some IFRAME elements, but judging from the benchmark results, even an empty IFRAME, the overhead is very expensive, given the high overhead of the IFRAME, we should try to avoid it. Especially for mobile devices, you should avoid using an IFRAME for most of the time, with only a limited amount of CPU and memory.

Avoid empty link properties

An empty Link property means that the src or href attribute of an IMG, link, script, ifrrame element is set, but the property is empty. such as

1. Internet Explorer 8 and the following browsers only have problems with the IMG type element, IE will resolve the empty address of the IMG to the directory address of the current page address. For example, if the current page address is Http://example.com/dir/page.html,IE, the empty address will be resolved to the http://example.com/dir/address and requested.
2. Earlier versions of the WebKit kernel browser and Firefox will resolve the empty address to the current page address. If there are multiple empty link attribute elements within the page, the current page server is requested multiple times, increasing the load on the server. This issue is likely to be more serious on iOS and Android mobile browsers than desktop browsers are more aggressive in upgrading the kernel.
3. Fortunately, when all major browsers are empty from the SRC attribute of the IFRAME, the empty address is resolved to the About:blank address without making additional requests to the server.

Avoid deep-level nesting of nodes

Deep-level nested nodes tend to require more memory footprint when they are initialized, and are slower when traversing nodes, as is the mechanism of the browser building DOM document. For example, the following HTML code:

<HTML> <Body> <P>Hello World</P> <Div> <imgsrc= "Example.png"/></Div> </Body> </HTML>

Through the parsing of the browser HTML parser, the browser will store the entire HTML document structure as a DOM tree structure. The deeper the nesting level of a document node, the deeper the hierarchy of the DOM tree is built.

Reduce HTML Document Size

The most obvious way to increase download speed is to reduce the size of the file, especially the JavaScript and CSS code embedded in the HTML document, which can make the page volume much leaner. In addition to reducing the size of HTML documents you can also take the following methods:

1. Delete blank lines and comments that have no effect on the result of the HTM document
2. Avoid table layout
3. Using HTML5

Explicitly specifying the document character set

Specifying a character set at the beginning of an HTML page helps the browser to begin parsing HTML code immediately. HTML documents are typically parsed into a sequence of strings with character set encoding information that is transmitted over the Internet. The character set encoding is specified in the HTTP response header, or in an HTML tag. The browser parses the encoding into characters that can be displayed on the screen, based on the acquired character set. If the browser does not know the coded character set of the page, it is common to cache the byte stream before executing the script and render the page, then search for a character set that can be parsed, or parse the page code with the default character set, which can lead to unnecessary time consumption. To prevent the browser from spending time searching for the appropriate character set for decoding, it is best to always explicitly specify the page character set in the document.

Explicitly set the width height of the picture

When the browser loads the HTML code of the page, it is sometimes necessary to position the page layout before the picture is downloaded. If the image in the HTML does not specify a size (width and height), or if the size of the code is not the size of the actual picture, then the browser will "backtrack" the image and re-display it after the picture is downloaded, which consumes extra time. Therefore, it is best to specify the size of each image in the page, whether it is in the page HTML tags, or in CSS.

<src= "Hello.png"width="Max"height= " >

Avoid script blocking loading

When the browser parses the regular script tag, it waits for the script to download and then parse the execution, and the subsequent HTML code can wait. To avoid blocking loading, you should place your footsteps at the end of the document, such as inserting the script tag before the body end tag:

<src= "Example.js"></script></  body>

High-performance HTML