Web front end, high performance optimization

High-performance HTML

First, avoid using IFRAME
An IFRAME is also called an inline frame, and an HTML document can be embedded in another HTML document.
The benefit of an IFRAME is that the embedded document is independent of the parent document, which is often used to enable the browser to simulate multithreading. The disadvantages are:

① Although the IFRAME can simulate multi-threading, but the main browser of the same domain name parallel download is constant, the browser to the same domain name links always share the browser-level connection pool,
Even the same domain page as a different window or tab page.
② when the page loads, the IFRAME blocks the triggering of the parent document onload event. And some browsers need to trigger the OnLoad event before the OnUnload event is triggered.
The OnUnload event is not triggered when the user leaves the page with an onload event that has not been triggered for long.
※ Incompatible Ie6~8 Solution: Use JavaScript to dynamically load IFRAME elements or dynamically set their SRC properties.

<iframe id=ifr ></iframe>document.getelementbyid (' IFR '). SetAttribute (' src ', ' url ');

③iframe is one of the most resource-consuming elements within a document, and even the overhead of an empty IFRAME is expensive. "Through the Steve Souders test"

Second, avoid null connection properties
Null connection means: The value of the src or href attribute of the IMG, link, script, and IFRAME elements is null. (e.g. src = "")
When a null connection is set, the browser will still send the request with the default rule:
Only the IMG element in ①ie6~8 is problematic: IE resolves the empty address of the IMG to the directory address of the current page address and requests it.
If the address of the current web address is http://aaa.com/bb/c.html,img, it will be resolved to Http://aaa.com/bb
② earlier versions of WebKit and Firefox will resolve the empty connection to the address of the current page. This problem is more severe in iOS and Android.
If the page has more than one empty connection property element, the number of requests to the server is increased.
③ Fortunately, when the main browser's SRC attribute value for an IFRAME is null, it resolves to an about:blank address without sending an extra request.

Third, avoid deep level nesting of nodes
The deeper the nodes are, the more memory they occupy when the initialization is built.
The browser HTML parser stores the structure of the entire HTML document as a DOM tree structure. The deeper the nesting level of the nodes, the deeper the DOM book hierarchy is built.

Iv. reducing the size of HTML documents
① Delete blank lines and comments that have no effect on the execution result;
② avoid table layout;
③ use HTML5;

Five. Explicitly specifying the document character set
Specifying a character set when the HTML page is open helps the browser begin parsing the 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 passes the specified character set, the bar encoding resolves to the characters that are realistic on the screen.
If the browser is unable to 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 the character set that can be parsed or parse it in the default character set.

Vi. Display the width and height of the set picture
It is sometimes necessary to position the page layout before the page is finished loading.
If the picture on the page does not specify a size, or the size does not match the actual image size, the browser will "backtrack" the image and display it again after the picture is downloaded, wasting time.
It is a good idea to set the size (inline or CSS style) for the picture of the page.

Vii. Avoid script blocking loading
When the browser parses the regular script tag, it waits for the script to download before parsing executes, and then the HTML code can wait.
Therefore, the script should be placed at the end of the document:

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

High-performance CSS

First, avoid the use of @import
The @import added by CSS2.1 will cause the page to add additional latency when loading.
Because browsers cannot download styles in parallel, they can cause additional round-trip time to the page. While using <link> can download styles in parallel, it is still a multiple request.

Second, avoid AlphaImageLoader filter
This filter resolves the translucent effect of IE6, which shows PNG images, but terminates the rendering of the content when the picture is loaded and freezes the browser.
Each element (not just the picture) is calculated once, adding memory expenses.
Use the PNG8 format instead, or underline (_filter) for IE6 only.

Third, avoid CSS expressions
CSS expressions are an emphasis and a dangerous way to set dynamic CSS properties. IE5 start support, ie unique.

The implementation switches the background color background-color:expression ((New Date ()) every hour. GetHours ()%2? " #FFFFFF ":" #000000 ");

The disadvantage of CSS expressions is that the technique is extremely frequent, and is recalculated once the page is displayed, scaled, scrolled, or moved. Mobile can reach more than 1w times the calculation amount.
① use a one-time expression to reduce the number of calculations, assign the result to the specified style property at the first run, and replace the CSS expression with that property.
② if the style attribute must be changed dynamically within the page cycle, using a time handle instead of a CSS expression is a viable option.

Iv. avoid a wildcard selector
The principle of optimizing selectors is to reduce the matching time. CSS selector matching mechanism is: from right to left to regulate matching!
#header > a {font-weight:blod;}
The above-mentioned system is actually a browser that iterates through all the a elements of a page and determines whether the ID of its parent element is the header.
#header a {...}
The descendant selector is more expensive, and after traversing all the a elements of a page, it is necessary to traverse up the root node.

As a rule, the right-most regulation of selectors often determines the amount of work to shift to the left. So the right choice rule is called the key selector.
. Selected * {...}
After all elements have been matched, match up to the root node, respectively. Typically, the ~3 is higher than the lowest-cost ID selector.

Five, avoid the single rule of the attribute selector
. Selected [href= ' #index '] {...}
The browser matches all elements first, checks if it has an HREF attribute and has a value of "#index", and then matches the elements of class selected, respectively.
Therefore, you should avoid using the key selector as a rule for a single-rule attribute selector.

Six, avoid the regular attribute selector
CSS3 adds a complex property selector that is matched by a class regular expression. However, these types of selectors are much slower than class-based matching.

Vii. remove a no match style
① removes useless styles, reduces the size of the style file, and speeds up loading.
② for browsers, all style rules will be parsed and indexed, even if there are no matching rules for the current page! Therefore, remove no matching rules, reduce index entries, and speed up browser lookups.

High-performance JavaScript

I. Use of event proxies
When too many time handles are triggered frequently, the page is unresponsive.
If a DIV has 10 buttons, simply append an event handle to the div without having to add a handle to each button.
Event bubbling time captures the event and determines when the event is emitted. "The element that triggered the event = ev.srcelement?" Ev.srcElement:ev.target; "

Second, cache selector query Results
Reduce the number of selector queries and cache the selected results as much as possible to facilitate later reuse.

jquery (' #top '). Find (' P.classa '), .... jquery (' #top '). Find (' P.CLASSB ');//Use the following method to reduce the cost of var cached = JQuery (' #top '); Cached.find (' P.classa '); Cached.find (' P.classb ');

Third, avoid frequent IO operations
Actions on cookies or localstorage should be reduced because the APIs that manipulate them are synchronized, and they are shared across multiple tab pages.
When multiple pages operate cookies and localstorage at the same time, there is a synchronous locking mechanism.

Iv. avoid frequent DOM operations
JavaScript accesses DOM elements slowly and should do:
① caches the elements that have been queried;
After the nodes are updated under the ② line, they are added to the document tree;
③ avoid using JavaScript to modify the page layout.

V. Use of the Micro-class library
Try to avoid using the Chatty class library and use the Micro Library as needed to aid development.

This article organized from: http://madscript.com/performance/high-performance-frontend/

Web front end, high performance optimization