Shulou(Shulou.com)06/03 Report--

This article mainly shows you "CSS in front-end optimization need to pay attention to what", the content is easy to understand, clear, hope to help you solve doubts, the following let the editor lead you to study and learn "CSS in front-end optimization need to pay attention to what" this article.

1. Development principle

1.1 write code that meets the performance of contemporary browsers

If you want to improve front-end performance, you must understand how browsers work, even roughly, so that you can know where the performance bottleneck is and how to optimize it. The following figure shows the process of the Webkit browser from the code (HTML+CSS) to the user finally seeing the page.

Why do browsers download the HTML content of the page in the first place? First, the HTML is parsed into a DOM tree, and then the HTML contains all the other resource files (styles, scripts, images) that display the page. Then the DOM tree and the CSS stylesheet (both custom and browser default) are combined to form a render tree, and the browser begins to "draw" to the screen based on the render tree.

To improve browser performance, you can start with reducing the number of elements in HTML and reducing redrawing. The former is easy to understand, do not abuse HTML tags, and should be de-semantically laid out with a minimum but necessary HTML. The latter plays a more important role in improving the performance. After the element has been drawn, dynamically changing the DOM structure or CSS style will cause the browser to redraw. The performance loss of redrawing depends directly on the scope of dynamic changes. For example, changing the position of an element or adding an element will cause a lot of redrawing, because it affects all the sibling elements; or, for example, when dynamically adding a list, do not add li one by one, because each addition will lead to a redraw, but put all the items together and add again. In addition, some guidelines for reducing redrawing include specifying the width and height of img elements, not using tables for layout, defining character sets within head tags, and so on.

Generally speaking, the deeper the element is in the DOM tree, the less impact it will have on other nodes; if you want to do multiple operations on DOM, try to merge it into one, for example, when you want to modify multiple styles of a DOM element, do not repeatedly assign values to various attributes under element.style, but write multiple styles to be changed in a CSS class, and then assign this class to the DOM element.

1.2 use CSS to lay out and process boundaries

The browser rendering page is actually rendering a series of "boxes", and these "boxes" can be nested. When using CSS for layout, you should pay attention to semantics, wrapping a set of elements in a box, rather than throwing some elements out of the box. As shown in the figure below, to implement this simple two-column layout with CSS, it is better to set a padding-left for the right column and position the icon in the left column absolutely to left:0, so that you have a box with everything contained inside. The wrong thing to do is to set margin-left for the right column and position the icon in the left column absolutely to left:-50px, which puts the icon outside the box and defines a negative coordinate, which is not only not semantic (putting the elements that should be included outside the box), but also has an incongruous sense of code such as negative numbers, and this layout may also cause problems on old browsers.

When writing styles with CSS, you should also consider modularity and reusability. If the code you write is content independent, it is reusable. In addition, we can often see the problem from the naming of the CSS class. My experience is to try to name the element after the style rather than the function of the element. For example, when adding a style CSS class to a send email button, .btn-send-mail is better than .btn-send-mail, which can be reused on any button to confirm the operation (of course, .btn-send-mail class can also be used as a js event binding. As long as it is not bound to any style).

1.3 incremental Enhancement

Progressive enhancement means that there is first a basic design that is compatible with all browsers, and then enhanced styles or functions are made for newer browsers. For example, when setting a gradient background color, you can first define a background-color property (degenerate style), and then set other linear-gradient properties, which can ensure that a background color can be displayed normally when the browser does not support CSS3.

It is strongly recommended not to judge whether a feature is supported by the browser type or version number, but by feature detection. For feature detection, it is recommended to use the third-party library Modernizr.

two。 Performance criteria

Front-end developers should not only provide users with the best interface experience, but also care about the loading time of the page. In April 2010, Google included the speed of page loading in the search rankings. A lot of research data show that there is a positive correlation between user traffic and loading speed, which shows how important the optimization of page loading speed is. Here are some performance guidelines, sorted according to their impact on page load time.

Reduce HTTP requests: the number of HTTP requests is one of the most obvious aspects that affect front-end performance. Many modern browsers support four parallel connections. Understanding the parallel connection mechanism of browsers and distributing resource files to different domain names using browser concurrency can improve loading efficiency. Loading a small number of large files is better than loading a large number of small files, so online sites should merge CSS and JS files as much as possible. In addition, using the picture wizard (CSS Sprite, commonly known as sprite) to combine small images such as icons into a large picture can reduce a large number of image HTTP requests.

2.2 use CDN acceleration: if you can, putting static resource files such as images, fonts, JS libraries, etc., into CDN can greatly improve access speed. When using CDN, you should add a timestamp to each file reference so that you don't have to worry about the impact of expiration on the CDN server.

Avoid empty src and href attribute values: the img element of an empty src is dynamically assigned by JS, causing the browser to initiate a useless HTTP request. Similarly, clicking on the a tag of href also causes the browser to initiate a HTTP request, usually reloading the current page, which is why it is difficult for many beginners to discover the bug.

2.4 add expiration headers: you should add expiration headers to static resource files, and the expiration date should be set so far away that it can basically be considered never expired, so that browsers will cache static files. However, in order to prevent users from updating the latest files, it is best to add version control to the file name.

2.5 enable gzip compression: enabling gzip compression on the server can reduce text file transfer traffic by an average of about 70%.

Put CSS inside and Javascript at the end: the browser parses both HTML and rendering elements, putting CSS in front ensures that the style of some elements rendered first is correct, while putting CSS behind will cause a lot of browser repainting. Put the script tag at the end, because the browser will preprocess the js file, and putting the js file in the header will delay the rendering of the page elements and make the user feel that the page opens more slowly.

Avoid using CSS expressions: CSS expressions are only supported in IE5, IE6, and IE7. Using CSS expressions is not only much longer than normal writing, but also seriously affects the efficiency of page rendering-expressions will be evaluated as soon as the page is scrolled or even moved by the mouse, which is totally unnecessary.

Remove unused CSS statements: in a real project, there may be a common.css for each page to refer to, indicating those common styles, which should be used to maximize the utilization of such public files.

Code compression for Javascript and CSS: compressing code can significantly save bandwidth and improve loading speed. It is best to use tools to compress the code when deployed online.

The above is all the contents of the article "what should CSS pay attention to in front-end optimization?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.