What are the common front-end optimization techniques?

Source: Internet
Author: User

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?

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.