For more information about CSS optimization, see

I went there a few days ago.NeteaseParticipate in a social recruitment in Guangzhou. The position isFront-end engineers (restructuring)The interviewer asked me a question about CSS optimization.

First, the interviewer asked me about CSS selector optimization. My rough understanding of CSS selector performance is:Id selector> class selector> label selector> adjacent selector> child selector> wildcard selector> attribute selector> pseudo class selector. Then I added another sentence. The performance of this selector is hard to be reflected even in ultra-large Web applications. We can use this as a standard for reference, in fact, there will be no major performance problems. the interviewer shook his head and didn't quite agree with me.

Then, the interviewer asked me about the CSS optimization principles.I usually only use tools to Remove unused rows and rows. There are some spaces between the semicolon and the previous attribute.The interviewer refuted me and said that the attribute can be abbreviated. At that time, I did not continue to answer the question. On the surface, I nodded and agreed. In fact, I have two views on whether this attribute can be abbreviated to optimize CSS.

First, performance problems. If the attribute is abbreviated, I think there is actually a loss of performance. If the attribute is abbreviated, the browser needs to find the corresponding attribute value during rendering and then parse it.

For example:

 
Padding: 1px 2px 3px 4px;
 

In this example, the browser cannot directly analyze padding-top, padding-right, padding-bottom, padding-left, instead, we can draw a conclusion through secondary analysis of the padding attribute. What are the padding values in the four directions? Of course there will be performance loss.

Second, the problem of minimizing the impact. If CSS was originally written as follows:

Padding-top: 1px; padding-bottom: 2px;
 

However, if it is abbreviated, it will become:

 
Padding: 1px 0 2px 0;
 

In this case, I have changed both padding-left and padding-Right to 0px?

What effect does this have on other elements.

 

The above is my brief introduction to CSS optimization.Going To Netease for an interview is just an inspiration and consideration for me. I am very grateful and have not insulted Netease's front-end engineers. Please forgive me.

I hope you can correct the incorrect information here.