Front-end performance optimization based on GruntJS and GruntJS Performance Optimization

Front-end performance optimization based on GruntJS and GruntJS Performance Optimization

This article mainly describes how to use GruntJS for simple automatic processing of front-end performance optimization. I have written a complete example on Github for reference. For more information about Yahoo's front-end optimization rules, see Best Practices for Speeding Up Your Web Site.

The front-end performance mainly includes image compression, JavaScript and CSS merging and compression, and adding hash to all static files based on their content, then, replace all static file names in CSS, HTML, and other files with the new file name added with hash. Add the cdn url to the path of all static content, and then upload all static files to qiniu CDN. Let's take a look at the function below.

Image Compression

Many images, especially png images, sometimes contain a large amount of meaningless filling to increase the image size. We can compress and optimize all images through contrib-imagemin to reduce the image size. According to our use experience, it can be compressed by about 5% to 10%.

Merge and compression of JS and CSS files <p merge JS and CSS can greatly reduce HTTP requests to optimize front-end performance. Meanwhile, CSS and JS files are static files that can be compressed to very small sizes. GruntJS officially provides contrib-concat, contrib-cssmin, contrib-uglify and other ins to do the corresponding tasks. We use the usemin plug-in because we want to replace the file name. It will automatically call the above plug-ins, so in our Gruntfile. js does not have the configuration information of these three plug-ins, but only calls these plug-ins in the task list. For details, see usemin. Static File Cache Processing

To increase the loading speed of the browser to the maximum extent, the best way is to allow the browser to cache all static files on the client, the cache here refers to the max-age of expire and cache-control, rather than Last-Modified, because the Last-Modified and If-Modified-Since will still send requests, the 304 status code is returned without updating, while max-age does not send requests, but uses the local cache directly. One of the problems with using the cache is that if the file is updated, if the cache is cleared, or if the user is asked to download the latest file. One way is to add a version number to a static file, such as style.css? V = 1.1. This method can achieve the purpose of clearing the cache, but it is relatively difficult to maintain. Compared with the version number, there is no way to identify whether the file is updated. Another method is to add the hashvalue to the file name, for example, style.abd1q2.css. This makes automatic processing easy. Here we use the filerev plug-in developed by yeoman, which can perform MD5 operations on the file content and then add the calculated hash to the file name, in this way, it is easy to judge whether the file is modified, and it can be perfectly combined with usemin.

Replacement of file names after Hash Processing

After compression and merging of CSS and JS and filerev processing of all static resources, the Referenced File Names of the original HTML, CSS, JS and other static resources need to be replaced with new file names. For example, CSS and JS references in HTML and CSS references to images. We used usemin developed by Yeoman for replacement. It works by searching for the static Resources in the files to be processed in the specified folder for the files processed by filerev. If yes, It is replaced with the corresponding files. For example, the reference code for CSS in the Code is as follows: <link type = "text/css" href = "style.css"> useminwill search for the style.abd1q2.css file under the specified folder, if this parameter is found, the CSS reference code is automatically replaced with <link type = "text/css" href = "style.abd1q2.css">. For details, see usemin.

CDN path replacement

The reference to all static resources during development is directed to the project's own domain. If you want to use CDN, You need to point the reference Domain of all static resources to the CDN domain. Here, the GruntJS plug-in cdn is used to globally replace all static resources.

Upload static resources to CDN

After completing the preceding steps, you can upload all static files to CDN. Qiniu officially provides the NodeJS SDK, But it seems difficult to use it. In this example, we use the NodeJS module qn developed by a third party, which is very simple. For details, see qn. My approach is to traverse and upload the directories where the image and CSS/JS are located, and add different prefixes to the image and CSS/JS respectively. Because qiniu does not provide Folder creation. For details, see the cdn. js file.

Usage
Conclusion: The website can be optimized, SEO, and basic knowledge on the server side can be found on the internal page.

Website performance optimization: the code is simple and convenient for crawlers to capture images without JS, frame, and flash.
Seo: keyword selection, originality, high-quality external links, persistence
Server: you have to run the doscommand to understand the operations on windows or linux systems.

Js Technology in web Front-end

There are many things js can do.

You can perform special effects and perform operations on page controls. If you use ajax, you can also perform operations on data.

If you can do a good job of special effects, you will not be able to do anything else.

For example, when the form is submitted, the input is judged, the cookie is set during login, and many operations such as hiding, displaying, and locating page operations are performed.