There are 23 well-known Yslow optimization rules:
1. Reduce the number of HTTP requests and try to combine pictures, CSS, and JS. For example, when loading a page, if there are 5 css files, then 5 http requests will be issued, which will make users wait for a long time when they visit your page for the first time. And if these five files are combined into one, only one http request needs to be issued, which saves network request time and speeds up page loading.
2. Use the static resources on the CDN website, i.e. 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 come in as their values. So avoid making such omissions.
4. Specify Expires for the file header
Exipres is used to set the expiration time of the file, and is generally valid for css, js, and image resources. It can make the content cacheable, so that the next time the same resource is accessed, it will be read through the browser cache area, and there is no need to make an http request. The following example: <img src="https://pic1.zhimg.com/50/bfa4b58630eec8492318aa88cbb23378_hd.jpg" data-rawwidth="1266" data-rawheight="160" class="origin_image zh-lightbox-thumb" width= "1266" data-original="https://pic1.zhimg.com/bfa4b58630eec8492318aa88cbb23378_r.jpg">The Expires time of this css file on Sina Weibo is 2016-5-04 09:14:14.5. Using gzip to compress content gzip can compress any text type of response, including html, xml, json. Greatly reduces the amount of data returned by the request.
6. The resources that put CSS on the top web page are loaded sequentially from the Internet to the bottom, so placing CSS at the top of the page can render the page first, making the user feel that the page loads quickly.
7. Placing JS at the bottom to load js will block subsequent resources, and you must wait for js to load before loading subsequent files, so put js at the bottom of the page and load it last.
8. Avoid using CSS expressions Take an example of CSS expressions font-color: expression( (new Date()).getHours()%3 ? “#FFFFFF” : “#AAAAAA” ); this expression will persist Styles are calculated on the page, affecting the performance of the page. And css expressions are only supported by IE.
9. Put CSS and JS in external files The purpose is to cache files, you can refer to Principle 4. But sometimes in order to reduce requests, it will also be written directly to the page, which needs to be weighed according to the ratio of PV and IP.
10. Weigh the number of DNS lookups for fewer hostnames to save on response time. At the same time, however, it is important to note that reducing the number of hosts will reduce the number of parallel downloads in the page. Internet Explorer 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 will be affected. So Sina will engage in N second-level domain names to put pictures. Below is the picture domain name of Sina Weibo, we can see that he has multiple domain names, which can ensure that these different domain names can download pictures at the same time without queuing. However, if too many domain names are used, the response time will be slow, because the time of not responding to the domain names is inconsistent. <img src="https://pic2.zhimg.com/50/1b3b00a1c147fc9211b6a90d55788a22_hd.jpg" data-rawwidth="599" data-rawheight="62" class="origin_image zh-lightbox-thumb" width="599" data-original="https://pic2.zhimg.com/1b3b00a1c147fc9211b6a90d55788a22_r.jpg">
11. Streamlining CSS and JS This involves the compression of CSS and JS. For example, in a css file of Sina below, remove all spaces and carriage returns to reduce the size of the file. There are many compression tools now, and the 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 will be more pitiful. It seems that there is no difference. In fact, it is a page jump many times. For example, when the URL should have a slash (/) but is ignored. For example, when we want to visit http://baidu.com, what is actually returned is a jump with a 301 code, which points to http://baidu.com/ (note the slash at the end). Rewrite can be used in nginx server; Alias or mod_rewrite or the DirectorySlash can be used in Apache server to avoid. The other is not to jump between domain names, such as visiting http://baidu.com/bbs and jumping to http://bbs.baidu.com/. Then you can use Alias or mod_rewirte to create CNAMEs (DNS records that hold the relationship between one domain name and another domain name) instead.
13. Remove repeated JS and CSS to call scripts repeatedly, in addition to adding extra HTTP requests, multiple operations will also waste time. Both IE and Firefox have the problem of double-evaluating JavaScript regardless of whether the script is cacheable or not.
14. Configure ETags, which is used to determine whether the elements in the browser cache are consistent with those on the original server. It is more flexible than last-modified date. For example, if a file is modified 10 times in 1 second, Etag can combine Inode (the number of inodes of the file), MTime (modification time) and Size to accurately judge, To avoid the problem that UNIX records MTime can only be accurate to the second. For server cluster use, the last two parameters can be taken. Use ETags to reduce web application bandwidth and load
15. Cacheable AJAX asynchronous requests also cause users to wait, so when using ajax requests, you must actively tell the browser to request cached content if the request has a cache. In the following code snippet, cache:true is an explicit requirement that if the current request has a cache, use the cache directly $.ajax({
url : 'url',
dataType : "json",
cache: true,
success : function(son, status ){
}
})
16. Using GET to complete AJAX requests When using XMLHttpRequest, the POST method in the browser is a "two-step" process: the header is sent first, and then the data is sent. So it makes more sense when using GET to get data.
17. Reduce the number of DOM elements This is a big question, and a bunch of optimization details can be derived here. If you want to study in detail, you can refer to the recommended books below. In short, reducing the number of DOMs in general will reduce the browser's parsing burden.
18. Avoid 404, such as problems with externally linked css or js files. When returning 404, it will destroy the browser's parallel loading of files. And the browser will try to find potentially useful parts of the returned 404 response as JavaScript code to execute.
19. Reduce the size of the cookie. Don't stuff so many things in the cookie, because every request has to take him to run.
20. Cook uses cookie-free domains such as CSS, js, images, etc., when the client requests static files, it reduces the The effect of repeated transmission of ie on the primary domain name.
21. Do not use the filter IE's unique property AlphaImageLoader to correct the translucent effect of PNG images displayed in versions below 7.0. The problem with this filter is that it stops rendering the content and freezes the browser when the browser loads the image. It does one operation on every element (not just images), increasing the memory cost, so its problems are multi-faceted. The best way to avoid using AlphaImageLoader completely is to use PNG8 format instead, which works fine in IE. If you really need to use AlphaImageLoader, use underscore _filter to make it invalid for users of IE7+.
22. Don't scale the image in HTML. For example, the size of the image you need is 50* 50<img width=”50″ height=”50″ src=”hahah.jpg” alt=”hahaha” /> Then don’t use one 500*500 large size image, affecting loading
23. Reduce favicon.ico and cache
Recommended:
The Guide to Building High-Performance Websites (Second Edition)
https://www.zhihu.com/question/33032042/answer/141739483
http://www.w3cui.com/?p=271
Final summary:
====>>>>
1. Reduce the number of HTTP requests and combine images, CSS, and JS as much as possible. For example, when loading a page, if there are 5 css files, then 5 http requests will be issued, which will make users wait for a long time when they visit your page for the first time. And if these five files are combined into one, only one http request needs to be issued, which saves network request time and speeds up page loading.
11. Streamlining CSS and JS This involves the compression of CSS and JS. For example, in a css file of Sina below, remove all spaces and carriage returns to reduce the size of the file. There are many compression tools now, and the basic mainstream front-end construction tools can compress css and js files, such as grunt, glup, etc.
12: Remove duplicate scripts
2. Use the static resources on the CDN website, i.e. css and js are all distributed using CDN, and the same is true for pictures.
6. The resources that put CSS on the top web page are loaded sequentially from the Internet to the bottom, so placing CSS at the top of the page can render the page first, making the user feel that the page loads quickly.
7. Placing JS at the bottom to load js will block subsequent resources, and you must wait for js to load before loading subsequent files, so put js at the bottom of the page and load it last.
9. Put CSS and JS in external files The purpose is to cache files, you can refer to Principle 4. But sometimes in order to reduce requests, it will also be written directly to the page, which needs to be weighed according to the ratio of PV and IP.
8. GZIP compressed files
9. Use ajax cache
10. Reduce DNS Queries
11. Avoid redirects
4. Specify Expires for the file header
Exipres is used to set the expiration time of the file, and is generally valid for css, js, and image resources. It can make the content cacheable, so that the next time the same resource is accessed, it will be read through the browser cache area, and there is no need to make an http request. The following example: <img src="https://pic1.zhimg.com/50/bfa4b58630eec8492318aa88cbb23378_hd.jpg" data-rawwidth="1266" data-rawheight="160" class="origin_image zh-lightbox-thumb" width= "1266" data-original="https://pic1.zhimg.com/bfa4b58630eec8492318aa88cbb23378_r.jpg">The Expires time of this css file on Sina Weibo is 2016-5-04 09:14:14.5. Use gzip to compress the content gzip Can compress any text type response, including html, xml, json. Greatly reduces the amount of data returned by the request.
13. Configure ETag
14. Avoid css expressions
https://blog.csdn.net/an1090239782/article/details/78166983#%E4%B8%89%E6%B7%BB%E5%8A%A0expires%E5%A4%B4