Front-end optimization can be optimized like this! _html/css_WEB-ITnose

I have been doing front-end work for nearly two years, and I would like to summarize the experience I learned at work.

First of all, follow my thinking. The action of a user opening a web page can be understood as involving the following two major items: browser and server.

Let me talk about the server side first, as shown in the picture

As you can see in the picture above, the action of accessing the page (client) is HTTP on the server side. Since we are getting things, it’s easy to say, (please ask for a more appropriate metaphor)

　　　一: The speed must be fast. All the front-end can do is use CDN services.

2: It is light enough. There are many things that the front end can do, such as compressing images, compressing css js files, html css and using them efficiently (avoiding table tr td and .div ul li span div{} and other similar codes. ), json data interaction (many times lighter than xml txt).

Three: Few times, such as synthesizing images, css, js file integration, caching (cookie, just cache important things, because the cache is stored on the client in the form of files, if it is too large, it will affect the browser's ability to read the file The efficiency)

Let's take a look at the relationship between the browser and the client. The order is from top to bottom, and js is the overlord in the browser (because the browser cannot do other operations at the same time when executing javascript. The browser can continue to render the page only after the javascript is executed.),

So css is placed at the head and js is placed at the bottom.

2: Repaint (redraw) Reflow (reflow) Redraw is when the appearance of an element is changed, but the layout (width and height) is not changed, such as changing the outline color, background color, etc. Reflow means that changes in the DOM affect the width and height of elements

. The browser will recalculate the width and height of the element, which will affect the layout of the page. This is also the reason for the inefficiency of reflow, such as changing the window size and changing the text size. Content changes, etc. The solution is to avoid reflow as much as possible. If it is difficult to avoid

, try to position the elements as fixed and absolute.

Three: css efficiency id>class>tag>Great class. This doesn’t require much explanation.

4: DOM operations. JS and DOM can be regarded as two islands. Every time JS operates on a DOM element, it has to pass through a bridge. The more operations it takes, the more times it has to cross the bridge, and the efficiency is low, so try to reduce the number of times. Moreover, modifying DOM elements

will cause redrawing and rearrangement. Looping DOM elements is an even greater sin.

5: The other thing is cookies. Everyone knows it.

After a summary, I found that optimization is just like this, but I always feel that my metaphor is not very appropriate. If you have a good metaphor, you must tell me so that everyone can learn and understand together. My QQ is 523463345

                                               🎜>

 

                                                                           >