General |
Reduce the number of server requests |
1. Merging multiple JS/CSS files 2. You can use CSS sprite when the picture doesn't need to be changed frequently 3. If only a single page use a js/css file, you can directly put the contents of the file in an HTML page (if multiple pages share the same js/css file, you should not do this, but should take advantage of the browser's caching function) |
Speed up access to resources |
1. CDN |
Reduce file size |
1. Compress the picture appropriately (e.g. Tinypng) 2. Compressing js/css files |
Improve code Execution efficiency |
|
Js |
Objects that need to be used multiple times (for example, the. Length of an object that needs to be traversed) should be saved as a variable and then called to reduce the time of the JS query Introduce a script at the bottom of the page to present the page content to the user Increase code reuse and reduce Code redundancy |
Css |
Introduce styles to the head of the page to prevent users from seeing content that is out of layout Do not use CSS expressions (few people have used it, I have not used it ...) Just have heard about it) |
Html |
SEO is the main optimization, add the name of keyword Description META tag, reduce the chain, outside the chain plus rel= "nofollow", the label as far as possible to conform to the semantics |
Other |
Pre-parsing |
such as home add <link rel= "PreRender" href= "/about.html" > |
Leveraging caching |
For example, you can use Baidu Static Resources Public Library (http://cdn.code.baidu.com/), if the user has previously visited other files referencing the same resource address, the advantages of caching come out |
Summary: Like compressing the image of this method to improve the speed of the page loading is very obvious, but some optimization methods for small access to smaller sites is not necessary, such as: If a JS file is only 100来 line, compressed after the reduction of the file size of the page access speed increased equal to No, Reduced pressure on the server is almost no |
|
|
|
|
What are the common front-end optimization techniques?