Thoughts on the evolution of large-scale website technology (19)--Website static processing-web front end optimization-Top (11)

Site static processing the series is about to end, and today I'm going to talk about the last major topic in the series Web front-end optimization. Before I begin to talk about this topic, I would like to ask you a question, whether the website static processing technology should belong to the Web service side of the technical category or should belong to the Web front-end of the technical category, to answer clearly this question we have to clarify the nature of the site application is exactly what? The nature of the site is actually BS, here BS I did not bring the structure of the word, but refers to the browser and server is the browser and servers, and the purpose of website static technology is to make the client as a browser user experience better, but if we want to make the site in the browser to run faster, On a faster basis to design more and better user experience features, then we need to do the work is not only to focus on the browser itself, but to the browser-related all the role factor together to consider, this is the site of static technology origin, So some friends think that the website static technology is actually a service-side technology more than the Web front-end technology, so that the site static technology is not part of the Web front-end category, I think this understanding is not correct, I would like to produce this misleading reason is that many people are narrow understanding of the Web front-end technology, I personally feel that the Web front end is a technology that is represented by JavaScript, CSS, and HTML, and that technology beyond this category should not be part of the Web front-end, but this understanding may have a negative effect on the front-end engineers who are pursuing it. This consequence is not flexible division of their own need to master the technical category, ultimately affecting the breakthrough of their own technical capabilities, whether it is the Web front-end or Web services should be a good site for the mission. BS itself is a whole, only a combination of the two can produce the site, the lack of any of them, and then where the site? BS in S is like butterfly benefit Butterfly's wings, although the butterfly seems to be just gently waving in the Amazon rainforest, but this wave can make the Pacific across the tens of millions of hurricane, so I have a new understanding of the Web front-end, we should not put the front-end is only limited to JavaScript , CSS and HTML these technologies, but should consider themselves as browser application development experts, all used as browser technology and means are the Web front-end engineers need to master the knowledge, like the current Nodejs appear, forcing front-end engineers have to do server development, do not feel that this is forced, It is a matter of course to think of it as a reverse of the web front.

Well, let's go back to the Web front-end optimization topic. The popularity of Web front-end optimization technology is also due to the internet's two major Yahoo and Google's contribution, they have accumulated and summed up over the years, these web front-end optimization of the experience of the free public to the world, thus promoting the development of the Web front-end, these technologies are not a secret, I found an article on the Internet that explains these techniques, and the article is "best practices and tools for Web front end optimization".

Web front-end optimization technology and web site static technology use is consistent, is to make the site faster, better user experience, I personally think that the website static technology is actually a web front-end optimization part, but the website static technology is through the service of large-scale technical transformation to achieve the Web front-end technology optimization, The purpose of the service-side transformation is to make the background technology architecture of the entire website more relevant to the requirements of the Web front-end, so as to better achieve the Web front-end optimization. The reason why I can judge this site static technology, in fact, the website static technology and web front-end optimization technology must have some strong relevance, I personally think that the point is that they use behind the theoretical basis is consistent. So what exactly is the theoretical basis between them?

Excellent website should be user experience good site, when people use this site feel cool, praise constantly, then this site is a user experience excellent site, but the user experience good site is the site layout is beautiful, the picture is dazzling, humanized design in place so simple? These elements are the feelings of users of the site, but for the site design and developers, the better site must solve a fundamental problem, that is, the speed of website loading, if the site loading speed is not good, you even the site design is beautiful, estimates will engage in nobody, speaking here, is not a serious friend don't believe my conclusion? I'll give you a look at the picture in the previous article, as shown in:

?

In fact, when we develop the site if only consider how to make the site beautiful and neglect the performance of the site, we will find that the performance of beautiful websites and sites is actually the relationship between the spear and shield, such as beautiful pictures often need high-quality picture format, and high-quality image format means that the picture will become very large, Then in the picture through the network load time will need to spend more time, so we in the design and development of excellent site, beautiful and efficient is the need for us to carefully weigh, serious thinking, and ultimately to find a best way to achieve the balance of both, while more fully play the potential value of both sides. And the intuitive user experience good this is actually more a design problem, and solve the user Experience Good foundation: speed problem, this is a technical problem.

To solve the speed and efficiency of the site, then we have to think about the site of the carrier computer in the end what factors will affect the speed and efficiency of the site. In fact, the nature of the computer is very simple, that is, computing and storage, computing is mainly CPU to complete, and the computer used to store more media, they are mainly memory, hard disk, if it is a website application there is a very critical storage media need to consider that is the network. So what is the efficiency of the computers used to compute and store these media? This question I have elaborated in a previous article, this article is "on how to improve Web server concurrency efficiency of asynchronous programming technology"

There are so many other things in this article that I'll take the key part in this article and read it as follows:

The processing of a network request is done by two different types of operations, which are CPU compute operations and IO operations, and if we judge both operations in terms of processing efficiency, the efficiency of the CPU is the speed of light, and the IO operation is not the same. The IO operation in the computer is the operation of the storage data medium, the computer has the following several media can store the data, respectively: The CPU's first level cache, the level two cache, the memory, the hard disk and the network, the first level caches and reads the data the ability to close to the speed of light, it is 5 times times to 6 times times faster than the two But whether it is a level cache or a level two cache, they store data too little, do not do anything big, the following is the memory, to the efficiency of the first-level cache to do the reference, one cache faster than the memory speed of more than 100 times, to the hard disk storage and read data efficiency is more slow, first-class cache faster than the 1000多万倍 To the network on the slow is even more outrageous, first-level cache than the network faster than 100 million times, it can be seen that a request processing efficiency bottlenecks are caused by IO.

??

This shows that the speed and efficiency of the site seems to be caused by storage-as-io. But we can not because of the feeling that the root of the problem is the storage, and ignore the CPU thinking, so I first talk about CPU and website performance relationship. CPU is the computer used to do computing equipment, now the computer can see movies, can listen to songs, can chat with friends, but also for work, these amazing features actually to the CPU here is also through the basic mathematical operations such as subtraction, said this is really difficult to imagine, Reading when learning mathematics always feel so dull and boring, did not expect such a powerful human artifact is actually through the mathematical calculation, it is no wonder that foreign scientists say that the universe is through mathematical operations, which is justified. However, the mathematical operations behind the site has its own characteristics, although the CPU computing power is very strong, but in the actual scenario a lot of business computing is actually very time consuming, if the site some request response to the operation is to consume too much time, then this time the CPU will become the bottleneck of site performance, Website application has an important feature, this feature has a proper noun description that is the real-time nature of the site, according to the real-time characteristics of the site, then asked our site each request contains the calculation is simple and fast, simple and fast calculation also let each request contains business operations to be more simple, This is why many people will say that the Internet Web site and enterprise Web applications compared to the Internet business logic is relatively simple truth, but with the scale of the site, business model more and more rich, this time the site in some business links inevitably become complex, If these complex businesses need real-time response to the user, then the CPU can not quickly complete the business computing is the source of the site's efficiency problem, such as I said in the storage series of the huge amount of data calculation operations, is one such scenario, then how do we do this time?

When we meet this problem, we first need to clarify a problem, computing bottlenecks, then the most direct means is to increase the computing power of computers, such as the use of faster computing CPU, But the faster the CPU in the face of fast-growing business, the increased efficiency is very limited, so in the CPU this piece of multicore technology, we can divide a computational task into Ownchoice sub-operations, these sub-operations are calculated on different CPUs, and finally the results are summed up, But this approach and the faster the CPU, the face of fast-growing business will soon reach performance bottlenecks, and finally we found that our business computing task is actually beyond the ability of a single computer, if distributed technology appears, we are no longer on the CPU to make a fuss, Instead of using multiple computers for joint computing, the distributed computing system needs to be interconnected, and the network is the largest short board in computing and storage, and the scale of computing resources used by the Internet now reaches an unimaginable level. We found that to solve the problem of the rapid response of the website by extending the computing power of the computer is basically an impossible task, so what should we do at this time?

This time we have to transform ideas, because when the site of the computational bottleneck problem has come to this point, we go deeper into the computing power of the computer that the final result of the impact has little significance, So we can only find the solution of the problem from the relevant side of the calculation. What is the relevant party? Careful analysis of the calculation of the relevant parties is too much, but one of the most fundamental stakeholders is the actual business needs of users, users may think their business needs are very clear, such as e-commerce users want to query their own transaction data, but this business problem to the site developers and business personnel, Faced with so many users of the transaction query that is a super complex computing problem, if the site's business and developers will be based on their own characteristics and problems of the system itself, to further consider the nature of user business computing problems, talk about the nature of business computing this problem if the elaboration is very complex, Because the reality of the business scene is too much too complex, but put to the site real-time computing this angle, in fact, there is a very simple solution, we review the previous discussion of the computational bottleneck, in fact, the essence of this problem is not the success of the calculation of the problem, but the calculation can be completed in a timely manner, If the user's request calculation is really not able to complete quickly, then we do not let the user feel that the calculation can be done very quickly, this practice also has a proper noun that is asynchronous computation, but if we are difficult to quickly complete the calculation is so to deal with, although the user feel that the site has been very frank to tell their ability is limited AH , but harsh users may not necessarily buy this account, so when the same type of website using new technology to solve the problem of fast real-time computing, if our site is still standing, then the consequences will be very serious, then this time we how to break through?

Then we have to further think about where the calculation itself has been affected by the speed of the problem, the calculation itself contains three aspects, the first is to calculate the computational resources, and then the calculation of the tool is the CPU, and finally the final result of the calculation , if the business is slow because the amount of data is too large, the CPU is difficult to complete quickly, then we have some means to solve this problem, we can do a large number of data classification, such as the storage of the series of historical transaction data and the classification of the transaction data of the day, Day data because of the limited amount of data can be quickly calculated under certain conditions, in the face of historical data, if our calculation results are very simple and in a certain time range will not change, then we think so, let these results in advance calculation, And then store the results in a more efficient storage device such as memory, when the user requests the operation of this business computing, we just need to directly read the results of the calculation in the cache, so that the calculation is avoided, and the results are stored in efficient cache, the user gets the response speed is much faster, This is in fact the site of the static technology of ESI technology behind the profound meaning.

Of course, when we're going to solve the site performance problem, it's not likely to think about it alone from the calculation or storage of a dimension, usually by thinking about the two sides together, as I mentioned earlier on the efficiency of computing and storage media, We find that storage is the most likely to affect the efficiency of the site pain point, the actual situation is the case, when the site is a bottleneck problem, more efficiency is caused by the storage, and the complex calculation process also needs to store the participation in order to complete the normal, For example, intermediate results in the calculation process when the CPU cache size is exceeded we have to put the intermediate results in memory, when the memory is not enough, we have to put on the hard disk, so solve the computational efficiency problem is also affected by the storage performance. If we follow the barrel theory to understand the problem, we find that whether it is a simple storage problem or a mix of compute and storage, the final short board is the least efficient, and the least efficient in computing and storage is the network, but some sloppy friends may say that broadband is fast now, I download a few g of the movie on the internet for a few 10 seconds, and sometimes even faster than my hard copy, like you said the network is the biggest short board is actually inaccurate, the friend's idea does his truth, but not everyone uses the network is you so fast, and now the mobile internet has been and, Mobile internet speed than ordinary broadband is much worse, and you on the mobile device use of network traffic, the higher the cost, if you think I said these problems are not what, the network is also related to the geographical distance, you broadband fast, you want to visit the United States of the Ocean site (this site in China does not have any cache processing), Access speed is certainly not fast, and the Internet connection path itself is very complex, for example, you feel that you are visiting a local Shanghai site, but this site may be a lot of important servers are placed in Beijing, so complex network environment, so many uncontrolled factors will affect the transmission efficiency of the network, How can the network talk about its performance than the hard disk strong?

So we can find that Google and Yahoo summed up the Web front-end optimization skills and I am talking about the site of the static technology is mostly around how to solve the network transmission efficiency, because it is the largest short board of the whole cask, we only first solve the short board, then to solve other factors of efficiency problems, To play its part. The explanation here can also be answered a long time ago a netizen asked me, why I talk about the site optimization rarely explain how to write efficient code, and are from some and code-independent angle to elaborate, in fact, you want to improve the performance of the site through code optimization, The first thing you need to do is to deal with the more important and more critical factors such as network communication problems, otherwise your code optimization will be better, the effect on the final effect is limited.

It seems that this article is not finished today, about storage and web front-end optimization of the content I will be further discussed in the next article. Finally, I wish you good night, live and work happily.

Thoughts on the evolution of large-scale website technology (19)--Website static processing-web front end optimization-Top (11)