Imitate Yui will be CSS and JS packaging, speed up the page speed

Source: Internet
Author: User

If you have the opportunity to use Firebug to look at your website's Web requests, you will find that the number of requests is beyond your imagination. To reduce this quantity, there are many technical solutions. such as Yui's combo, will be all the necessary JS mixed into a file download, modern Web server seems to have this technology, through the analysis of Web links, some files are merged. But this is what others realize, perhaps not your needs. The following code is a servlet on the platform of the Psalms, hoping to give you some reference for writing similar code.
1, the contract format. This is: Http://www.m3958.com/in the fragment of the source code of the Web page, you have to contract the format on the client and server side.
<script type= "Text/javascript" src= "/yuicombo?version=2.2&prefix=/codemirror/2.2/&lib/codemirror.js &mode/xml/xml.js&mode/javascript/javascript.js&mode/css/css.js&mode/htmlmixed/htmlmixed.js &lib/util/dialog.js&lib/util/searchcursor.js&lib/util/search.js "></script>

Parameters:
Version, if a combo request has a version parameter, the author should know when the content of the URL changes. This parameter is very useful, and we'll go on with that later.
Prefix,postfix This name thought, can greatly shorten the URL length.
Separator, if most files have the same prefix, and some do not follow this convention, can also be mixed together, that is, after this searator, no longer add a prefix.

So what's the use of version? Now that you know the correspondence between version and content changes, you can set a persistent cache for URL requests with version, such as 10. In addition, a MD5 value is generated from the URL that is sent to the browser as the ETag. When the browser requests, the server if found: There is version, there is ETag, then the largest possible is the user forced to refresh the browser, by comparing the etag and the URL of the MD5 value, if consistent, return 304.
? 1. Code [Java] Code
if (Finalqs.isempty ()) {//In the case of a mix request, if a part is missing, Yui will automatically pull away, this situation before able is also Yuicombo
Finalqs = Req.getrequesturi (). Replace ("/yuicombo", "/yui");
FNS = new String[]{finalqs};
}

The client cache is URL-specific, so the cache will not hit if the URL is different
If a URL has a version field, the author must be aware of the change in the content so that it can be permanently cached.
if ("CSS". Equals (type)) {
Type = "Text/css";
}else if ("JS". Equals (type)) {
Type = "Text/javascript";
}else{
;
}
if (type = = NULL | | type.isempty ()) type = "Text/javascript";
Res.setcontenttype (type + "; Charset=utf-8");
Res.setcharacterencoding ("UTF-8");
if (Version = null | | version.isempty ()) {
;
}else{
String ETag = Req.getheader ("If-none-match");
if (etag! = null && etag.equals (Shaservice.encrypt (FINALQS))) {
Res.setstatus (httpservletresponse.sc_not_modified);
Return;http://www.enterdesk.com/special/shouhui/?
} Hand-painted pictures
Res.setheader ("Cache-control", "max-age=" + periodcontants.year_in_seconds * 10);
Res.setheader ("Etag", Shaservice.encrypt (FINALQS));
}
Writer out = Res.getwriter ();


File WR = new file (Getservletcontext (). Getrealpath ("/"));
Boolean separatorreached = false;
for (String Fn:fns) {
if (Fn.startswith ("type=") | | | fn.startswith ("prefix=") | | fn.startswith ("postfix=") | | fn.startswith ("separator=") | | Fn.startswith ("version=")) {
Continue
}
if (fn.equals (separator)) {
Separatorreached = true;
Continue
}
File f = null;
if (!separatorreached) {
if (prefix! = null &&!prefix.isempty ()) {
fn = prefix + fn;
}
if (postfix! = null &&!postfix.isempty () &&!fn.endswith (postfix)) {
fn = fn + postfix;
}
}
f = new File (WR,FN);
if (f! = null && f.isfile () && f.exists ()) {
try {
FileInputStream is = new FileInputStream (f);
Out.write (Autils.read2string (IS, "utf-8"));
} catch (Exception e) {
E.printstacktrace ();
}
}
}
Out.flush ();
Out.close ();
?

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.