Front-end performance optimization - the pain points that front-end engineers have to talk about

Preface <br />In the previous article "My CSS Architecture Concept", I was recommended all the way thanks to the kindness of my friends in the park, which made me, a small front-end engineer, feel surprised, excited and then panicked. What worries me is that my qualifications are limited and my knowledge is lacking, and I am very afraid of misleading young people. This is the truth! But I will still insist on writing articles when I have time. Not only can I summarize, but I can also learn new knowledge and share it with you. I believe that sharing is a meritorious thing. Isn’t the Internet colorful because of this?

In the comments of the previous article, many friends questioned my CSS architecture regarding HTTP requests. I wanted to answer them, but I didn’t know where to start. I don’t have a deep understanding of front-end performance. I’ve skimmed through one or two books on refactoring, like to look up information, and read articles written by some experts. I think what they did makes sense, so I copied and used what they learned, and made some summaries, so this article came about. None of this is new, but because there are so many little bits of knowledge, I hope that what is in there can give you the answers you are looking for.

Front-end performance optimization-the pain that front-end engineers have to talk about
1.html, css and js are separated. Separate thoroughly! I believe everyone understands why these three need to be separated, so I won’t explain it in detail.
2. How to import css. CSS uses link instead of @import, because in IE the @import directive is equivalent to writing the link tag at the bottom of the HTML, which prolongs the loading time of CSS and may also change the order of file downloads.
3. Treat jQuery rationally. jQuery allows us to "write less, do more". It has too many advantages: powerful selectors, perfect encapsulation of DOM operations, complete Ajax, and good compatibility processing. But are we really inseparable from it? I think it should be based on demand and business logic. If a page can be achieved with just a few or dozens of lines of js code, why use jQuery? Let the page load jquery.js first, and then write your own code? That's not necessary.
4. Reasonably layout the content of the page. The loading order of DOM is from top to bottom. When encountering CSS, load CSS, encounter JS, stop, load and parse JS. When laying out a page, it is a better solution to display the main content first, place the important content at the top, and let the browser parse it first.
5. How to import js. "The Return of the JavaScript King" compares the advantages and disadvantages of js import methods. I personally think that without considering the reuse and maintenance of JS code (but this often becomes my most important metric), the JS code with important business modules should be placed in the title, and the secondary JS code with operational effects should be placed after the corresponding object in the DOM. The theoretical basis for doing this is the loading order of DOM. The above statement is not easy to understand. For example:

The above picture shows the navigation of QQ Music’s homepage. The importance of the main navigation is self-evident. The following are two corresponding codes:

Copy code

The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test--js import method 1</title>
<script type="text/javascript">
</script>
</head>
<body>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Music Library</a></li>
<li>
<a href="" id="mv">MV</a>
<div class="">
<a href="">MV Recommendation</a>
<a href="">MV Library</a>
<a href="">Music Scene</a>
<a href="">MV Special</a>
</div>
</li>
<li><a href="">My Music</a></li>
<li><a href="">Download the client</a></li>
</ul>
</body>
</html>

Copy code

The code is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test--js import method 1</title>
</head>
<body>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Music Library</a></li>
<li>
<a href="" id="mv">MV</a>
<div class="">
<a href="">MV Recommendation</a>
<a href="">MV Library</a>
<a href="">Music Scene</a>
<a href="">MV Special</a>
</div>
</li>
<li><a href="">My Music</a></li>
<li><a href="">Download the client</a></li>
</ul>
<script type="text/javascript">
</script>
</body>
</html>

The js effect of the two pieces of code is to display the submenu options when the mouse moves to the MV menu item. In the first code segment, when the browser parses to the <script> tag, it will stop until the parsing is complete, and then continue to move on. When the MV is displayed, the submenu will be displayed as soon as we move the mouse over it. In the second code segment, when the browser parses to the MV, and then to the <script>, it has to load js first, and the submenu will not be displayed until it is completed. Obviously, for such an important functional module, the first code is more suitable. Regarding this principle, I don’t know if there is any deviation or error in my understanding. Friends in the garden who have conducted in-depth research on it, please correct me.

6.Select the image file format. Regarding this point, Taobao UED’s picture format and design have a very in-depth discussion. I personally feel that I have benefited a lot from it, but the article is too long and too in-depth, and I really can’t read it without patience, so later I summarized it myself. You can refer to the following three choices of image file formats. After summarizing this article, I strictly followed it when working.

7.Sprites mapping technology. This is a controversial technology since its appearance. First, we need to open PS and arrange many small icons together in an orderly manner. Second, we need to open PS, and it is best to zoom in 5 times, then pull down two reference lines horizontally and vertically, and then align them with the ruler, write down the left/top values, and write them into the CSS file. Third, sprites mapping technology is closely related to height and line-height. Because of them, the left/top positioned in the second point will become inaccurate. At this time, you should leave a certain gap between the icons, otherwise be careful that only half of the icons will be displayed. I really don’t have the energy to take screenshots and write code to prove that I am right, but you can do it yourself. I seem to have trivialized this technology, which makes Dave Shea feel embarrassed! I think the main reason why texture technology is still widely used is that it greatly reduces the number of requests and reduces the total size of images to a certain extent. Compared with these two points, the shortcomings I mentioned earlier seem insignificant.

8. Make the page progressively enhanced. Combine the resolution, operating system, browser, and target user group of the project, and adopt the principle of progressive enhancement in the process of page creation. If the target user group of the project generally uses 1024*768, Mac os x, ie7+ browser, then when designing the page, the width should be limited accordingly, and it is best if there is no horizontal scroll bar; the font should no longer be Songti, and other web-safe fonts should be used; then we are happy because we don’t have to consider ie6. Don’t you feel that work has suddenly become very happy? Progressive enhancement can be applied not only in the big picture, but also in the single-page module.

(Figure 1)

(Figure 2)
Figure 1 and Figure 2 are screenshots from an li in a list. Figure 2 shows the effect when the mouse moves over the li - it displays "Unfollow". I will apply the principle of progressive enhancement in this module: First, we need to consider IE6. Since IE6 does not support the hover effect of other tags except the a tag, and "unfollow" is an important function, it is not possible to do without it, so we can only use js code to achieve the mouse in and out effect; second, if IE6 is not considered, then assuming that the tag of "unfollow" is span, you can write it in the CSS style sheet like this: li:hover span{display:block;}; third, if the "unfollow" function is replaced with irrelevant text display, such as time display, then the second writing method can also be used, so that other browsers can display it and it will not have much impact if IE6 does not display it.

9. Use fewer filters, expressions, and hacks. This is mentioned in many refactoring books. Filters have been tested in the project. When there is a wall of photos with filters applied, the browser loads the page very slowly. I saw it with my own eyes! The expression is unknown. I have been avoiding hacking since the beginning and have hardly ever used it, so I have no comment.

10. Use some external applications to reduce the number of requests for css and js files. PHP programmers can consider using minify to integrate the CSS and JS of each page together, and then call them in the page. In this way, the page only requests CSS and JS once, and the performance will be greatly optimized.
This is all I can think of for now. There should be a lot more to optimize front-end performance. These are just the basics. We will go deeper into it slowly. Okay, let’s talk about something else!

Front-end and art staff <br />Front-end engineers report to art designers above, connect to back-end engineers below, and are backed by products; none of them can be missing. The division of responsibilities must be clear. The front-end designer should tell the artist to use as few pictures as possible, to choose the file format of the pictures reasonably, to keep the website page style as consistent as possible, to give the website the main business link color, secondary link color, main text color and other text colors, etc. Artwork is done for a single page, and it is often impossible to consider the final effect of the entire website. At this time, the front end should play a prompting role. If this link does not determine what needs to be determined, it will be quite painful to revise the version.

Front-end and back-end personnel <br />Communicate the naming method clearly, explain the ideas of the front-end css, js, and image directory structure definitions to the back-end personnel, and understand the working principles of the back-end.

Front-end and Product Manager <br />It is not easy for people in any position, and it is even more so for product managers. Ultimately, the product manager is the one who is responsible for the product. I don’t know if it’s for this reason, but the product managers I met are all extremely meticulous. Some are even so meticulous that they can tell if the prototype rendering is 2 or 3px different! If the product manager is too focused on details, the front-end will be miserable. How to deal with such a situation? Like a product manager, think about problems from the perspective of products and users. Never think about problems from your personal position, otherwise you will never be able to convince him. Of course, this is a bit difficult...
Finally I have finished talking, let me make a summary, some thoughts on program design: Programs are like life, sometimes you need to compromise. You can't ignore code maintenance just to reduce the number of requests. You can't use the same treatment method for users using 2M and users using 10M. The number of website visits should also be taken into account. Multiple aspects should be considered and weighed to come up with an optimal solution. I think this is the most reasonable thing.

<<: HTML input box optimization to improve user experience and ease of use

>>: How does MySQL achieve multi-version concurrency?

Small program to implement a simple calculator

Front-end performance optimization - the pain points that front-end engineers have to talk about

Small program to implement a simple calculator

Docker container source code deployment httpd use storage volume to deploy the website (recommended)

Enter two numbers in html to realize addition, subtraction, multiplication and division functions

How to uninstall Linux's native openjdk and install sun jdk

HTML code text box limit input text box becomes gray limit text box input

Share some uncommon but useful JS techniques

Simple example of HTML text formatting (detailed explanation)

Introduction to vim plugin installation under Linux system

HTML tag overflow processing application

Docker MQTT installation and use tutorial

Recommend

jQuery implements the practice of changing the position and size of div by dragging the mouse

Solution to the ineffectiveness of flex layout width in css3

How to import txt into mysql in Linux

Solve the problem of Chinese garbled characters when inserting data into MySQL by Tomcat under Linux

A detailed introduction to setting up Jenkins on Tencent Cloud Server

Instructions for deploying projects to remote machines using the Publish Over SSH plugin in Jenkins

element-ui Mark the coordinate points after uploading the picture

mysql 8.0.18.zip installation and configuration method graphic tutorial (windows 64 bit)

How to modify the default network segment of Docker0 bridge in Docker

mysql 5.7.17 winx64.zip installation and configuration method graphic tutorial

Solution to the problem that MySQL in Windows system cannot input and display Chinese

How to change apt-get source in Ubuntu 18.04

How to run nginx in Docker and mount the local directory into the image

Vue scaffolding learning project creation method

How to publish static resources in nginx