1. Sprites (background sprite image/sprite image)
1- Include multiple sporadic pictures or icons into one big picture, so that only one picture needs to be loaded instead of many pictures, which reduces a lot of http requests
2-Using the combination of background-image, background-repeat, and background-position of CSS for background positioning, background-position can accurately locate the position of the background image with numbers;
Second, reduce the number of http requests
CSS Sprites, JS, CSS source code compression, image size control is appropriate; web page Gzip, CDN hosting, data cache, image server.
Three, delay loading components
You can take a closer look at the page and ask yourself: What is necessary to render the page in the first place? You can wait for the rest of the content.
JavaScript is an ideal choice for separating before and after the onload event. For example, if you have JavaScript code and libraries that support drag and drop and animation, you can wait a while because drag and drop elements are after the page is initially rendered. Other parts that can be lazily loaded include hidden content (content that appears after a certain interactive action) and collapsed images.
Tools can help you reduce your workload: YUI Image Loader can lazily load folded images, and YUI Get utility is a simple way to introduce JS and CSS. Yahoo! homepage is an example, you can open the Firebug network panel to take a closer look.
It is best to match performance goals with other web development best practices, such as "progressive enhancement." If the client supports JavaScript, you can improve the user experience, but you must ensure that the page can work properly without JavaScript. So, after confirming that the page is running normally, you can enhance it with some delayed loading scripts to support some gorgeous effects such as drag and drop and animation.
Four, put an end to 404
HTTP requests are expensive, and there is no need to use an HTTP request to get a useless response (such as 404 Not Found), which will only slow down the user experience without any benefit.
Some sites use the helpful 404-"Do you mean xxx?" This is good for the user experience, but it also wastes server resources (such as databases, etc.). The worst thing is that the external JavaScript linked to has an error and the result is a 404. First, this download will block parallel downloads. Second, the browser will try to parse the 404 response body, because it is JavaScript code, and it needs to find out the available parts.
Five, minimize DOM access
Accessing DOM elements with JavaScript is very slow, so in order to make the page react more quickly, you should: cache the index of the elements that have been accessed
, update the nodes "offline" first, and then add them to the DOM tree.
Avoid using JavaScript to fix layout problems
6. Give Cookie to lose weight
There are many reasons for using cookies, such as authorization and personalization. The cookie information in the HTTP header is exchanged between the web server and the browser. It is important to ensure that cookies are as small as possible to minimize the impact on user response time.
Clear unnecessary cookies to
ensure that cookies are as small as possible to minimize the impact on user response time.
Pay attention to setting the appropriate domain level for cookies, so as not to affect other subdomains.
Set appropriate validity periods, earlier validity periods or none can be deleted faster Cookies, improve user response time
Welcome to join the group for technical discussions, group number: 954314851
