Web Front End Performance tuning

The last 2 months have been doing mobile phone and TV development, the development process encountered a variety of pits. Get fast New Year's day, finally put on the line. 2 months to dry down full of hard work, not so busy with their own preparation of the front-end performance tuning summary below, in order to facilitate the use of their own once again to be handy. Referring to the high-performance website Construction Guide-the essence of front-end engineer skills, this paper mainly summarizes the performance tuning method of front end.

First optimization: Reduce HTTP requests

The thought of tuning a lot of people would think of reducing the HTTP request, but probably a lot of people will not know the specific operation, I did not know at the beginning. The project just uses FIS to find FIS that can package scripts and style sheets. perfect! The FIS package is very simple, as long as it is set in Fis-conf.js:

Fis.config.merge ({    pack: {        ' pkg/requirepkg.js ': ['/develop_workspace/appframe/kernel/jquery-1.8.3.js '), "             /develop_workspace/appframe/kernel/require.js",             "/develop_workspace/appframe/kernel/require-conf.js" ],       '/pkg/aio.css ': ' **.css '    }}); Fis.config.set (' Modules.postpackager ', ' sfis-postpackager-simple ');// Plug-ins are packaged merge plugins for pure front-end applications

js merge before

After JS merge

Before CSS Merge

After merging CSS

From time you can see that the merging effect is still very obvious. There are some ways to merge pictures, the project using small icons relatively few, there is no specific to operate. On the other hand, reading the code to see if your business logic has a multi-tone interface, and so on, can also reduce HTTP requests.

second optimization: adding Expires Head

nginx.conf configuration file configuration in Nginx expires

location~ \. (Gif|jpg|jpeg|png|bmp|ico) $ {           expires 30d;}

Add Expires Header

Third Optimization: Compression components

FIS with compression command, very useful, in the FIS release plus-O can be, compression ratio of 50% to 70%. You can't imagine how simple compression is.

Before compression

After compression

Gzip

Browser and server support, you can use gzip compression to reduce the size of the response, the browser can use the Accept-enncoding header to declare that it supports compression, the server uses the Content-encoding header to confirm that the response has been compressed. I am using the Nginx server, which is set up as follows:

Gzip on;//Open gzip    gzip_min_length  1k;//more than 1K compression    gzip_buffers  4 16k;//Setting the system gets several units of cache used to store gzip compressed result data streams. 4 16k represents a 16k unit, with the original data size of 4 times times 16k of memory.    gzip_http_version 1.0;//http version    gzip_comp_level 9;//compression level 1-10, the larger the number, the better the compression    gzip_types    application/ Javascript   
Text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;//compression type    GZIP_ Vary on;//and HTTP headers have a relationship, add a vary header, to the proxy server, some browsers support compression, and some do not support, so avoid wasting does not support compression, so according to the client's HTTP header to determine whether the need to compress

Gzip

Keep-alive

HTTP is built on top of TCP, and in early HTTP implementations, each HTTP request opens a socket connection, which is inefficient. The introduction of persistent connections to address this inefficient problem allows the browser to make multiple requests on a single connection, and the browser and server use the connection header to indicate support for keep-alive, which looks the same on the server's response connection header.

Keepalive_timeout 65;

Keep-alive

Fourth optimization: Put the CSS on top, put JS on the bottom

Put CSS on top maybe some people will feel the effect of the DOM tree loading will cause the page to load slowly. Actually putting CSS stylesheets in the top-head of a document can make the page load faster. Putting the style sheet on the head causes the page to appear gradually, and the stylesheet and Dom are loaded together to avoid page redraw. Put the script at the bottom, the page will gradually appear, improve the degree of parallelism of the download.

Other

Using a content publishing network is actually a CDN.

Avoid CSS expressions.

Put JS and CSS on the outside.

..............

None of the above three have been tested or practiced. are seen in the book, after the first 4 optimizations, the page loading speed has reached my expectations, and then prepare the code to review the rectification code. The front performance tuning has always felt the optimization of Java code, optimized SQL statements, but now found that the front-end can not be ignored. The above is my path of optimization, there must be shortcomings, welcomed the criticism pointed out. Thank you

Web Front End Performance tuning