Thoughts on the evolution of large-scale website technology (13)--Website static processing-CSI (5)

Finished Ssi,esi, the following is about to talk about CSI, CSI is the browser-side of the dynamic integration program, when I published a friend asked me, CSI technology is not just through Ajax to load data ah, I was the answer just said you understand a bit one-sided, then exactly what is CSI technology? This is actually to be defined in terms of the integration of dynamic and static resources.

CSI technology is actually in the page after static separation, the page load is divided into two steps to complete, the first step is to load static resources, static resources after loading the second step to load dynamic resources. However, this definition is not comprehensive, the whole point is that we want to emphasize the purpose of separation of motion, we put the dynamic and static resources in the page to make a valid cache, the static resources may be on a static web container, it may be on the CDN, It is also possible that in the browser, regardless of how the static resources are cached, our goal is to allow static resources to load faster, if we do not allow static resources to become efficient, even if we use the form of CSI to design the page, actually did not play the advantages of CSI, Instead, they inadvertently introduce the shortcomings of CSI. So what's the downside of CSI? Specific as follows:

CSI disadvantage one: CSI is not conducive to page SEO that search engine optimization. Search engine web crawler is generally based on the URL to access the page, get the content of the page to remove useless information such as: CSS style, JS script, and then analyze the rest of the text content, so if part of the page needs to be loaded asynchronously, Then this load control must be done by JavaScript code, so the web crawler crawling down the pages of the asynchronous loading operation is impossible to execute (I heard some advanced crawler can do asynchronous operation, crawling asynchronous content, even if there is this technology, Most of the mainstream crawler will ignore the JavaScript code will also ignore the asynchronous loading of the content, which will cause the Crawler crawl page Some information is lost, so that CSI is not very friendly SEO. However, this shortcoming we carefully analyzed, may not be so serious, before we talked about a lot of static separation strategy, if we do a good move separation strategy, then the dynamic resources are basically can not be cached content, often change content, these changes in the content will not need to be crawled to the web crawler, Even if it is really crawled, the search engine has a query results point to this page, we open this page results are also found in the page is not searched keywords, this situation I believe many friends in the use of search engines will come across. But I think if the developers don't use CSI correctly, they probably won't be able to handle it very well, so it's easy to be introduced.

CSI The disadvantage of two: we spend so much time and effort to make our site static, the purpose is to make the page load faster, we simply put the page load into two steps, so it is really fast? This is not necessarily ah, in fact, static and dynamic separation of the practice and I mentioned in the last series of the database read and write separation has a similar, the database read and write separation we are by splitting the original table of the relationship between reading and writing, so as to achieve the solution to read the bottleneck problem, and the static and dynamic separation of the Web page is because the So we're going to split the static resources. So when we have a dynamic separation of resources, but there is no optimization of static resources, this is a look at the lack of a speed to speed up the page loading operation, then really can make the page load fast, it is really hard to say, and asynchronous loading requires the execution of JavaScript code to line, But static resource loading can easily cause JavaScript scripts to be blocked, and if the blocked script is just the part of the asynchronous load, the result will be slower than the previous load.

Thus, the SSI and ESI technologies that I mentioned earlier are necessary for us to perform CSI technology on the browser side, and SSI and ESI are doing a more efficient job of loading static resources that can be separated by dynamic, which makes the first step of the CSI operation Efficient, The first step is handled well we can achieve the goal of boosting the overall page load efficiency by simply controlling the impact of script blocking on the asynchronous loading on the page. In addition, I think that the CSI has a significant impact on SEO is a pseudo-proposition, if the use of CSI caused by poor SEO results, then it is definitely our CSI program design is not in place.

Some people think that CSI will have a disadvantage, but I do not think this is a disadvantage, this is actually a design problem, good and bad is based on the individual's operating habits determined. What is the disadvantage that other people think? It is the use of CSI technology, although the page is loaded quickly, but the dynamic content of the part may show a loading prompt, then this leads to the page user-friendliness is reduced, in fact, this synchronous and asynchronous load mashup operation is too common, almost all large portal sites, E-commerce website There are a lot of countless sites are using synchronous and asynchronous mashup loading method, if these sites do not do, I believe these sites such as home page loading will be slow to make people vomit blood, because they are a lot of web content is too much, the pictures are a little bursting, So they have to use synchronous and asynchronous mashup loading methods, and even many static resource examples, flash these things will also take the asynchronous loading mode. Here, it is estimated that some people still feel unconvinced, he just does not like the page load when there is a loading prompt, but the Web page is also very need to bring CSI benefits, then how can we solve this problem? This problem is good to solve, the first willing to use CSI technology also shows that users are still willing to use asynchronous loading technology, do not like the prompt is being loaded, which means that users want to do synchronous loading operation without doping asynchronous operation, although the Ajax technology is now a big line, But Ajax technology has a synchronous loading is no way to solve, that is, we enter the Web site URL request page in the browser address bar, so in the face of the above requirements we just ensure that this synchronization operation is only a pure synchronous operation and not doped asynchronous loading can, this scheme is still very good implementation, I'm not going to be too tired here.

We will cache static resources after the separation, the previous article said a lot of is in the service side of the static resource cache, now that the CSI has reached the browser side, then we have to talk about the browser cache operation. The caching of pages is the expires and Cache-control of HTTP, and we'll start with the following:

<http-equiv= "Pragma"  content= "No-cache">  <http-equiv= "Cache-control"  content= "No-cache"  ><http-equiv= "Expires"  content= "0"  >

This is my current Java Web project, JSP and VM files will use the meta configuration, it is the purpose of the page is not to be cached by the browser, but if the use of CSI technology, and static and dynamic separation is done well, in the page head actually we can no longer write this, We can let the page in a reasonable time frame by the browser cache, if the page does the cache operation, then we will visit the page later, the page load efficiency becomes higher.

Here is another problem, in the Yahoo optimization site recommendations, in order to take full advantage of the characteristics of the Web page parallel loading, we tend to put the picture, external JS and CSS files placed in a separate static web container or CDN, then these files are often can be cached by the browser, How do we set up to let the browser know to cache them? Here we take Apache as an example, in order to let the static resources are cached by the browser, Apache needs to use the Mod_expires module, and then add the following configuration in the Apache configuration file:

<"\. ( Gif|jpg|png|js|css ">expiresdefault" Access plus years "</filesmatch  >

　　After the browser accesses the static resource on Apache, the browser caches the image and the JS and CSS files on the server in the browser.

Let's look at how the cached static resources are being used, as shown in:

When the HTTP response code is 304, then the browser reads the resource from the cache, and some friends may wonder why the cached resource is sending an HTTP request? Understand this we need to understand the mechanism of the cache, the meaning of the cache is to temporarily save something, since it is temporarily saved, then there should be a saved period of validity, we define the way the cache is done through HTTP, then the reason to check whether the cache expiration should also be HTTP to determine, So every time we use the cache, we have to send a request to the server, the server will check whether the resource is expired, if not expired, the server returned a 304 response code, 304 of the return response is not HTTP style, so the return data of this HTTP request is very small, Therefore, this HTTP efficiency is still very high, if the server found that the resource expires, then the server will return the new resources to the browser, in fact, this detection resource is expired request has a proper noun called conditional Get request . As for how the service side is to complete the inspection operation, this series in the Web front-end optimization will be elaborated in detail, here is not deep. See here is estimated to have friends and questions, why is the cache expiration can not be done on the browser side? This is mainly the browser to do this check is not allowed, because the user's computer clock is not necessarily accurate, or user computer clock and server inconsistencies, if coupled with the time zone is more troublesome, so cache failure is best done on the server, so that the validity of the expiration of the cache can be guaranteed. The advent of HTML5, the ability of the browser cache is greatly enhanced, but the use of HTML5 technology cache I have not been in-depth study, so here also do not tell, interested friends can study under their own.

OK, the CSI topic is finished, talk about CSI technology and Browser We can start this series another important content separation, this will be my next topic, I have in my blog many times to talk about the front and back separation, and then again, this is my long time to do the front and back end of the large summary of the separation.

In the end, I wish you a Happy New year, a joyous year and a happy heart.

Thoughts on the evolution of large-scale website technology (13)--Website static processing-CSI (5)