This article mainly introduces performance optimization when writing CSS and a summary of high-maintenance optimization suggestions, including popular discussion points such as sprite images and size settings. Friends in need can refer to

Performance, This word is very popular nowadays, and it is also a stage of "how to do it well" that every developer must go through after "knowing" and "being able to do it". Performance is about user experience on different devices and different network conditions. It is also affected by many factors. This article talks about how to achieve high performance in CSS.

High-performance css

The performance problems of Html and css themselves are not outstanding. On the premise of improving readability and maintainability, if the code can be run And the faster parsing speed is the icing on the cake.

1. Use efficient css selectors

Simply put, a css selector that can be quickly parsed and matched by the browser is an efficient selector.

First we need to know how the browser parses css

For example:

.nav ul.list li p{}

Copy after login

Our common thinking is to first find the nav class, Then look for the ul contained in the class, and then find all the p's in all li's that are descendants of the class list in ul. In short, from left to right. But is this the case? What? What? ~

The truth is the opposite! What does it mean? That is to say, it does not start from the first one and slowly narrow the scope, but starts from the "streaking" box p, which is equivalent to traversing, and then finds li, and so on. Well, you should know this without me describing it. consumption among them. It's important to understand this principle. Efficient selectors mean faster matching and fewer lookups. Therefore, when we define the selector, we should minimize the number of first matches and minimize the overall number of matching searches.

The above explanations exactly follow these principles

(1) Avoid using wildcards

(2) Avoid using tag selectors and single attribute selectors as key selectors

(3) Do not add tag names before the id selector

(4) Try not to define too many levels in the selector. The fewer levels, it also reduces the complexity of the CSS and DOM structures. The degree of coupling and the maintainability of the style are improved

(ps: To be honest, have you committed any of the above "taboos"?~)

To make a summary, as mentioned above, There are two points to know. The first point is mentioned at the beginning. The performance issues of CSS are not prominent, especially in small projects, so maintainability comes first. The second point is that although the id selector is defined , has the advantage of uniqueness, but a page can only define a unique ID. Defining too many IDs will reduce reusability and make maintenance more difficult, so it is not recommended to use multiple IDs.

2. CSS-related image processing

In today’s web pages, everyone knows the proportion of images and its importance. So how to handle images well and how to set styles for images so that users can have a better experience when opening web pages? Here are some opinions:

(1) Do not set the size of the picture

In my personal experience, there have been such situations. I followed the design draft After finishing the page and handing it over to the backend for testing, he suddenly came to me and said: Hi, look, something is wrong here. When I saw it, it was bad, the picture was out of place, and then I remembered that I didn’t define the width and height of the picture. (You don’t need to cut it directly from the design draft), and then you defined the width and height in the css style as if you made a mistake. So I later took this as something to pay attention to the next time I create a page. When I saw this opinion, I knew something better.

Let’s look at the explanation. First, designers will make some pictures that exceed the required size in order to make the picture beautiful. Second, the same picture may be used multiple times in different places on the page, such as thumbnails, normal Picture, big picture. Here comes the problem. If the original size of the image is different from the actual demand, there will be performance problems during use. Using style scaling will bring extra calculation process to the CPU, increase the rendering time of the image in the browser, and the network transmission process will also Take up more bandwidth and increase download time. Therefore, the best practice is to create a separate set of images for the required parts so that they can be displayed faster during the initial page load.

(2) Use css "Sprite Picture"

is to merge scattered pictures into one large picture, and use css for background positioning. The advantage is to reduce the number of requests and improve the overall loading speed of images.

But it also has some shortcomings:

For example, merging multiple pictures into a large picture requires precise calculation and careful position adjustment. Simply hand-making is a very complicated matter. (Fortunately, there are some tools that can help us do this.)

In addition, the maintenance process is complicated. Try to keep the existing pictures in their original positions. If the size of the background picture changes, the original area cannot be Place it, then you have to give up. If you have to modify it in the original position, the remaining image styles will need to be modified, which is a very cumbersome process. Newly added pictures are best placed at the end.

Also, improper use can lead to performance problems. The biggest problem is memory consumption. If you do not make any planning during the production process and place them randomly, the pictures may become quite large and occupy a lot of memory.

The following are some best practices:

1. Apply css sprite technology later in the project

Because generally during the development process, images will be modified or replaced frequently. If sprite technology is used at this time, it will increase a lot of development costs.

2. Reasonably organize the "Sprite" pictures

If you want to put all the pictures on one picture, there will be something wrong, and it will not be easy to maintain. very convenient. Organizational background images are mainly divided according to modules and background image styles. For example, thumbnails for display are placed together, and icons such as comments, likes, up and down arrows are placed together, etc.

3. Control the size and size of the "Sprite" picture

Because large-size pictures will take up a lot of memory, they must be controlled to a reasonable size. Recommended length and width The multiplication shall not exceed 2500, and the size shall be within 200kb

4. Reasonably control the distance between background image units and the position of the background image

This principle is to prevent When the size is smaller than the element size, other irrelevant background images appear in the area

5. Use relevant tools to process sprites

3. Reduce the amount of css code

An important means to improve the overall loading speed of the website is to increase the network transmission speed of code files. In addition to code compression, streamlining code is also a means.

(1) Define concise css rules

Merge related rules and define concise attribute values

Merge rules refer to things like font-family, font-size, font-weight, etc. can be combined into font. Concise attribute values, such as color value: color, #33AAFF can be simplified to #3AF, etc.

(2) Merge the same definition

There are always some modules in the web page that have high similarity, so the same part can be defined once, and different parts Define it separately. And in CSS, many properties can be inherited, so you only need to define them once in the appropriate place.

(3) Delete invalid definitions

Invalid definitions will not affect the display of page functions, but will affect the performance of page display and increase the amount of code. , also increases the time it takes for the browser to parse the code. Invalid definitions include invalid rules and invalid style attributes, which are generally introduced during the development process and cannot be judged intuitively. In this case, you can use tools, such as Chrome's own tools, to find invalid styles in CSS. .

Other css high-performance practices

(1) Avoid using @import

@import imported new style files will Prevents parallel downloads of pages, which increases the overall load time of the file.

(2) Avoid using the unique styles of IE browser: image filters and css expressions

The use of image filters will block the browser when the image is loaded. loading and rendering, and will add additional memory overhead. The function of CSS expressions is to dynamically set CSS properties. Expressions not only have compatibility issues, but also performance issues. For example, when the browser size changes or the window changes, the browser will make frequent calculations and consume a lot of performance. The same effect can be achieved with javascript.

css3 best practices

Check browser support

We get the most questions when using css3 One question might be: How is the compatibility? There is no way. With the development of CSS, it can provide a better solution to many difficult-to-solve problems we have encountered before, making us unable to help but wonder if we can do that. On the PC side, there is the much-criticized IE series, which will be much better on the mobile side, but some of it is still not very good. Therefore, checking browser support has almost become a must. If the features you use are only decorative and do not affect the overall situation, you do not need to consider too many compatibility issues. If it is due to design requirements and must support all browsers, you need to pay special attention to it. Developers can choose online tools such as caniuse.com, css3 Click Chart, css contents and browser compatibility to check compatibility.

Add the necessary browser prefix

For friends who have just started using CSS, if you occasionally see something like: "-webkit-" in the source code of a website, -moz-" Wait, you may find it strange, what is this? They correspond to the prefixes added by different browser manufacturers.

Because the browser may only implement an early version of the standard definition when supporting css3, so it does not yet support the standard writing method. Adding a browser prefix to the code is also a helpless move, which will make the code more. More difficult to maintain.

But it is not necessary to be compatible with all browsers for the sake of "perfection". Generally, you can decide whether to add it or not according to the market share of the browser or system version and the proportion of target users using the browser. Prefixes and adding several prefixes. And I believe that with the gradual development and continuous upgrades and updates of systems and browsers, the need to use prefixes will decrease.

The problem comes again. Since it is necessary to add necessary prefixes, it means that sometimes it is still necessary. If it has to be added, isn't it troublesome? The same rule needs to be written three or four times and may be used in many places. What should we do? Don’t worry, here are a few countermeasures:

1. Use tools to add browser prefixes to css attributes

Prefixr can process the code in the later stages of development. It will automatically add required prefixes and delete unnecessary prefixes.

Autoprefixer, if you want more autonomy in the development process, you can use this tool. Developers can customize the browser support range. It also has multiple ways of use and can be integrated into multiple development environments. middle. There are also several tools available: cssFx, *css Agent* and -prefix-free.

2. With the help of css preprocessing technology

Currently popular ones include sass and less. The specific method is to define a template style based on the css3 style characteristics. The advantage is: it avoids a lot of duplication of code and only needs to maintain one definition.

3. Don’t over-add browser prefixes

In order to be compatible with all browsers, some developers add the prefixes of all browsers to the css code no matter what the situation. , this is a negative encoding method that adds too much repeated code, reduces the browser's parsing performance, and increases complexity. At the same time, some prefixed attributes may not be supported by the browser.

4. Add css3 standard attribute definition

What is a standard attribute definition? There is no need for any browser prefix. You may have noticed that many places that use CSS3 will write standard attribute definitions at the end. Why? Because when the browser supports standard attributes, it can overwrite the definition with the prefix added before. The standard definition of attributes in CSS3 is the definition that conforms to the specification. The definition with the browser prefix added will gradually be eliminated as the browser is updated.

Of course, another thing to note is that some attributes currently belong to Only webkit or Only firefox, so there is no need to write standard definitions and other browser prefixes.

Do a good job of compatibility with the new features in css3

When it comes to compatibility, lower versions of IE will be mentioned, such as very common rounded corners, transparent images, etc. Sometimes we downgrade them, such as filter or javascript, using box-sizing and transform. It is recommended to use Modernizr. This framework contains many compatibility solutions for new CSS3 features.

No matter which solution is used, it will bring performance losses and cannot be abused without any rules. It still requires everyone to weigh and choose. Recommend a website with suggestions on how to use HTML5 more efficiently: html5please. The website divides the new features in CSS3 into three categories according to how they are used:

(1) Direct use of

contains most of the new features, and some features themselves are not Will affect compatibility, such as border-radius, media queries, etc. Some need to add downgrade processing, such as multiple background images, you need to set a single background image or background color as an alternative.

(2) Use with caution

This part is mainly a performance issue, such as box shadow applied to elements that occupy a large area, when the page scrolls or the mouse hovers, It will cause considerable performance problems.

(3) Avoid using

because they may only support a certain browser, such as reflection, so you need to avoid using it.

In summary, there are many ways that CSS can be used to improve performance, but we can easily ignore them because their impact does not seem to be so obvious, and many people may It’s convenient. You can use your talents freely and write whatever you want, as long as it can achieve the effect. This is also a bit negative. Have you forgotten your goal of being an excellent engineer? ! ~~Although CSS rules are not difficult, it is not easy to write them well. You still need to have some pursuit of perfection. Please write and cherish it! ~

High maintenance css

What are the characteristics of Css?

Simply speaking, usage methods: inline, embedded, external, import. How to style elements: element tag name, class name, id, various selectors, and combinations thereof. Therefore, it is very flexible. If there are no standard restrictions, it will definitely lead to confusion and difficulty in maintaining the CSS code.

How to organize css code efficiently?

Clear structure, distinct modules, and reasonable code organization structure can improve code reusability and maintainability and reduce development complexity. So how to organize it?

The first is to organize code files, which can be divided into two categories: general categories and business categories. Then, there is a file for reset. Common names are reset, default, normalize, etc.

There is a file used to store common modules and some basic styles, often named mod, common, etc., such as page dialog boxes, prompt boxes, headers, bottoms, sidebars, etc., which will be displayed on multiple pages. Used to reference each page in this way to improve code reuse.

In addition, a file is required to contain styles that are compatible with the old version of IE browser. This has two benefits:

1. Reduce the burden of loading style files for non-IE browsers

2. If you decide to no longer support the old version of IE in the future, you only need to modify one file, and there is no need to search for multiple files to modify. Of course, one principle when dealing with browser compatibility issues is whether there are other solutions that do not have compatibility issues. If not, then put the parts that need to be compatible in a separate file.

The remaining css style files are used for business modules. The style files of different modules are placed in different folders. In principle, the style files of each module should not be too large.

This may cause a problem. Doesn’t a page have to introduce many files? Aren't there a lot more http requests when the page is loading? In fact, there is no contradiction. The division of files is only to facilitate development and maintenance. When publishing, tools will be used to compress and merge multiple files into one file, so there is no need to worry about introducing multiple files.

The above is about the organization of files, so style statements must also be organized in files according to certain rules. For example, according to the level of the elements in the module, if they are at the same level, then according to the position of the element on the page, from top to bottom, or from left to right. If there are multiple elements sharing the same declaration, the common style should be declared first. If you feel that this is not enough, you can use some more advanced methods, such as less and sass, which give CSS dynamic language features, such as variables, inheritance, operations, functions, etc.

The above is discussed from several general directions. Let’s talk about certain points below

Use css reset to unify the browser display effect

First of all, html tags have original styles, but the problem is that in different browsers, the default styles of tags are different. Some of these differences have caused trouble for development. As early as 2004, someone developed The first reset style file was created, called undohtml.Css. Subsequently, there were a variety of reset plans, one of which was "hot for a while". This plan has a total of one line of code *{margin: 0; padding: 0;} . The default margin and padding styles of all tags have been reset. However, one drawback is that it increases the complexity of subsequent development and cannot effectively improve the overall development efficiency. In addition, the performance of this solution is also poor, which will affect the performance of page rendering when there are many page elements. Therefore, people are gradually exploring better reset methods. There are currently many popular reset solutions, including Reset CSS developed by Eric Meyer and YUI Reset CSS developed by Yahoo's front-end technology team. In fact, there is no one solution that is suitable for all projects, so it is best to refer to other people's solutions and then design a solution that suits your own project.

The following points need to be considered:

(1) HTML5 new tags need to reset their display styles because their default display styles are not defined in earlier versions of IE.

(2) The differences between padding, margin, and border tags in browsers are mainly caused by the default styles related to these three styles, but it does not require resetting the margin, padding, and border of all elements. It should be based on the actual situation.

(3) Font settings