Web page rendering optimization and JS performance improvement

Self-study front-end for a period of time, on-line learning summarizes the point of the Web page rendering performance and JS performance improvement method, is conducive to write more excellent code

1. Do not use GIF images to achieve loading effect, which will reduce CPU consumption;

2. Prohibit the use of the IFRAME, will block the parent document onload event, search engine retrieval program can not interpret this page, not conducive to SEO;

3. Replace the JS animation with the CSS3 code, avoiding redrawing and reflow as much as possible;

4. For some small icons, you can use Base64 bit encoding to reduce network requests;

5. Web Gzip,cdn Hosting, data cache, image server;

6. Front-end template js+ data, reduce the bandwidth wasted due to HTML tags, front-end with variables to save AJAX request results, each operation of local variables, no request, reduce the number of requests

7. Use innerHTML instead of DOM operation to reduce DOM operation times and optimize JS performance;

8. Less use of global variables, multi-cache DOM node lookup results, reduce IO read operations;

9. Avoid using CSS Expression;

10. The picture should be lazy loading, the style sheet is placed on the top, the script is placed at the bottom;

11. Avoid using table,table in the main layout of the page to wait for the content to be fully downloaded before it is displayed, which is slower than the div+css layout. For the common web site has a unified thinking, is to maximize the front-end optimization, reduce database operations, reduce disk IO. To the front-end optimization refers to, without affecting the functionality and experience, can be performed in the browser do not perform on the server, can be directly returned on the cache servers do not go to the application server, the program can directly obtain the results do not go to the external acquisition, the data obtained from the machine to remote access, memory can not be taken to the disk, Do not go to database queries in the cache. Reducing database operations means reducing the number of updates, caching the results by reducing the number of queries, and doing the operations of the database as much as possible with your program (for example, join queries), reducing disk IO by minimizing the use of the file system as a cache, reducing the number of read and write files, and so on. Program optimization should always optimize the slow part, in order to change the language is not "optimized".

12. One of the classic problems in computer science is that by changing the location of data storage to get the best read and write performance, the location of the data store can have a significant impact on code performance in JavaScript. – You can use {} to create an object without using new object, and you can use [] to create an array without using the new array. The access speed of the literal in JS is higher than the object. – The deeper the variable is positioned in the scope chain, the longer the practice required to access it. For such variables, it is possible to save by using local variables in the cache, reducing the number of access to the scope chain – using dot notation (object.name) and operator (Object[name]) operations without much difference, only Safari will be different, point always faster

13. There are several common loops in JS:

for (var i = 0; i <, i++) {//Do something}

For (var prop in object) {//For loop object}

[1,2].foreach (value, index, array) {//function-based loop})

Needless to doubt, the first approach is native, with the lowest performance consumption and the fastest speed. The second way for-in each iteration to produce more overhead (local variables), it's only the first 1/7 of the third way to clearly provide a more convenient way to loop, but his speed is only 1/8 of the normal loop. Therefore, according to their own project situation, choose the appropriate cycle.

14. Event delegation: Imagine adding an event to each of the A tags on the page, and we will not add an onclick to each tag. This can affect performance when there are a large number of elements in the page that need to be bound to the same event handling. Each bound event increases the burden on the page or during the run. For a rich front-end application, excessive binding can consume too much memory on pages that are heavily interactive. A simple and elegant way to do this is to delegate events. It is an event-based workflow: Capturing layers, reaching targets, bubbling over layers. Now that the event has a bubbling mechanism, we can handle all the child elements from the event by binding the event to the outer layer.

document.getElementById (' content '). onclick = function (e) {

E = e | | window.event;

var target = E.target | |    E.srcelement; If it's not a tag, I'll quit.

if (Target.nodenmae!=== ' a ') {return}//print A's link address

Console.log (TARGET.HREF)}

15. Redraw and rearrange: when the browser finishes downloading the HTML,CSS,JS, two trees are generated: the DOM tree and the render tree. When the geometry of the DOM changes, such as the width of the DOM, or the color, position, the browser needs to recalculate the geometry of the element and rebuild the render tree, a process called redrawing reflow.

Bodystyle = Document.body.style;

Bodystyle.color = red;

Bodystyle.height = 1000px;

Bodystyke.width = 100%;

By modifying three properties in the above way, the browser performs three reflow redraws, and in some cases, reducing this rearrangement can improve browser rendering performance. The recommended method is as follows, only one operation, complete three steps:

Bodystyle = Document.body.style;

Bodystyle.csstext ' color:red;height:1000px;width:100% ';

16. Website General logo, use H1 tag to wrap, and set the text content of the website name or keyword, facilitate SEO and crawler

Web page rendering optimization and JS performance improvement