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 theme of the series.WebFront-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 actuallyBS, here's BSI didn't bring the architecture word, but I mean browser .and ServerThat is, the browser and server, and the purpose of website static technology is to make the user experience of the client as a browser better, but if we want to make the website run faster on the browser, on a faster basis to design more and better user experience features, So what we need to do is not only to focus on the browser itself, but to put all the browser-related factors together to consider, this is the site of static technology is the origin of, 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 time we're going to have to transform our thinking, because when the site's computing bottlenecks have reached this point, We're going to dig deeper into the computing power of the computer. This has little meaning for the final result, so we can only find solutions to the problem from the computing stakeholders. 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 problem, in fact, the essence of this problem is not the success of the calculation can be completed problem, But the question of whether 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 think that the calculation can be completed 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 the harsh users may not necessarily buy this account, so when there is 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 how can we break through this time?

Then we'll have to think about where the calculation itself is going to have an impact on speed, The calculation itself contains three aspects, the first is the compute resources for the calculation, and then the tool that does the operation is CPU , and finally the final result of the calculation , If the business is slow because the volume of data is too large and 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.

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)