[Front-end talk] Break down the details of front-end optimization_html/css

I’m glad to see that more and more companies are paying attention to front-end development. Front-end is no longer a subsidiary skill of website developers. Thinking back to when I first started in the industry, ASP websites (non-ASP.NET) were popular at that time, and 80% of websites were made with ASP. A web page might be an ASP file, with front-end code and back-end code mixed together. It's different now. The front and back ends are separated. The front end can focus on display without paying too much attention to the implementation of the back end. However, because the front-end develops so fast and the display environment is complex and changeable, front-end developers need to master a wider range of knowledge.

In this miscellaneous talk, I plan to introduce some to you from a relatively broad perspective (including JS, CSS, network transmission, HTML5, etc.), taking the whole into parts as a starting point Front-end optimization methods. (Due to limited personal knowledge and experience, in addition to the points mentioned in the article, there must be other optimization methods that have the characteristics of turning zero into wholes . Everyone is welcome to add to it. This article will be updated from time to time)

What is turning zero into whole? In layman's terms, it means that we integrate the broken things into a whole. By operating this whole, we can also achieve the effect of operating the broken things one by one. For example, if you give me four apples, I can walk around with them in both hands; if you give me ten apples, and I carry them all in my hands, I may walk slower because I have to take care of the apples and am afraid of falling; but , if you give me another bag and I put ten apples in it, they will become a whole, and I can carry it everywhere.

OK, having said this, let’s start counting the places in the front end that need to be rounded up.

1. atlas/sprite assets/elf map/sprite map

These are the names for the image collection, which is what the image collection is doing When selecting image resources, concentrate some small image elements into one image. When used, some parameters are used to display the required image elements in the large image collection. For example, if an ICON of this large image is needed as the background of a DIV, in addition to setting the large image as the background of the DIV, you also need to change the position of the background image to display a specific small image.

Example: The sprite assets of a website are as follows:

2. Event delegation

Interview At that time, I often asked a question. There is a list page. The page structure is a BODY outside, with 10,000 sub-DIVs inside. Each DIV contains some text, and these texts are different. The requirement is that when a DIV is clicked, an alert box pops up to display the text in the DIV. what will you do.

30% of people will use JQuery to bind events, thinking that it looks simple and should be efficient, such as: $("body>div").click(...), and 20% of people will write Use native statements to traverse and add click events to each DIV. 10% of people answered that when the page scrolls, save the height of the page scroll. When clicked, get the Y coordinate of the trigger point on the screen and change the Y coordinate. Add it to the scroll height of the page, and then divide it by the height of each DIV to know which element you clicked, and then pop up the content of this element. (Or other similar methods)

Interviewers who answer the above answer will be deducted points for this question. The correct answer is that you only need to add a click event to the external element (this question is BODY). When clicking , you can get the source element that triggered the click event (such as a DIV), and pop up the text content of this element.

3. Long connection keep alive

This is related to the back-end, not just the front-end. Most web pages use http to obtain resources (such as pictures, style sheet files, JS files, etc.). Some servers will not maintain the connection. When a request comes, the connection will be established, and then the content will be output. After the output is completed, the connection will be disconnected. , and then re-establish the connection and output for the next request. If a web page needs to request a hundred files, the server will establish and disconnect a hundred connections. Each establishment and disconnection takes time (even longer than the time to transfer the data), which undoubtedly increases the rendering time of the page. If keep alive is enabled on the server, it will not only reduce the load on the server, but also speed up the page opening time.

As shown in the figure below, we can see that the actual time to receive content (Receiving) is very short, and most of the time is spent in waiting (Waiting) and blocking (Blocking).

4. Multi-DOM merging

As the front-end performance becomes richer and richer, there are more and more things on the page. The problem is that there are too many DOMs, which will cause performance problems when doing some DOM operations. When there are a lot of DOMs, it is necessary to merge the DOMs. You can consider merging multiple DOMs into a small number, or use CANVAS for display if possible.

For example: some requirements will require front-end developers to make this kind of date picker

If you use a DOM to install an option (such as: 1970), regardless of the button, if you look at the date option alone, you may need 44 12 31 = 87 DOM. For mobile browsers, the fewer DOM, the better . What if the product thinks about it later and adds hours, minutes and seconds options in addition to the date? This requires 44 12 31 24 60 60 = 231 DOMs. But we can think about it carefully. If each field (year, month, day) is only contained in a very tall container (such as DIV), the content can be wrapped with line breaks, and the value is obtained through some algorithms. Isn’t the number of DOM significantly reduced? From 87 DOMs to 3 DOMs. An order of magnitude less.

5. WebSocket

Many web pages have the requirement to update data in real time, such as securities websites. In order to avoid page refresh, AJAX will be used to perform long polling, and the data will be fetched from the server every once in a while (such as one second). This will cause a large number of request connections, which will not only put a lot of pressure on the front end, but also on the back end. Fortunately, HTML5 has brought us WebSocket. The web page can maintain a long connection with the server and maintain real-time updates of data through the long connection.

6. CSS attribute inheritance

CSS will inherit the attributes of the parent element. We can add some common attributes to the CSS of the parent element. Definition, child elements obtain these elements through inheritance. In some cases, proper use of inheritance can significantly reduce the size of CSS files.

7.documentFragment

"A list page requires you to insert a thousand DOMs into it. How do you do it?" This is me A question I often ask others.

Many times, when you add a DOM to a page, it will cause the page to be reconstructed. If you use traversal to add them one by one, the page will be re-rendered every time, which will cause performance degradation. A good way is to cache the elements to be added first and add them all at once. Generally, documentFragment is used for caching, and some use long strings (HTML code strings) for caching.

8. Merge multiple animations into one

When doing CSS3 animation, if the requirements require multi-step animation (such as, Rotate a DIV 30 degrees along the Y axis, then rotate 30 degrees along the X axis, and then rotate 30 degrees along the Z axis). We can merge these animations and use animation keyframes to isolate these steps. Save the cost of multi-step DOM operations.

9. Multi-file compression and merging

Compressing JS and CSS files is an effective way for the front-end to reduce network transmission volume (compressed The general method is to remove extra spaces and newlines, and replace variable names or method names. YUI Compressor is a good tool)

Merge multiple small JS or CSS files into one large file. This approach can significantly reduce the number of requests for instructions.