The Web page cache affects the number of HTTP requests and the requested file size, which is the most important factor affecting the front-end experience. In the project development, there will always be some JS or CSS files are frequently modified, such as Yahoo's Jake in the JS tag reference files, there will always be some JS or CSS will never be modified, such as Yui component JS file, so in the performance optimization when the two should be separated, That is, frequently modified files reduce cache constraints, and relatively fixed files are forced to cache.
From the HTTP protocol and the working mechanism of the browser, there will always be some uncertainties in the actual occurrence of the cache, such as if the browser settings all files are not cached, server-side any cache optimization does not work, so you should use multiple means to complete a reasonable cache design, So that the site can be updated at any time to ensure a saturated cache, to ensure a good user experience. Yui in the framework of the seed file will always occupy an HTTP request, that is, the browser parsing the script label, to deal with this SRC point to the JS file usually with Cache-control:no-cache, or Cache-control: Max-age=0, in this case the Cache-control returned by the server will naturally not work. For example, the Tbra seed file of the Taobao home page will bring a Cache-control tag anyway, as shown in figure:
So this seed will always occupy an HTTP request, and by the Yui dynamic loading of JS files and CSS files are forced to cache, the HTTP request initiated through JS can be defined HTTP header field, but often need CDN server support, such as cn.yimg.com, The Taobao CDN and the old beauty yimg all force the resource files to be cached for 10 years. For example, this is the old beauty of the yimg expiration time, the Taobao CND is also the case above.
The real effect of the cache is in the dynamic loading JS process, that is, only Yui dynamic get a JavaScript file when the request will be added to the Cache-control field, so the browser will intercept this request, Taking a file from the local cache based on the parameters of the Cache-control field will not actually occupy an HTTP request, which can be a decisive factor in the performance improvement of the page. This is why the Yui team consistently recommended the use of loader dynamic loading module reasons. It is precisely because of this, the use of handwritten script tags to take the form of JS file is very expensive performance. such as a test page, empty the cache after all 12 JS requests are complete 200http request:
When you press F5 to refresh, it becomes:
So the actual number of requests reduced to 2, this is Yui dynamic loading JS file advantage, and in the Taobao home no matter how to press F5 refresh, the number of requests will not be reduced.
If the number of requests cannot be lowered, you can reduce the size of the request itself, commonly used is the last modification time and etag two fields, ETag more commonly used and more accurate, etag can determine whether the file has been modified, if modified to return a 200 HTTP response, if not then return 304, Tells the browser to fetch the cached file. The use of ETag in fact with the simplest digest algorithm can, such as MD5, anyway, just a complete judgment. Yahoo's yimg server can be more accurate to determine whether the file is modified, so even if the request is a JS file by handwriting script tags launched, will return 304, you can see the Yahoo home F5 refresh, yimg domain JS request is all 304, half of the content is taken from the cache:
And Taobao CDN is not so accurate, with F5 brush many times Taobao home page, found that stubborn tbra.js is always 200, as shown:
Here's the cn.yimg.com JS obediently returned 304, and Tbra is always 200, this will cause loan waste, fortunately file only 25k, the experience is not very small, may be Taobao CDN did not do the optimization etag, I see every etag is not the same, supposedly that the document does not modify the ETag should This is the same, is the reason to add time stamps, but also need to study.
