Web Front-end, high-performance optimization

High-performance html

I. Avoid using IFRAME
IFRAME is also called an inline frame. You can embed an HTML document into another HTML document.
The advantage of IFRAME is that the embedded document is independent of the parent document, which usually enables the browser to simulate multithreading. Disadvantages:

① Although IFRAME can simulate multithreading, the number of concurrent downloads to the same domain name in mainstream browsers remains unchanged. the browser's connections to the same domain name always share the browser-level connection pool,
Even for webpages with the same domain name in different windows or tabs.
② When the page is loaded, IFRAME will block the trigger of the onload event of the parent document. In addition, some browsers can trigger the onUnload Event only after the onload event is triggered.
Therefore, the onUnload Event will not be triggered when the user leaves the page without triggering the onload event for a long time.
※Not compatible with IE6 ~ 8. Solution: use JavaScript to dynamically load the IFRAME element or set its src attribute dynamically.

<iframe id=ifr ></iframe>document.getElementById( ‘ifr’ ).setAttribute( ‘src’ , ‘url ’ );

③ IFRAME is one of the most supportive elements in the document, and the overhead of an empty IFRAME is expensive. [Tested by Steve Souders]

Ii. Avoid empty Connection Properties
Null join: the SRC or href attribute value of the IMG, Link, script, and IFRAME elements is null. (For example, src = "")
After an empty connection is set, the browser still sends the request according to the default rule:
① IE6 ~ In 8, only the IMG element has a problem: IE will resolve the empty address of IMG to the directory address of the current page address and request.
For example, if the current webpage address is http://aaa.com/bb/c.html, the imgaddress will be merged to http://aaa.com/bb
② Earlier versions of WebKit and Firefox will resolve empty connections to the address of the current page. This problem is serious in iOS and Android.
If the page has multiple null connection attribute elements, the number of server requests is increased.
③ Fortunately, when the src attribute value of IFRAME is null in mainstream browsers, it will be resolved to the about: blank address without sending additional requests.

3. Avoid deep node nesting
Nodes with deeper hierarchies occupy more memory during initialization.
The HTML Parser in the browser stores the structure of the entire HTML document as a DOM tree structure. The deeper the node nesting hierarchy, the deeper the DOM book hierarchy.

Iv. Reduce HTML document size
① Delete blank space lines and comments that have no effect on execution results;
② Avoid table layout;
③ Use HTML5;

5. Explicitly specify the document Character Set
Specifying a character set when opening an HTML page helps the browser to parse HTML code immediately.
HTML documents are usually parsed into a series of character set encoding strings that are transmitted over the Internet.
Character Set encoding is specified in the HTTP response header or in the HTML Tag. The browser uses the specified character set to encode and parse the code into realistic characters on the screen.
If the browser cannot know the encoding Character Set of the page, it will cache the byte stream before executing the script and rendering the page, and then search for the character set that can be parsed or parse it with the default character set.

6. Set the image width and height.
Sometimes you need to locate the page layout before loading the page.
If the size of the image on the page is not specified, or the size does not match the actual image size, the browser will "backtrack" the image and display it again after the image is downloaded, thus wasting time.
Therefore, it is best to specify the size (intra-row style or CSS style) for the page image ).

7. Avoid script Blocking
When parsing regular script tags, the browser will wait for the script to be downloaded before parsing and executing the script. Then, the HTML code can only wait.
Therefore, the script should be placed at the end of the document:

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

 

 

High-performance CSS

I. Avoid using @ import
@ Import added by css2.1 will add additional latency during page loading.
Because the browser cannot download the style in parallel, it will add additional round-trip time on the page. However, the <link> can be used for parallel download, but it may be multiple requests.

Ii. Avoid alphaimageloader Filters
This filter can solve IE6, that is, display the translucent effect of a PNG Image in the following version, but it will terminate the rendering of the content when loading the image and freeze the browser.
Each element (not just an image) is computed once to add memory expenses.
The png8 format should be used, or the underscore (_ filter) should be used only for ie6.

3. Avoid CSS expressions
CSS expressions are the method for setting dynamic CSS attributes, that is, emphasizing and dangerous. Ie5 is supported and is unique to IE.

// Implement the background color background-color: expression (new date (). gethours () % 2? & Quot; # ffffff & quot;: & quot; #000000 & quot ");

The disadvantage of CSS expressions is that the technology frequency is extremely high. The display, zoom, scroll, or move the mouse on the page will be recalculated once. The amount of work that can be moved is more than one million times.
① Using a one-time expression can reduce the number of computations. In the first run, the result is assigned to the specified style attribute, and this attribute is used to replace the CSS expression.
② If the style attribute must be dynamically changed within the page cycle, it is feasible to use the time handle instead of the CSS expression.

4. Avoid wildcard Selector
The principle of optimizing the selector is to reduce the matching time. The matching mechanism of CSS selector is: regulate matching from right to left!
# Header> A {font-weight: blod ;}
The rule above is that the browser traverses all the elements on the page and determines whether the ID of the parent element is the header.
# Header {...}
The overhead of the descendant selector is greater. After traversing all the elements of the page, the Child selector needs to traverse up until the root node.

It can be seen that the rightmost regulation of selector usually determines the workload of moving to the left. Therefore, the rightmost selection rule is called a key selector.
. Selected *{...}
After all the elements are matched, they are matched up until the root node. Usually higher than the ID selector with the minimum overhead ·~ Three orders of magnitude.

5. Avoid attribute selector of a single rule
. Selected [href = '# Index'] {...}
The browser first matches all elements, checks whether they have the href attribute and the value is "# Index", and then matches the elements whose class is selected respectively.
Therefore, key selectors should be prevented from using single rule attribute selectors.

6. Avoid regular attribute Selector
Css3 adds a complex attribute selector and matches the regular expression of the class. However, these type selectors are much slower than category-based matching.

7. Remove unmatched styles
① Deleting useless styles can reduce the size of style files and speed up loading.
② For browsers, all style rules will be indexed after resolution, even if there is no matching rule on the current page! Therefore, remove unmatched rules, reduce index items, and speed up browser search.

 

High-performance Javascript

I. Use event proxy
When too many time handles are frequently triggered, the page response will be slow.
If a div has 10 buttons, you only need to attach an event handle to the DIV once, instead of adding a handle to each button.
Events are captured at the time of bubbling and the event is triggered at the time of determination. [Element that triggers the event = eV. srcelement? Ev. srcelement: ev.tar get ;]

Ii. cache selector query results
Reduce the number of selector queries and cache the selected results as much as possible to facilitate future reuse.

Jquery ('# top '). find ('p. classa ');... jquery ('# top '). find ('p. classb '); // use the following method to reduce the overhead var cached = jquery (' # Top '); cached. find ('p. classa ');... cached. find ('p. classb ');

Iii. Avoid frequent Io operations
Reduce cookie or localstorage operations because the APIs for which operations are performed are synchronized, and they are shared among multiple tab pages.
When multiple pages simultaneously operate on cookies and localstorage, the synchronization lock mechanism will exist.

4. Avoid frequent Dom operations
Javascript is slow to access DOM elements, so you should:
① Cache the queried elements;
② After offline node updates, add them to the document tree;
③ Avoid using JavaScript to modify the page layout.

5. Use a micro-class library
Avoid using large and comprehensive class libraries as much as possible. Instead, use the micro class libraries as needed to assist development.