1. Imitation station experience

General experience

<!-Use utf-8 transcoding->

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-The current page is Chinese->

<meta http-equiv="Content-Language" content="zh-cn" />

<!-Replace http with https->

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

<!-Jump to the designated website when switching to the mobile terminal->

<meta name="mobile-agent" content="format=xhtml;url=https://m.vmall.com/">

<!-QQ / Weibo login instructions->

<meta property = " qc: admins " content = " 153033120760567656375 " />   QQ login statement

 <meta property = " wb: webmaster " content = " e9da5e10879ed7c9 " /> Weibo login statement

<!-Request to reference multiple js files at a time-> (This is not a html specification, so not everyone can use it this way. Only servers that support this kind of writing can write like this.)

<script src="https://res10.vmallres.com/20200313/js/??/common/jsapi.js,/common/base/jquery-3.4.1.min.js,/common/base/jquery-migrate-1.4.1.min.js” namespace="ec"></script>

 

This is a unique feature


 of Taobao / Huawei's CDN. This method of writing is not a standard of HTML, so not everyone can use it this way. Only servers that support this method of writing can do this. 
The principle is this: 
when your http request arrives, the static resource server breaks down your request, merges all the js or css resources you need, and returns them to the browser. In this way, our browser only initiates an http request, and obtains resources of multiple js or css files. Save http network overhead. 
Because it is introduced file by file, it will cause multiple http requests. 
The disadvantage is 
that the number of parallel HTTP browsers is limited. 
If keep - alive 
is not supported . The rebuilding overhead of TCP link and TCP slow start will increase the delay. 
Even if keep - alive is supported . Additional HTTP request headers and response headers will also add additional data overhead. 

But Taobao adopts this method of merging js and css, which also has its shortcomings: the 

static resource server needs to dynamically merge static resources into an output stream, that is to say, the static resource server must have a gateway application to support this processing. Of course, this processing consumes additional hardware performance. 

The decrease in http cache capacity increases the pressure on the server to a certain extent. Imagine if we have four js files. A.js, B.js, C.js, D.js. If we only changed D.js. Under normal conditions. The browser can still continue to use the caches of A, B, and C, just update D.js. But because we have adopted a merger approach. Now we need to return to the merged results of the four files.

Principles, advantages and disadvantages

 

1. Huawei Mall

Lazy loading