Top 9 issues in Web front-end performance optimization

1. Please reduce the HTTP requestBasic principle:

When the browser (client) and the server communication, it has consumed a lot of time, especially when the network situation is worse, this problem is particularly prominent.

The process of a normal HTTP request: If you enter "Www.xxxxxx.com" in the browser and press ENTER, the browser then connects to the server that the URL points to, then the browser can send the request information to the server, the server receives the requested information, and then returns the corresponding information. After the browser receives the response from the server, the data is interpreted for execution.

And when we request the webpage file has many pictures, CSS, JS even music and so on information, will frequently establish the connection with the server, and releases the connection, this must cause the resource waste, and each HTTP request will have the performance burden to the server and the browser.

With the same speed, downloading a 100KB image is faster than downloading two 50KB pictures. Therefore, please reduce the HTTP request.

Workaround:

Merge images (CSS sprites), merge CSS and JS files, and use lazyload and other techniques to optimize images.

2. Please understand Repaint and Reflow correctly
Note: Repaint and Reflow are redrawing and rearrangement, please allow me to show off my limited knowledge of a few English words. 囧

Basic principle:

Repaint (redraw) occurs when the appearance of an element is changed, but without changing the layout (wide height), such as changing visibility, outline, background color, and so on.

Reflow (Reflow) is the DOM changes affect the geometry of the element (and height), the browser will recalculate the geometry of the element, will invalidate the affected part of the rendering tree, the browser will verify all the other nodes on the DOM tree visibility properties, This is also the cause of reflow inefficiency. Such as: Change the size of the window, change the size of the text, content changes, browser window changes, style property changes and so on. If the reflow is too frequent, the CPU usage will go up in the miso, so it is necessary for the front end to know the knowledge of Repaint and reflow.

Ways to reduce performance impact:

It is mentioned above that by setting the Style property to change the node style, each setting will cause a reflow, so it is best to set the class mode, the animated element, its position property should be set to fixed or absolute, This does not affect the layout of other elements, and if the functional requirements cannot be set position to fixed or absolute, then the smoothness of the speed is weighed.

In short, because Reflow is sometimes unavoidable, it is only possible to limit the extent of Reflow's influence.

3. Please reduce the operation of DOM
Basic principle:

The cost of DOM manipulation is high, which is often a performance bottleneck in Web applications.

Be born slow. In high-performance JavaScript, the analogy: "Think of Dom as an island, and JavaScript (ECMAScript) as another island, connected by a toll bridge." So every visit to the DOM teaches a bridge fee, and the more times you visit, the more money you pay. Therefore, it is generally recommended to minimize the number of bridges.

Workaround:

modifying and accessing DOM elements will cause the repaint and reflow of the page, and looping over DOM operations is more of an evil behavior. So use JavaScript variables reasonably to store content, consider the performance overhead of loops in a large number of DOM elements, and write once at the end of the loop.

Reduces query and modification of DOM elements, which can be assigned to local variables when queried.

Note: In IE: hover will slow down the response.

4. Use JSON format for data exchange
Basic principle:

JSON is a lightweight data interchange format that is ideal for data interchange in a completely language-independent text format. At the same time, JSON is a native JavaScript format, which means that working with JSON data in JavaScript does not require any special APIs or toolkits.

Compared to XML serialization, JSON serialization typically results in smaller data volumes than XML serialization, so JSON is used as a way of exchanging data in well-known websites such as Facebook.

JS Operation JSON:

In JSON, there are two kinds of structures: objects and arrays.

An object ends with "{" Starting with "}". Each "name" is followed by a ":" and "," (comma) separated by the name/value pair. The name is enclosed in quotation marks, and if the value is a string, it must be enclosed in quotation marks, and the numeric type is not required. Such as:
var obj={"name": "Darren", "age": $, "location": "Beijing"}

An array is an ordered collection of values (value). An array ends with "[" Start, "]". Use "," (comma) to separate values. Such as:
var jsonlist=[{"name": "Darren", "age": +, "location": "Beijing"},{"name": "Weidong.nie", "Age": $, "location": "Hunan" }];

The operation of this array and object literal is very convenient and efficient. If you know the JSON structure in advance, it is wonderful to use JSON for data passing, and you can write very useful, aesthetically readable code. If you are a purely front-desk developer, you will love json very much.

5. Efficient use of HTML tags and CSS styles
Basic principle:

HTML is a language used to describe a Web page, it uses tag tags to describe the Web page, as a qualified front-end development, you need to know its common tags represent the meaning (SEO) and attributes (presentation).

CSS refers to cascading style sheets (cascading style Sheets), if you think of the page as a person, HTML is a human skeleton, CSS is a person's clothes, a person's taste from his clothes can be at a glance.

A professional front-end development is also a good refactoring, because in the page often there are a variety of unreasonable nesting and repeated definition of CSS styles, I do not want you to refactor the page, but I hope you encounter this situation when you solve these problems. Like this,

1. <font size= "3" >html:1
2. 2
3. 3 ... 4
4. 5</font>

Copy Code

Or a CSS like this:

1. <font size= "3" >body. Box Border ul Li P strong span{color: #000}</font>

Copy Code

All of this is a very bad way to use HTML and CSS.
Correct understanding:

HTML is a markup language, you must understand its properties before using a reasonable HTML tag, such as Flow elements,metadata Elements, phrasing Elements. The basis is to know the block-level elements and inline elements, box model, SEO knowledge.

CSS is used to render the page, and there is the problem of rendering efficiency. CSS selectors are matched from right to left, where CSS selectors are sorted in order of overhead from small to large:

ID selector #box

Class selector. Box

Tag Div

Pseudo-class and pseudo-element a:hover

When a page is triggered to cause reflux (reflow), inefficient selectors can still cause higher overhead, so avoid inefficiencies.

6. Using CDN Acceleration (content distribution Network)
Basic principle:

The full name of the CDN is the Content Delivery network, which is the contents distribution networks.

The basic idea is to avoid the bottlenecks and links on the internet which may affect the speed and stability of data transmission, so that the content can be transmitted faster and more stably. By placing the node servers in the network, a layer of intelligent virtual network based on the existing Internet, the CDN system can re-direct the user's request to the nearest service node according to the network traffic and the connection of each node, the load condition and the distance and response time of the user. "-Baidu Encyclopedia.

The above a few words how many can settle down read, so I still tell the story to introduce again, by the way, the story source is unclear, ^_^:

Ancient war everyone must know, because the ancient traffic is not developed, so when the foreign offensive often can not be timely counter-attack, and so the court levy after the soldiers sent to the border when those invaders are already missing traces, this let the ancient emperor is very depressed. Later, the emperors learned to be smart, they will be a large number of troops in advance to the border, so that they usually mita, wartime soldiers, such a strategy has played a significant role. Deficiencies:

Real-time is not very good is the CDN's fatal flaw. As the demand for CDN increases, this flaw will be improved so that the Web content pages from the remote server are kept in sync with the Web pages in the replica server or cache. The workaround is to transfer the new network content directly from the server side to the cache when the network content changes, or to replicate the network content of the data source server to the cache server as real-time as possible when access to the network content increases.

Put CSS and JS into the external file reference, CSS Head, JS put the tail
Basic principle:
Note: This is a very basic and must follow the knowledge point, but for the integrity of the article to add in it, hey.

The benefits of introducing external files are obvious, and it is necessary to do so when the project is slightly more complex.

Easy to maintain, easy to expand, easy to manage and reuse.
The right way:

JavaScript is the Overlord in the browser, why so, because in the browser when executing JavaScript code, do not do other things at the same time, each occurrence will let the page wait for the parsing and execution of the script (whether JavaScript is embedded or outside the chain), The rendering of the page continues only after the JavaScript code has finished executing. This is also the JavaScript blocking feature.

Because of this blocking feature, it is recommended to put JavaScript code before the tag, which can effectively prevent JavaScript blocking, but also make the HTML structure of the page can be released faster.

The HTML specification clearly states that the CSS should be included in the area of the page, which is not much explained here.

7. Streamline CSS and JS files
Basic principle:
There is a very important rule that has not been mentioned, that is, the compression of CSS and JavaScript, directly reduce the volume of downloaded files. My personal use of the way is to use the YUI Compressor, which is characterized by: remove the comments; remove extra spaces; fine optimizations; identifier substitution.

Yui Compressor is a Java program, if you are familiar with Java, you can quickly get started using Yuicompressor.jar; If you are unfamiliar with Java is also OK, you can use Yui Compressor, the following describes its use. YUI Compressor's configuration and use:

Configure the usage environment first:

1. First make sure that the JDK is installed in your computer

2. Configure the necessary environment variables (details can not be 32, so do not know how to set or search it)

3. In the CMD interface, enter Javac to test whether the installation was successful

Using the method can be from CMD to enter Yuicompressor.jar disk, I take my own yuicompressor-2.4.2.jar as an example:

1. Compress JS

Java-jar Yuicompressor-2.4.2.jar api.js > Api.min.js

2. Compress CSS

Java-jar Yuicompressor-2.4.2.jar style.css > Style.min.css

Web Front End performance optimization

Of course, there is another kind of more stupid way to use, to catch the interest of friends themselves can go to try more.

8. Compress pictures and use picture Sprite technology
Basic principle:

Note: In fact, compressed picture and Picture Wizard is two aspects of the technology, but since all is about the optimization of the picture or put a piece of it.

Now because of the breakdown of the work, professional front-end engineers have little chance to cut the picture, but about the image compression still have to understand slightly, the general picture compression methods are:

1. Reduce the image resolution;

2. Change the image format;

3. Reduce the quality of picture preservation.

About the image Sprite (sprite) technology is directly related to our work, whether in the CSS image or in the HTML structure of the image will produce HTTP requests, front-end optimization of the first is to reduce the number of requests, the most direct and effective way is to use the Picture Wizard (CSS Sprite). The picture Wizard is to put many pictures in a large picture, through the CSS to display part of the picture.

As for the Picture Wizard operation details are not much to do introduction, online related content a lot.

9, attention to control cookie size and pollution
Basic principles and methods of use:
Basic and advanced knowledge of cookies can be seen in an article I wrote, "JavaScript Operation Cookie."

Because the cookie is a local disk file, every time the browser will read the corresponding cookie, it is recommended to remove unnecessary coockie, so that the Coockie volume as small as possible to reduce the impact on user response;

When using cookies to operate across domains, be aware of setting Coockie on the domain name of the adaptive level so that the subdomain is not affected;

Cookies are life-cycle, so please be aware that setting a reasonable expiration time, reasonably expire time and not removing coockie prematurely, will improve the user's response time.

Reproduced in W3ctec

Top 9 issues in Web front-end performance optimization