Front-end optimization scheme

1 optimizing CSS

1.1 Avoid USING CSS expressions

Using CSS expressions to dynamically set CSS properties is a powerful and dangerous way to do so. Supported since IE5, but not recommended since IE8. For example, you can use CSS expressions to set the background color to alternate by the hour

• Minimize the use of label selectors
• Use less ID selectors and more style selectors (versatility)
• Reduce the selector prefix, for example. Headerbox.nav. left a{} the selector is queried from right to left
• Avoid USING CSS expressions

background-color: expression((new Date()).getHours() % 2? "#B8D4FF":"#F08A00");Copy the code

1.3 Disabling @import

One of the best practices mentioned earlier is that CSS should be at the top for step-by-step rendering. Using @import in IE has the same effect as using at the bottom, so it’s best not to use it.

1.6 compressed CSS

• Use an online site for compression
• Use htML-minifier to compress the CSS in HTML
• Clean-css is used to compress the CSS
• Webpack, gulP packaging tool

2. Image Optimization

2.2 Optimize CSS Sprite

The use of CSS Sprit (CSS sprit/ CSS picture wizard) technology, some of the small picture merged in a large picture above, when using, through Beijing picture positioning, positioning to a specific small picture

• Horizontal layouts in Sprite images are generally smaller than vertical final files
• Combining similar colors in Sprite images can keep the color count low, ideally in PNG8 format below 256 colors
• Be “mobile-friendly” and don’t leave too much space in Sprite images. While it does not significantly affect the size of the image file, doing so saves the memory consumed by the user agent when unpacking the image into a pixel map. A 100×100 image is 10,000 pixels, and a 1000×1000 image is a million pixels.

.pubBg{ background:url('.. /img/sprit.png') no-repeat; background-size:x y; }. Box {background-position:x y; // Through the background positioning, positioning to a specific position, display different pictures geek}Copy the code

Page can not send an HTTP request, all need to complete the request + response to the complete HTTP transaction, will consume some time, may also lead to HTTP link channel blockage, in order to improve the loading speed and performance of the page, we should reduce the number of HTTP requests and reduce the size of the request content.

2.4 Inline images (Base64 encoded)

Use the Data: URL pattern to embed images on a page. This increases the size of the HTML file, putting inline images in a (cached) stylesheet is a good idea, and successfully prevents the page from becoming “heavy.” However, inline images are not well supported by mainstream browsers. Reducing the number of HTTP requests to a page is a starting point, and an important guideline for improving the speed of first visits to your site.

<img width="100" height="100" src="mycat.jpg" alt="My Cat" />
Copy the code

2.6 With small cacheable Favicon.ico (P.S. favorites icon)

Favicon. ico is an image placed at the root of the server, and it causes a lot of trouble because browsers automatically request it even if you leave it alone, so it’s best Not to give a 404 Not Found response. And as long as it’s on the same server, cookies will be sent every time it’s requested, plus the image will interfere with the download order, for example in IE when you request additional components in onLoad, favicon will be downloaded first. So to mitigate the disadvantages of Favicon.ico, make sure that:

• Small enough, preferably under 1K
• Set the appropriate expiration HTTP header (you cannot rename it later if you want to change it). It is generally safe to set the expiration date to a few months later, and you can ensure that the change is known to the browser by checking the last modified date of the current favicon.ico.

function checkWebp() {

    try{

        return (document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') = =0);

       }catch(err) {

        return false; }} $(document).ready(function() {

        var webp_good = checkWebp();

        if(webp_good == false) {$('img').each(function() {

            var src = $(this).attr('src');

            if(typeofsrc ! ='undefined') {

                src = src.replace('/format,webp'.'/format,jpg'); // Convert webP format to JPG format

                $(this).attr('src', src);

            }

            var original = $(this).attr('original');        // For lazy loading

            if(typeoforiginal ! ='undefined') {

                original = original.replace('/format,webp'.'/format,jpg'); // Convert webP format to JPG format

                $(this).attr('original', original); }})}})Copy the code

2.8 Image lazy loading

By adopting the technology of image lazy loading, at the beginning of the page load time, do not request the real picture address, but a default diagram when the page loading is completed, in accordance with the relevant conditions in order to load the real picture (to reduce page load for the first time the number of HTTP requests) in real project, we began to image is not loaded, page loaded for the first time, Load the images you see on the first screen, and as the page scrolls, load the images that can be displayed in the following area

• According to the image lazy loading technology, we can also expand the data lazy loading

When loading the page, we only request the data of the first screen or the first two screens from the server (some websites render the data of the first screen in the background and return it to the client as a whole).

• When the page is pulled down and scrolled to an area, the data required by the area is requested (request back data binding and image lazy loading, etc.).
• Data paging display technology adoption is lazy loading thought: if we begin to request access to data is a lot of data, the partial request, we’d better start request only the first page of the data, when the page click on the second page (microblogging is next to a certain distance, to request the second page data) when the request to the second page of data.

3 optimized js

<script type="text/javascript" src="Menu_1. 0.17 js." "></script>
Copy the code

3.2 Minimize DOM access

A complex page means more bytes to download, and accessing the DOM with JavaScript is slower. For example, there is a difference between looping over 500 DOM elements on a page and 5,000 DOM elements when you want to add an event handler. Disadvantages of manipulating the DOM

• Dom exists mapping in the mechanism (DOM element object in JS and dom structure in the page is a mapping mechanism, a change is changed), this mapping mechanism, is the browser Android W3C standard to complete the construction of JS language and DOM construction (in fact, is to build a listening mechanism), dom operation is colleagues modify two addresses, Relative to some other JS programming is a performance drain.
• Changes in the DOM structure or style of a page trigger browser backflow (the browser reevaluates the DOM structure, which can be a costly operation) and redraw (rerendering an element’s style).

When doing DOM event binding, avoid event binding one by one as far as possible, and use higher performance event delegate to achieve

Event delegate (event broker) is the top of the time board to the outer container, when the behavior of the descendant elements in the outer container is punished, the method bound to the outer container will also be triggered to execute (bubble propagation mechanism caused by), through which event source, we can do different operations

Accessing DOM elements in JavaScript is slow, so to make the page more responsive, you should:

• Caches the index of the element that has been accessed
• Nodes are updated “offline” and then added to the DOM tree
• Avoid fixing layout problems with JavaScript

The number of DOM elements is easy to test by entering in the console

document.getElementsByTagName(The '*').length
Copy the code

3.4 Compiling more Asynchronous Operations

• Synchronous programming will lead to: the above things can not be finished, the following tasks can not be done, when we develop, we can set a certain area module for asynchronous programming, so that as long as there is no necessary sequence between modules, can be loaded independently, will not be affected by the blocking of the above modules (not much use)
• Ajax data requests, in particular, tend to be asynchronous programming, and it’s best to manage ajax requests based on the Promise design pattern (fetch, Vue, AXIos, etc., are often used in projects), because these plug-ins encapsulate Ajax based on the Promise design pattern
• In a real project, we would try to avoid looping too much data at once (because looping is synchronous programming), especially to avoid the while loop

Avoid eval in 3.5JS

• High performance consumption
• After code compression, it is easy to appear the problem of code execution disorder

Minimize the use of closures in 3.6JS

• Closures form an indestructible stack memory, and too much stack memory accumulates that affects page performance
• It can also easily lead to memory leaks
• Closures have their own advantages: preservation and protection, which we can only minimize, but cannot avoid

3.7 Use CSS3 motion instead of JS animation as much as possible

Css3 animation or deformation are turned on hardware acceleration, better performance than JS animation

3.9 Design Mode

Write JS code as far as possible to use the design pattern to build the system, convenient later maintenance, but also improve the expansion of the

3.11 compressed js

• Use an online site for compression
• Use htML-minifier to compress the CSS in HTML
• Use Uglifjs2 to compress JS
• Webpack, gulP packaging tool

HTML 4 optimization

4.2 Use iframe less

You can use iframe to insert an HTML document into a parent document. It’s important to understand how iframe works and use it efficiently. Advantages of

• Introduce slow third-party content, such as logos and ads
• Security sandbox
• Download scripts in parallel

Disadvantages of

• Expensive, even for a blank iframe
• Blocking page loading
• The semantic

5.1 Ensure that all components are smaller than 25K

This limitation is due to the fact that the iPhone cannot cache components larger than 25K, which is the uncompressed size. That’s why curtailing content itself is important, as gZIP alone may not be enough.

5.2 Package components into a composite document

Packaged into a composite document like E-mail with attachments, multiple components can be retrieved with a single HTTP request (remember: HTTP requests are expensive). When using this approach, check to see if the user agent supports it (iPhone doesn’t).

6 cookie

6.2 Place components in cookie-free fields

When the browser sends a request for a static image, cookies are sent along, and the server doesn’t need them at all. So they just cause meaningless network traffic, and you should ensure that requests to static components do not include cookies. You can create a subdomain where all static components are deployed. If the domain name is www.example.org, you can deploy static components to static.example.org. However, if cookies have been set in the top-level domain example.org or www.example.org, then all requests to Static.example.org will contain these cookies. You can buy a new domain name, deploy all the static components, and keep the new domain name cookie free. Yahoo! Yimg.com, YouTube ytimg.com, Amazon images-Amazon.com, and so on. Another benefit of deploying static components in cookie-free domains is that some proxies may refuse to cache components with cookies. One caveat: If you don’t know whether to use example.org or www.example.org as the home page, consider the impact of cookies. If you omit WWW, you can only write cookies to *.example.org, so for performance reasons it is best to use the WWW subfield and write cookies to that subfield.

7 server

&emsp;<br />.<! -- css, js --><br />    </head><br /> <? php flush(); ? ><br /> <body><br /> ... <! -- content --><br />Copy the code

7.6 Using CDN (Content Delivery Network)

The physical distance between the user and the server also has an impact on response time. Deploying content on multiple geographically dispersed servers allows users to load pages faster. But how? The first step to geographically dispersed content is: Don’t try to redesign your Web application to accommodate a distributed structure. Depending on the application, changing the structure can involve daunting tasks such as synchronizing session state and replicating database transactions across servers (translation may be inaccurate). Proposals to reduce the distance between users and content can be delayed or impossible because of this conundrum. Remember that 80% to 90% of the end user’s response time is spent downloading page components: images, styles, scripts, Flash, etc. This is the golden rule of performance. It is better to disperse the static content rather than redesign the application structure from the start. This not only significantly reduces response time, but also makes it easier to show credit for CDN. A Content delivery network (CDN) is a group of geographically dispersed Web servers that deliver content to users more efficiently. Typically, the server chosen to send the content is based on a measure of network distance. For example, select the server with the least hops or the fastest response time.

7.7 Add the Expires or cache-control HTTP header

This rule has two aspects:

• For static components: by setting a distant future time asExpiresTo never fail
• Redundant dynamic components: use appropriate onesCache-ControlHTTP headers to allow the browser to make conditional requests

Web design is getting richer, which means pages have more scripts, images and Flash. New visitors to the site may still have to submit several HTTP requests, but by using expiration dates you can make the component cacheable, which avoids unnecessary HTTP requests during subsequent browsing. Expiration HTTP headers are usually used for images, but they should be used for all components, including scripts, styles, and Flash components. Browsers (and proxies) use caching to reduce the number and size of HTTP requests and make pages load faster. The Web server uses the expiration HTTP response header to tell the client how long the various components of the page should be cached. Using a date in the distant future tells the browser that the response will not change until April 15, 2010.

If you are using an Apache server, use the ExpiresDefault directive to set the expiration date relative to the current date. The following example sets a validity period of 10 years from the request time: ExpiresDefault “Access Plus 10 years”

7.8 Reducing DNS Queries

The domain name system establishes a mapping between host names and IP addresses, just as people and numbers are mapped in a phone book. When you type www.shanghai70.com into your browser, the browser will contact the DNS resolver to return the server’s IP address. DNS has a cost. It takes 20 to 120 milliseconds to find the IP address for a given host name. The browser cannot download anything from the host name until the DNS lookup is complete. DNS lookups are cached more efficiently, stored on a special caching server by the user’s ISP or local network, but can also be cached on individual users’ computers. DNS information is stored in the OPERATING system’s DNS cache(DNS client service on Microsoft Windows). Most browsers have their own cache independent of the operating system. As long as the browser keeps this record in its cache, it will not query the operating system for DNS. IE caches DNS lookups for 30 minutes by default, written in the DnsCacheTimeout registry setting. The Firefox cache for 1 minute, you can use the network. DnsCacheExpiration configuration Settings. If the client’s DNS cache is empty (both browser and OS), the number of DNS lookups is equal to the number of different host names on the page, including page urls, images, script files, Host names in stylesheets, Flash objects, and so on, reduce DNS lookups by reducing the number of different host names. Reducing the number of different host names also reduces the number of components a page can download in parallel, avoiding DNS lookups reduces response time, while reducing the number of parallel downloads increases response time. My rule is to spread components out between 2 and 4 host names, which is a compromise between reducing DNS lookups and allowing high concurrent downloads.

7.9 Avoiding Redirection

The redirect uses 301 and 302 status codes, and below is an HTTP header with the 301 status code

HTTP/1.1 301 Moved Permanently Location: example.com/newuri Content-type: text/ HTML

The browser automatically jumps to the URL specified in the Location field. All the information needed for a redirect is in the HTTP header, and the response body is generally empty. Additional HTTP headers, such as Expires and cache-Control, also represent redirects. There are other ways to jump: refresh meta tags and JavaScript, but if you have to do redirection, it’s best to use the standard 3xxHTTP status code, mainly to make the back button work. Keeping in mind that redirects slow down the user experience, inserting redirects between the user and the HTML document delays everything on the page, the page can’t be rendered, and components can’t start downloading until the HTML document is delivered to the browser. One common and extremely wasteful redirection that Web developers are not aware of is when a slash is missing at the end of a URL. For example, a jump to www.shanghai70.com/a returns a 301 response redirected to www.shanghai70.com/b (note the trailing slash). In Apache you can use the Alias, mod_rewrite, or DirectorySlash directives to cancel unwanted redirects. The most common use of redirection is to connect an old site to a new site, but also to different parts of the same site, doing something for different users (browser type, user account type, and so on). Using redirects to connect two sites is the easiest and requires only a small amount of extra code. While using redirects at these times reduces the developer’s development complexity, it reduces the user experience. One alternative is to use Alias and mod_rewrite, provided both code paths are on the same server. If you used redirects because of a domain name change, you can create a CNAME (create a DNS record pointing to another domain name as an Alias) combined with the Alias or mod_rewrite directive.

7.10 Transfer in Json Format

In the data communication between the client and server, we try to use JSON format for data transmission

• The data in JSON format can clearly show the data structure, and it is also convenient for us to obtain the operation
• Data in JSON format is much more lightweight than the XML format transport of old
• Both client and server support json format data processing, processing is very convenient

In real projects: Not all data is JSON-based, we try to do this, but for some specific needs (such as file stream transfer or document transfer) json is not appropriate