Simple front-end optimization of the actual combat

Intermediary transaction http://www.aliyun.com/zixun/aggregation/6858.html ">seo diagnose Taobao guest cloud host technology Hall

The recent Joseph NET project needs to carry on the front-end optimization, our front-end engineer naturally thought of several yslow in the optimization front end the golden rule, hereby shares some experience to share, the superficial expression, the right when exchanges use, laughed laughed!

To optimize the front end, naturally from two places, one is to reduce the number of requests connected, the second is the size of the compressed file size.

The current project uses open source minify for merging, this is a fairly pro PHP applet, with an elegant way to merge the vast majority of reusable JS and CSS files, and can open the text compression output function, very powerful gadgets, the use of configuration is also quite easy. If the five or six JS files used in the project are merged, the request time can basically reduce the 15%~30%, or a considerable amount.

The picture request is also a very headache thing, the browser has the biggest parallel downloading limit (of course you can increase by hand, but the average user will never do), this time need to use another independent picture domain name. Put a lot of pictures on another server, binding a two-level domain name, then cited, so that can accommodate more concurrent downloads, but also a certain speed effect.

Interestingly, the project used a widely used jquery library, the version is 1.4.4, basically meet the requirements of the day, it seems the mini version of the size is more than 70 KB, while opening the output of gzip compression, can be compressed to about 28KB, But for the ordinary virtual host used in our project, IDC claims that the high-speed dual-line is nonsense, in many places, a jquery library also needs to consume 250~450ms time. So I use the Google Company provided by the JS Library CDN Accelerated Service, the truth is very simple, is directly using Google provides a JS address reference library, the use of Google's huge CDN network to accelerate, why not?

Example Address: www.yuesir.com

(Editor Note: You can use Firefox Firebug plug-ins to see the actual acceleration effect, Google JS hosting effect is much better than our server, normal speed only need to load 150~250ms)

Of course, it should be noted that Google's domain name in mainland China is often blocked or parsing errors, in order to make our services more stable, here can be a jquery object to judge, if Google's jquery files can be normal loading is nothing, If you can't load then swap with another library, here I use the Microsoft JS Reference, of course, it should be the end of their own server JS address also placed up.

In this way, the high speed and stability of the service is guaranteed.

Of course, gzip must be opened, very helpful ah!

In other words, because of the use of Minify merger and automatic streamlining, I have no longer eliminate the JS code and CSS code comments, so not only to facilitate the work, but also the maintainability of the project has a great help.

On the assumption of picture server things, I still hold an open mind, try to use third-party resources, and focus on the core business logic. So in the end I did not use their own set up the scheme, but use the domestic relatively excellent figure bed service provider "and shoot" the VIP photo gallery housekeeper.

The main fancy is that it supports FTP to automatically export backups, custom domain bindings, and relatively stable high-speed network bandwidth resources.

For Third-party services, or have an open attitude, or put a lot of energy on the irrelevant things, is not worth it.

Say wait until the service is stable, still have to through FTP back up all the pictures, then renamed, and Directory Archive management, facilitate the project independent and stable upgrade.

Of course, the optimization on the front end is endless, the project is still used some optimization methods, the next example:

The use of jquery library Plug-ins Lazyload, where the customer prudential products, such as the first time in use (say last night found a serious problem at the front end, the heart is very happy), Taobao also independently wrote a similar function library. The function of this plugin is to make the picture file below the horizon unreadable, and when the scroll bar scrolls to the picture, it begins to read.

This method of loading on demand is very effective and has been used in large quantities now. Just one problem is that the picture needs to have a default height (he works by calculating the height of the picture), or there will be a jitter, a bug that can't be loaded on demand.

Of course, the official lazyload is only a camouflage, if you analyze the HTTP request to know that the original lazyload is not really on-demand loading, but the camouflage, all the pictures are still issued as usual request, but the user temporarily can not see Bale, then with a fadein rendering.

We only need to make a small change on it, for details, you can search for "lazyload improvement" can understand the improvement Program, the real implementation on-demand loading.

Example Address: http://www.yuesir.com/goods-72.html

(Editor's note: As long as you study the HTTP request of this page, you know that this is the true implementation of the on-demand request, to enhance the user experience is a great help, we use it)

Author: Yuesir Front end