Interview questions – page performance optimization reference text address

We interview a lot of problems, of which the frequency of the q high page is how to optimize performance, we usually directly answer a lot of article, and then lead to a problem is a lot of the interviewer will continue to ask, say specifically how to realize these methods, you said let’s simple said several typical. Remember that the ultimate goal of page performance optimization is to improve the user experience, so improving the user experience is part of page performance optimization in a sense.

Performance optimization

Reduce the number of HTTP requests

This is the most common answer, but many interviewers will then ask, how can I reduce it? At this time, many people will be confused, in fact, it is not difficult to reduce from two aspects, respectively from the business and static resources, business, we try to merge complex business can be merged into a single interface, in the case of small data volume, in the case of large data volume to do the corresponding paging operation. Try not to merge the interface resulting in a large amount of data interface timeout, second from the static resources, in fact, request back-end interface really do not spend too much time, a large part of the time is used in pictures, styles, scripts, etc., but it is not realistic to reduce the request for static resources, So what we can do is server side (CDN) merge, nodeJs-based file merge tool, by putting a lot of resources into a file processing method to reduce HTTP requests, optimized to a page preferably only one CSS and JS file request. The second way to handle static resources is to combine background images into a single file and use CSS Sprite to control the display through background-image and background-position.

Use CDN acceleration

I can’t give you an example, but I can tell you why CDN acceleration can optimize page performance. Because we spend a lot of time loading resources on our pages, it is important to reduce the downloading time of resources. CDN is actually an internal distribution network, which is a group of Web servers distributed in different geographical locations. Used to provide users with high performance content to send, so we can choose the corresponding fastest to use at the time of selection.

Place the CSS at the top of the page

This is interesting, some people say this is torn, but it is not, what is the purpose of our page performance optimization, in order to give the user a better experience, that our page was gradually apply colours to a drawing, so we hope the page to load more files for as long as possible, that is to say, gradually when the browser loads the page header, navigation bar, Logo etc. These are actually give the user visual feedback, people speaking is page seems to be a little bit faster, if interested in mobile phone should be know, iphone reaction is fast, it is in the apple 4 s, engineer 4 s to make it look smoother, we unlock the moment is a picture, a picture of a too much, In order to give the user a visual excess, it will make the user feel that this reaction is too fast, but the principle is the same.

Decide whether to use inline styles or external JS or CSS

This as if we’ve been cognitive optimization scheme is as far as possible the use of internal style, so that we can improve the speed of loading, yes, but this should be a prerequisite, that is the proportion of the HTML document to the external file, if the website user page access many times in each session, colleagues page reuse multiple scripts and stylesheets, Using external files is a good choice. If a site’s home page, because of its high response time requirements, tends to be more inline, one might ask, why is it faster to use external files? This is a good question, because external JS and CSS have a chance to be cached by the browser, and in the case of inline HTML documents are usually not configured for caching, so the HTML is redownloaded every time the request is made. Because cached files do not make HTTP requests, HTTP requests are reduced and page rendering is accelerated.

Reducing DNS queries

We generally enter the URL, the first step to do the browser is to query the IP address corresponding to the domain name, this process is the DNS resolution process, that is if you remember [http://182.61.200.7/] is baidu home address, do you remember? So you have to remember the domain name, www.baidu.com, and then the browser for you to find the corresponding IP address, this process is DNS resolution process, why reduce DNS query? Because we are in the process of DNS queries will not download any resource, but the query process is time-consuming, though rarely, generally is about 20 ms, but due to performance considerations, the general operating system, browser, can have its own DNS cache, generally is one minute, IE is 30 minutes, HaoHeng, But this is to be able to configure, and here there may be people don’t know how to reduce, just know why reduce, reduce as far as possible to use the same way is domain name, due to the cache, the same is not for a second query, but need a point to note here, we reduce the different domain while reducing the DNS query, It also reduces the amount of concurrent page download resources, that is, avoiding DNS queries optimizes time, reducing parallel downloads increases response time, so our principle is to distribute different files to 2-4 domains and choose a compromise.

Compress JS and CSS

As we all know, the principle of compression is also clear. It is to reduce unnecessary comments and Spaces and control the file size as small as possible, so that the download speed can be fast and the performance can be improved. The common compression tools of JS Compressor, JSMin and YUI Compressor, are also called confusion. In fact, after our Vue framework is packaged, it confuses JS and CSS to reduce the size of VandorJS and improve the speed. This is the function of webPack packaging tool. In addition to compressing external JS and CSS, We can also use the Gzip module for inline and block compression, which is another solution.

Minimize 301/302 redirects

Redirection itself does not take much time, so why is this included in performance tuning? Reason and put CSS in the head file is a truth, because when general redirect only request header, no request body, an effect is caused by browser will see a progress bar in motion, but the page is blank, the user experience is very poor, if do the permissions distribution, using redirects is one of the lowest cost of development plan, But to understand this is to take the user experience in exchange, of course, you can do a pseudo static excessive page is also not tasted, do not understand words, move to the “CSS to the top of the page” this section of Apple 4S excessive principle

Set up ETags for control caching

Entities on a page are static resources, images, scripts, styles, etc. ETags are a more efficient mechanism than verifying the last Modified date.

HTTP/1.1 200 OK
Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT
ETag: "10c24bc-4ab-457e1c1f"
Content-Length: 12195
Copy the code

If the browser then validates the file, it uses the if-none-match header to pass the ETag to the server. If the tag matches, the server returns 304 (the file has not changed) and thus does not download the file, reducing resource requests

GET /i/yahoo.gif HTTP/1.1
Host: us.yimg.com
If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT
If-None-Match: "10c24bc-4ab-457e1c1f"
HTTP/1.1 304 Not Modified
Copy the code

The question is what to tag the entity with, which is typically constructed using attributes of the file that are unique to a particular web service class.

Avoid iframe

Iframe can be used to insert HTML into the parent document. We list its advantages and disadvantages: It can be used to load slow third-party resources, ads, etc., as a security sandbox, parallel script download disadvantages: Loading is expensive, even if there is nothing on the page, the iframe will not trigger the load time until it is fully loaded. Safri, Chrome can dynamically set the iframe SRC attribute with JS to avoid this problem

Avoid 404

We know that one of the main ways to optimize page performance is to reduce HTTP requests. If an HTTP request does not return anything and the 404 page does not exist, it will greatly reduce the user experience. A better solution is to replace the 404 page, but we still want to avoid 404 as much as possible

Optimize the Cookie

Cookies are generally used for identity authentication, personalized Settings and other purposes. Cookies are transmitted between the server and the browser through HTTP headers, so reducing the size of cookies can also improve the response speed. Optimization schemes reduce unnecessary cookies, try to compress the size of cookies, and set the appropriate expiration time

Reduce DOM manipulation

Cache already accessed elements, use classnames to manipulate elements’ styles, and avoid using JS to fix the layout

Do not zoom images in HTML

For example, if you want a 100100 image, don’t use a 500500 image and then set the width and height to reduce the size. Finally, even if you want a 100×100 image, set the width and height to avoid the redrawing caused by the browser guessing

Avoid having the SRC attribute of the image empty

The reason is simple: SRC is empty, but the browser still sends an HTTP request, causing an unexpected traffic load that is unnecessary, wasting resources on the server, and possibly generating errors.