Common methods of network performance optimization

Improve Web page performance

Http://www.w3cplus.com/performance/10-ways-minimize-reflows-improve-performance.html

debugging method of Web page lag

All can ah, timeline more direct, generally first look at this.
Profile, you can see the specific invocation information in detail. Page as long as no less than 30 frames is smooth
Generally to 26 can not see how many frames flash?
GIF generally 8-12 frame bar mostly with 24 frames ... High frame rate requirements are generally 3d
The rotation angle of view is very high in frame rate.

The Excetional Performance Team summed up a series of ways to improve website speed. Can be divided into 7 major categories 35.
Includes content, servers, CSS, JavaScript, cookies, images, mobile apps, seven parts.

I. Content part

• Minimizing HTTP Requests
• Reduce DNS Lookups
• Avoid jumps
• Cache Ajxa
• Postpone loading
• Pre-load
• Reduce the number of DOM elements
• Dividing page content by domain name
• Minimize frame Count
• Avoid 404 errors

Second, the server part

• Using the Content distribution network
• Specify expires or Cache-control for a file header
• Gzip Compressed file contents
• Configuring the ETag
• Flush output buffers as early as possible
• Use get to complete AJAX requests
• Avoid empty images to

Third, the CSS part

• Put the style sheet on top
• Avoid using CSS expressions (expression)
• Replace @import with <link>
• Avoid using filters

Iv. JavaScript section

• Place the script at the bottom of the page
• Using external JavaScript and CSS
• Cut JavaScript and CSS
• Eliminate duplicate scripts
• Reduce DOM Access
• Developing intelligent event handlers

V. Coockie part

• Reduce Cookie Volume
• Use no Coockie domain name for page content

VI. Image part

• Optimize images
• Optimize CSS Spirite
• Do not scale images in HTML
• Favicon.ico is small and cacheable

Vii. Mobile Part

• Keep single content less than 25K
• Packaging components into compound text

1190000004139275

Code-level optimization

About the picture

1. Large images within the page, especially banner charts, login page backgrounds, etc., using third-party CDN acceleration. At the same time do the compression, if the compression is more than 200kb, then communicate with the designer whether to cancel or change the picture.

2. Sprite diagram necessary, a variety of small icons, small icon, to do a picture inside go.

3. Try to use the icon font instead of small icons, the advantages of icon font can throw the ordinary icon of several streets, arbitrarily adjust the size, change the color, too cool!!

4. If the project is large, the company is not bad money, the best solution is to put the picture resources on a separate server, configure a separate domain name, picture resources loaded by the picture domain name loading, many large companies of static resources are stored and distributed by a separate server

I generally and the designer bargain bottom line is the picture must be loaded smoothly, if the user opens the webpage picture to load half a day not to come, even if our picture does beautifully, what egg uses!

About JS

1. Third-party JS libraries, must use the min version. The Lib within the site must be merged using Gulp compression before each release.

2. Mobile uses Zepto library and does not allow jquery

3. To the JS code a global namespace, for example, our project is a bicycle official website, the global namespace is called bike, and the project related to all JS methods, functions, variables, all hanging under the bike

var bike={};bike.name=‘cookee‘;bike.getOrderDetail=functtion(id){.....}

About CSS

1. Refine the project's public styles, buttons, and forms.

2. Named. attribute-oriented naming, the general module can be named for the module, such as header header, tail footer, etc., other please use the attribute-oriented naming, so that can give CSS maximum reuse freedom, about what is the property-oriented naming method, please refer to the recommended

3. Style separation and separation, in the CSS do not use the id attribute, with the ID for JS to use

4. Reduce the level of CSS nesting, because the CSS rendering is right-to-left, about the rendering of the Web page, this detail can be written an article. If your hierarchy tag is nested multiple layers, how much rendering time you want to waste, and what reasons do you have to not improve your code for the time required to load on the mobile side of milliseconds?

5. Elegant name can let a person at a glance, put a previous summary of the figure, when nothing more to see, imperceptible to remember these names

About HTML

1. Reduce redundant HTML by streamlining the DOM structure

2. Semantic tagging, learn to use

3. Mobile side, using SVG drawings instead of canvas drawings, the canvas will have serious aliasing (if there are some students have practiced the solution of the sawtooth, I would like to listen to)

Common methods of network performance optimization