1. Reduce HTTP requests:
1) the size of resources is very important, not only relates to download time, but also because of IPv4 and IPv6 agreement an IP packet maximum of 65535 bytes, an IP packet is a request, then can get an equation:
According to this formula, we can control the resources as small as possible, can take to use automated build tools such as gulp automatically merge JS files, compressed files and images,
2) avoid redirects: redirect that need to take further action to complete the request, the client request time will be extended, so enter the URL should be used when the most complete, most direct address, such as input www.baidu.com instead of baidu.com,
3) use the cache mechanism: mainly include database cache, the server cache (the reverse proxy and the CDN cache), the browser cache,
2. The picture lazily
Page images of a lot of, can use lazy loading, only load the first screen images, when users access the content behind the rolling load corresponding pictures, method is to use a tiny placeholder first figure instead of images, the placeholder figure download only once, and will be the original image SRC stored in another attribute, judgment, as the picture quickly into the viewing area is the paths to the SRC and download images to display,
3. Code optimization
1) page structure: CSS at upper HTML content, JavaScript on the HTML content lower, you can use the preload resolve DNS resource in advance, because the browser is top-down reading content, so put the location of the resources will affect the site access speed, for example, if the script tags in HTML content in front, the browser will first invoke JavaScript interpreter to parse of JS, complete before rendering the rest of the HTML content, for the user, can see the contents of the HTML, so 1) doing so would cause delayed page availability, in addition, CSS is by modifying the page node, if the CSSOM building layout before, not wait until the CSSOM constructed, if CSS changed the layout of the nodes, will occur rearrangement, need to recalculate layout and map,
2) JavaScript optimization: such as reducing the DOM operation, reduce the rearrangement and re-paint, reduce the scope chain lookup, careful with the eval function, etc., JS code and CSS (below) the optimization of the main requirements web front end staff have a clear understanding of page rendering principle, grasp of the basic knowledge and good programming habits,
3) CSS optimization: such as reducing the use of the wildcard '*', extract the common style enhance reusability, selector can reduce the matching time accurately, moderate use inline style,
CodePudding user response:
