Performance optimization--web Front end performance optimization

Core points of Knowledge:

1. Troubleshoot site performance bottlenecks: Analyze the logs in each link to find out the abnormal parts

2.Web front End: Part of the business logic before the website (browser, image service, CDN)

3. Optimization Tools

1) Browser optimization

(1) Reduce HTTP requests

A.http the cost of the request: Establish a communication link, carry out data transfer, and start a separate thread to process.

B. Means of reducing http: Merging CSS, merging JavaScript, merging images so that the browser has only one request.

(2) using the browser cache

A. Cache the static resources on the client's browser,

B. When the update is made, a new JavaScript file is generated and the references in the HTML are changed.

C. Volume-wise updates

(3) Enable compression

A. Server-side compression, client decompression, reduced data transfer

B. Some resources may be consumed

(4) JavaScript is generally placed on the lower level of the file, CSS is placed on top of the file because JavaScript can cause blocking

(5) Reduce cookie transmission

A. Use of cookies for static files does not make sense, cookies affect data transfer, and can be reduced by using a separate domain name

2) CDN

(1) The fastest return response, speed up access, reduce site pressure.

(2) General cache: CSS, files, script scripts, Web pages, etc.

3) Reverse Proxy

(1) Safety

(2) can be used as a cache server to speed up access

(3) can achieve high availability of load balancing

If the performance test results do not meet the performance or business requirements, then you need to find system bottlenecks, divide and conquer, and gradually optimize.

Large Web site structure is complex, the user from the browser to make requests until the database to complete the operation of the transaction, the middle of a lot of links,

If the test or user reports a slow response to the site, there is a performance problem, you must analyze the various aspects of the request experience,

Troubleshoot potential performance bottlenecks and locate the problem.

Troubleshooting a Web site's performance bottlenecks and troubleshooting A program's performance bottleneck is basically the same technique:

Check the log of each link of the request, analyze which link response time is unreasonable, exceed the expectation;

Then examine the monitoring data to analyze whether the main factors affecting performance are memory, disk, network, CPU, or code issues.

Either the architectural design is unreasonable, or the system resources are indeed inadequate.

After locating the specific reasons of product performance, it is necessary to optimize the performance, according to the site hierarchy, can be divided into web front-end performance optimization, server performance optimization, Storage server performance Optimization 3 aspects.

At the end, we will explain the optimization of performance, first of all, the performance optimization of Web front.

In general, the Web front end refers to the site business logic before the section , including browser loading, site view model, image services, CDN services, etc., the main optimization means to optimize browser access, use reverse proxy, CDN and so on.

1. Browser optimization

(1) Reduce HTTP requests

The HTTP protocol is a stateless application-layer protocol, which means that each HTTP request needs to establish a communication link , transmit data ,

On the server side, each HTTP needs to start a separate thread to handle.

These communications and services are expensive, and reducing the number of HTTP requests can effectively improve access performance.

The main way to reduce HTTP is to merge css, merge JavaScript, and merge pictures .

Combine the browser's access to the required JavaScript and CSS into a single file, so the browser only needs one request at a time.

Pictures can also be merged, multiple images merged into one, if each picture has a different hyperlink, you can use the CSS offset to respond to mouse click action, construct a different URL.

(2) using the browser cache

For a Web site, CSS, JavaScript, logos, these static resource files are updated in a relatively low frequency ,

These files are required for almost every HTTP request, and if you cache these files in your browser, you can improve performance very well.

By setting the properties of Cache-control and expires in the HTTP header, you can set the browser cache, which can be cached for days, even months.

At some point, static resource file changes need to be applied to the client browser in a timely manner, which can be achieved by changing the file name.

That is, updating the JavaScript file does not update the contents of the JavaScript file, but instead generates a new JS file and updates the references in the HTML file.

Web sites that use browser caching policies should use a volume-by- update approach when updating static resources.

For example, need to update 10 icon files, not to put 10 files at once all update, but should be a file a file gradually updated,

And there is a certain interval of time, so as not to prevent the user browser suddenly a large number of cache failure, centralized update cache, resulting in server load surges, network congestion situation.

(3) Enable compression

In the server to compress the file, in the browser to the file decompression, can effectively reduce the amount of data transmitted by the communication.

The compression efficiency of text files is more than 80%, so the HTML, CSS, and JavaScript files enable gzip compression to achieve better results.

However, compression on the browser and the server will be a certain amount of pressure, in a good communication bandwidth, and insufficient server resources to consider the case.

(4) CSS placed at the top of the page, JavaScript placed at the bottom of the page

The browser will render the entire page after downloading the full CSS, so it is best to put the CSS on top of the page so that the browser can download the CSS as soon as possible.

JavaScript, on the other hand, executes immediately after the JavaScript is loaded, potentially blocking the entire page, causing the page to appear slowly, so JavaScript is best placed at the bottom of the page.

But if you need JavaScript for page parsing, it's not appropriate to put it at the bottom.

(5) Reduce cookie transmission

On the one hand, cookies are included in each request and response, too large coookie can seriously affect the data transfer.

So what data data needs to be written to a cookie requires careful consideration to minimize the amount of data transferred in the cookie.

On the other hand, for some static resources access, such as CSS, script, etc., sending cookies is meaningless,

You can consider static resources using separate domain access, avoid sending cookies when requesting static resources, and reduce the number of cookie transfers.

2.CDN acceleration

The nature of the CDN (content distribute network) is still a cache, and the data is cached in the nearest place to the user,

Enables users to obtain data at the fastest speed, that is, the so-called network access first hop.

Because the CDN is deployed in the network operator's room, these operators are also the end-user's network service provider,

Therefore, the user requested the first jump to the CDN server, when there is a browser request resources in the CDN, from the CDN directly back to the browser,

Shortest path return response, faster user access and reduced data center load pressure.

CDN can cache the general static resources, tablets, files, CSS, script scripts, static pages, etc.

However, the frequency of these files is very high, caching them in a CDN can greatly improve the speed of Web page opening.

3. Reverse Proxy

The traditional proxy server is located on the side of the browser, and the proxy browser relaxes the HTTP request to the Internet, while the reverse proxy server is located on one side of the room and the proxy Web server receives the HTTP request.

and the traditional proxy server can protect the browser security, reverse proxy Server also has the role of protecting the site security,

Access requests from the Internet must go through a proxy server, which is equivalent to creating a barrier between a Web server and a possible network attack.

In addition to the security features, the proxy server can also speed up Web requests by configuring the caching feature.

When the user accesses the static content for the first time, the static content is cached on the reverse proxy server, so that when other users access the static content,

It can be returned directly from the reverse proxy server, speeding up the response of Web requests and alleviating the load pressure on the Web server.

In fact, some websites also cache dynamic content on proxy servers, such as Wikipedia and some blog forum sites,

Cache popular entries, posts, and blogs on the reverse proxy server to speed up user access, when these static content changes,

The internal notification mechanism informs the reverse proxy cache to fail, and the reverse proxy reloads the latest dynamic content again.

In addition, the reverse proxy can also achieve load balancing functions, the application cluster built through load balancing can improve the overall processing capacity of the system, and thus improve the performance of the high-concurrency site.

Performance optimization--web Front end performance optimization