background
Two years ago, in March 2020, LeetCode (Chinese version) launched the " Daily Question " activity. A topic is announced on the Leekow website every day, attracting everyone to do the questions and discuss together.
At that time, I stayed at home because of the epidemic and stayed at home. As a Lekron lover, I am thinking of organizing a "Daily Question" check-in activity by myself!
Although the first reaction was "Oh, what I wanted to do was done by Likou!". But after my wife's advice, I understand that there is no need to compete with Likou to hold the same "Daily Question" activity. I should give full play to my own strengths and build a community around the "Likou Daily Question" activity.
So that night, I set up a small group called " Likou Daily Question Check-in ", and started to invite good friends around me to make up the numbers. In the group, everyone can discuss today's Likou daily problem solution, and supervise each other to check in.
How to check the check-in status of group friends?
I researched similar check-in groups, and they all need to send screenshots and then human flesh statistics after the check-in is completed on Likou.
The number of people in the group soon reached 50. It would be so tiring to count the daily check-in situation with human flesh!
But we are programmers! If you encounter a problem, let's develop a project!
So, I spent a weekend developing the " Daily Check-In Website ". The address is: ojeveryday.com
The website uses crawler technology to count whether all members have completed today's topic. That is to say, as long as members complete the questions on Likou, the check-in website will update the member's status to " checked in " after a while.
Fully automated, no additional operations required! Extremely lazy!
The website has been online for two years, what is the situation now?
-
The number of participants has reached 3626;
-
Established 6 check-in supervision groups;
-
Produce an open source algorithm brushing template: AlgoWiki
-
Including this official account was originally created for the check-in organization.
However, recently I found that the opening speed of the check-in website is really too slow, and it takes a long time to open every time.
Take a look through Chrome's troubleshooting tool and find that it takes 15 seconds to open a webpage every time!
According to research, the longest time a netizen can tolerate opening a website is 6-8 seconds; if it exceeds 12 seconds, 99% of users will directly close the webpage without waiting.
The best time for a page to open is 2 seconds!
So, it's time to optimize this website! Grab the keyboard and do it!
analyze
What is the reason for the slow loading of the website?
Through the analysis of the request when opening the website, I found that the operations that take a long time are " static resources " and " background interface ", which take up more than 2 seconds.
There are still some static resource requests that fail. .
So the idea revolves around " optimizing the loading speed of static resources " and " optimizing the background interface ".
Optimize static resource loading speed
First look at how to access static resources.
The one that took the longest time angular-1.2.10.jswas placed on the slag server, but it was not CDN. So although the access is successful, it is very slow.
And the request failed jquery.dataTables.min.css, although it was placed CDNon the Internet, it was from abroad CDN. Access failure should be understandable!
Therefore, for the optimization of "static resources", the method I adopt is to put these resources in the country CDN.
With the popularization of cloud computing technology, cloud servers and CDNthese services are actually available at your fingertips, and the price is very cheap.
The object storage service of a certain cloud I adopted :
When creating a new object store, select the permissions to be set to " private write, public read ".
Upload the static resources used in the website to the object storage using the upload tool provided by the manufacturer.
CDNTurn on acceleration again .
When reading resources, use CDNthe accelerated domain name.
Open the website again to see how fast the static resources are loaded:
In the past, these time-consuming users, now the access time is basically within 60 ms.
The longest time-consuming before angular-1.2.10.js, the access time 4.04shas changed from 37ms, to 100 times faster!
jquery.dataTables.min.cssThe previous failed and failed visits jquery.dataTables.min.jscan now be accessed normally, and the loading time only takes 20msabout 10 minutes!
Feel like flying!
Can it be faster?
The static resources of a website basically rarely change . The browser will cache static resources for us.
When the web page is opened for the first time, all resources must be obtained from the server.
But when " refreshing " or " opening again " after a short interval after closing the web page , static resources are read from the disk/memory cache , so the speed is extremely fast 0ms.
So far, the optimization of "static resources" has been completed.
interface acceleration
It takes a few seconds for the background interface to return the result, why is it so slow?
Take a look at the four interfaces requested on the home page, namely **"Statistics", "Punch List", "Update Time", and "Today's Topic"**. Among them, the two interfaces of "statistics" and "check-in list" took up to 4 seconds.
These two interfaces have parameters date=2022-03-18, that is, the requested data today!
The background interface just converts the request into SQLa query, so it is suspected to be a database problem!
My database uses cloud MySQL from a cloud vendor.
Log in and take a look, ah, there is no index ! !
What is the total number of rows in this table?
There are 1.74 million rows of data! !
That is to say, each interface call needs to filter out all the check-in information whose date is today from the 1.74 million rows of data, and then perform statistics.
If there is no index, then you have to traverse, the time complexity is O ( N ) O(N)O ( N )！
When the website was first launched, there was relatively little data, so the access speed of the interface was quite fast. Now the data has millions of rows, so SQLthe execution time takes a few seconds.
Now that we know where the problem is, the optimization is actually very simple. Adding the index is OK, and it can be operated directly on the interface.
Here I index the three columns of "date", "username", and "whether you have checked in or not" . The indexing method is BTREE.
The interface code of the background of the website does not need any modification.
Let's refresh the webpage again to see the current interface access time-consuming:
summaryThe time-consuming of the "statistics" interface, which took the longest before, 4.04shas changed from 125ms, and the speed has increased by 32 times!
The time-consuming of another time-consuming "check-in list" interface has changed pagefrom to , and the speed has increased by 38 times!3.89s101ms
It can be seen that the index SQLimproves the execution speed greatly!
at last
After my above two optimizations, the speed of opening the website is now kept 2swithin ! The " best page opening time " has been reached .
For example, the screenshot below shows that 1.6sthe web page is loaded, and it was required before 15s, rounded up, and the speed of the website has increased by 10 times~~
To sum up, I mainly made two optimizations: uploading static resources CDNand indexing the back-end database, which respectively increased the loading speed of web static resources and the impact speed of background interfaces.
CDN, Caching, indexing, etc. are all basic concepts of computers. This website optimization is a simple understanding and application of these concepts.
There is an old saying in Meituan, which is called " practice the basic skills hard ".
Ten-thousand-foot-tall buildings rise from the ground, and hard work on basic skills is laying the foundation.
Finally, I would like to say that since my small website does not have a lot of visits, CDNthe cost of pay-as-you-go is very low. If your website traffic is relatively large, you still need to evaluate the cost.
Friends who want to join the LeetCode check-in supervision group can click http://www.ojeveryday.com/#/submit and fill in the homepage address of their personal LeetCode. I will pull you into the group.
Image Source:
Unsplash, Digital Ocean