Front-end performance optimization is a huge topic. If you want to say everything in a comprehensive way, you will probably not finish it in three days and three nights. So we will talk about the front-end optimization problems we encounter most from the perspective of actual engineering applications.
Yslow is a web performance analysis browser plug-in developed by Yahoo. It can detect the specific performance values of web pages. It also has 23 famous Yslow optimization rules, which are enough for us to play.
1. Reduce the number of HTTP requests
Try to merge pictures, CSS, and JS. For example, if you load a page, if there are 5 css files, you will issue 5 http requests, which will make the user wait for a long time when the first time you access your page. If you synthesize these 5 files into one, you only need to issue an http request to save network request time and speed up the loading of the page.
2. Use CDN
The static resources on the website, namely, css and js, are all distributed using cdn, and the same is true for pictures.
3. 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 use the URL of the current page as their attribute value when rendering, so as to load the content of the page as their values. So avoid such negligence.
4. Specify Expires for the file header
Exempres is used to set the expiration time of a file, and is generally valid for css, js, and image resources. It can make the content cacheable, so that when you access the same resource next time, you will read it through the browser cache area, and you will not need to issue http requests again. As shown in the following example:
The Expires time of this css file on Sina Weibo is 2016-5-04 09:14:14.
5. Use gzip to compress content
gzip can compress responses of any text type, including html, xml, and json. Greatly reduce the amount of data returned by the request.
6. Put CSS on top
The resources on the web page are loaded sequentially from the Internet when loading, so css is placed at the top of the page to render the page first, making the user feel that the page loads very quickly.
7. Put JS to the bottom
When loading js, it will block subsequent resources. You must wait until js is loaded before loading the subsequent files, so you put js at the bottom of the page and finally load it.
8. Avoid using CSS expressions
Take an example of a css expression
font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF" : “#AAAAAA" );
This expression will continuously calculate the style on the page, affecting the performance of the page. And css expressions are only supported by IE.
9. Put CSS and JS into external files
The purpose is to cache files, please refer to Principle 4. But sometimes in order to reduce requests, they will be written directly to the page, which needs to be weighed based on the ratio of PV and IP.
10. Weigh the number of DNS lookups
Reducing hostnames can save response time. But at the same time, it is necessary to note that reducing the hosting reduces the number of parallel downloads in the page.
IE browser can only download two files from the same domain name at the same time. When multiple images are displayed on a page, the image download speed of IE users is affected. So Sina will create N secondary domain names to display pictures.
Below is the picture domain name of Sina Weibo. We can see that it has multiple domain names, which can ensure that these different domain names can download pictures at the same time without having to queue up. However, if there are too many domain names used, the response time will be slow because the time of the domain name is not consistent without responding to it.
11. Simplify CSS and JS
This involves the compression of css and js. For example, in a Sina css file below, remove all the spaces entered to reduce the file size. There are many compression tools now, and basic mainstream front-end construction tools can compress css and js files, such as grunt, glup, etc.
12. Avoid jumping
There is a phenomenon that makes it more scammed. It doesn’t seem like a difference, but in fact, the page jumps several times. For example, when the URL should have a slash (/) but is ignored. For example, when we want to access , we actually return a jump containing 301 code, which points to / (note the slash at the end). existnginxThe server can use rewrite; Alias or mod_rewrite or the DirectorySlash can be used in the Apache server to avoid it.
Another way is to not use jumps between domain names, such as accessing /bbs to jump to /. Then it can be replaced by using Alias or mod_rewirte to establish CNAME (DNS record that saves the relationship between one domain name and another domain name).
13. Remove duplicate JS and CSS
Repeated calls to scripts will also waste time in addition to adding additional HTTP requests. In IE and Firefox, whether the script is cacheable or not, they all have duplicate operations.JavaScriptThe problem.
14. Configure ETags
It is used to determine whether the elements in the browser cache are consistent with the original server. It is more flexible than last-modified date. For example, a file is modified 10 times in 1 second, and Etag can combine Inode (number of inodes of the file), MTime (modification time) and Size to accurately make judgments, avoiding the problem that UNIX records MTime only can be accurate to seconds. When using the server cluster, the last two parameters can be taken. Reduce web application bandwidth and load using ETags
15. Cacheable AJAX
Asynchronous requests also cause users to wait, so when using ajax request, you should actively tell the browser to request cached content if the request has cache. The following code snippet, cache:true is an explicit requirement. If the current request has a cache, use the cache directly.
$.ajax({ url : 'url', dataType : "json", cache: true, success : function(son, status){ }
16. Use GET to complete AJAX request
When using XMLHttpRequest, the POST method in the browser is a "two-step" process: first send the file header, and then send the data. Therefore, it makes more sense when using GET to get data.
17. Reduce the number of DOM elements
This is a great subject, and a bunch of optimization details can be extended here. If you want specific research, you can read the recommended books later. In short, by reducing the number of DOMs by the general principle, it will reduce the parsing burden of the browser.
18. Avoid 404
For example, if there is a problem with the external link's css and js files, it will destroy the browser's parallel loading.
19. Reduce the size of cookies
Don't put so many things in the cookie, because every request has to be taken away with him.
20. Use cookies-free domains
For example, when the client requests static files, it reduces the impact of repeated transmission of cookies on the main domain name.
21. Do not use filters
IE's unique attribute AlphaImageLoader is used to correct the translucent effect of displaying PNG images in version 7.0 below. The problem with this filter is that when the browser loads the image it terminates the rendering of the content and freezes the browser. On each element (not just pictures) it will operate once, increasing memory spending, so its problems are multifaceted.
The best way to completely avoid using AlphaImageLoader is to use PNG8 format instead, which works well in IE. If you really need to use AlphaImageLoader, please use underscore_filter to invalidate it for users of IE7 or above.
22. Don't scale images in HTML
For example, the image size you need is 50*50
<img width=”50″ height=”50″ src=“” alt=”hahaha” />
Then you don't need to use a large-size picture of 500*500, which will affect loading
23. Shrink and cache
The above are 23 optimization principles of Yslow, which can basically cover most of the performance optimization principles of the front-end. Many more geek and fine optimization methods are extended from these principles. If you want to know more optimization details, it is recommended to check out the following book. After all, there are many pages to explain in detail:
《High-performance website construction guide (second edition》, This actually explains the above 23 principles in a detailed manner.
Front-end optimization is a long way to go, and it doesn’t mean that you can complete it all in one or two days. We can refer to the above guidelines to optimize everything we can do so. Don’t worry too much about the remaining smaller details. After all, we must consider optimizing the cost-effectiveness. For example, it is not worth spending a month to reduce a few bytes of a file. These optimized things can be accumulated in our work and solved through Google.
If you want to learn more about front-end knowledge, you can go here to check it out:Systematic learning of front-end knowledge