The original article is reprinted from liu Yue’s Technology blog v3u.cn/a_id_86

The front end is huge and complex, including HTML, CSS, Javascript, Image, Video and so on all kinds of resources. Front-end optimization is complex and can be done in different ways for different resources. So, what is the purpose of front-end optimization?

From a user perspective, optimizations make pages load faster, more responsive to user actions, and provide a more user-friendly experience.

From a service provider’s point of view, optimization can reduce the number of page requests, or reduce the bandwidth consumed by requests, which can save considerable resources.

In short, proper optimization can not only improve the user experience of the site and can save considerable resource utilization, is to let users use cool, and save money.

1. Use CDN acceleration. Static resources on the website, namely CSS and JS, are all distributed using CDN, as are pictures. To be specific, CDN is to adopt more cache servers (CDN edge nodes), which are placed in areas or networks with relatively concentrated user access. When the user visits the website, the global load technology is used to direct the user’s access to the nearest cache server, and the cache server responds to the user request

At present, qiniu.com, a reliable CDN service provider in China, is recommended by qiniu.com personally. Their CDN service has 10G free every month, and the configuration is also very simple. You can apply directly

2. Use Gzip to compress web pages

Gzip compression can make your pages smaller and faster. Using the Nginx server, you can easily enable Gzip compression

Modify the nginx vim configuration file/etc/nginx/conf. D/default. Conf

server {
     listen   80;
     server_name  localhost;

     access_log /root/js_front_access.log;
     error_log /root/js_front_error.log;


     client_max_body_size 75M;


     location / {

        root /root/public;
        index index.html;
        try_files $uri $uri/ /index.html;

    }

   Enable gzip compression
   location ~ .*.(jpg|gif|png|bmp)$ {
                gzip on;
                gzip_http_version 1.1;
                gzip_comp_level 3;
                gzip_types text/plain application/json application/x-javascript application/css application/xml application/xml+rss text/javascript application/x-httpd-php image/jpeg image/gif image/png image/x-ms-bmp;
                }



    error_log    /root/js_front/error.log    error;

}
Copy the code

Restart the nginx

systemctl restart nginx.service

How to determine whether the function is successfully enabled? You can use webmaster tools for detection tool.chinaz.com/Gzips

The compression ratio is amazing

Reduce the number of HTTP requests and, if possible, combine external scripts and styles into one. In addition, CSS, Javascript, Image can be compressed by using the corresponding tools, which can save a lot of space. How to compress and merge external scripts and styles

4 Avoid empty SRC and href When the href attribute of the link tag is empty and the SRC attribute of the script tag is empty, the browser will render the current page URL as their attribute value, thus loading the page content as their value. So avoid this kind of oversight.

5 Put CSS at the top of the page when the resources are loaded from the Internet in order, so CSS at the top of the page can give priority to rendering the page, let the user feel the page load quickly.

Loading JS will block subsequent resources, and you have to wait for JS to finish loading before loading subsequent files, so you put JS at the bottom of the page to load last.

Cacheable AJAX

Asynchronous requests also cause users to wait, so when using Ajax requests, actively tell the browser to cache the content if the request is cached. In the following code snippet, cache:true is an explicit request to use the cache if the current request has one

$.ajax(
{
url : 'url',
      dataType : "json",
      cache: true,
      success : function(son, status){
}
Copy the code

Reduce scope-chain lookups, which is a particular concern in loops. If you need to access a variable outside the scope of the loop, cache that variable with a local variable before the loop is iterated, and then rewrite that variable after the loop is iterated. This is especially important for global variables, which are at the top of the scope chain and have the most look-up times.

Var globalVar = 1;function myCallback(info){    
for( var i = 100000; i--;) {// Every access to globalVar needs to look up to the top of the scope chain, in this case 100000 times globalVar += I; Var globalVar = 1; var globalVar = 1;functionMyCallback (info){// Local variables cache global variables varlocalVar = globalVar;    
for( var i = 100000; i--;) {// Accessing local variables is the fastestlocalVar += i; }}Copy the code

9 generate pure static pages, that is, the dynamic content generated in advance, so in the front end to avoid the request for back-end data, speed up the page access

After some optimization of the above, we can use the Google page performance rating tool PageSpeedInsights perform site evaluation, developers.google.com/speed/pages…

As can be seen, after some page performance optimization, access speed has been improved, bandwidth saving a lot, front-end optimization has a long way to go

The original article is reprinted from liu Yue’s Technology blog v3u.cn/a_id_86