[Go] Improve front end performance and insufficient---Zhang Xin Asahi

Second, the most basic

• Top of CSS, JS bottom
• YUI Compressor/gzip
• CDN has
• Necessary CSS Sprite
• Ajax can be cached

There is nothing to say above.

Third, CSS rendering, page redraw and reflow

• Try to avoid similar .a.b{} .list a{} as well as some other complex selectors to improve overall site-wide CSS rendering.
• Avoid some expression expressions, avoid IE6 AlphaImageLoader png transparent filters, and try to generate PNG8 alpha transparency using fireworks (currently Photoshop has only PNG8 index transparency).
• Properly set high, for example if the div content may have highly differentiated dynamic content loading. What do you mean? For example, the personal user information in the upper-right corner is dynamically loaded after the page has finished rendering. However, it is possible to have a height of 20 pixels of small icons, while the text occupies a height of 12px * 1.4 = 16.8px, IE6 and there is a tragedy of the row height rejection. Therefore, if this part of the DIV is not high, it will appear after the personal information loaded, the entire page sank a few pixels (3.2 pixels?). ) the page redraw issue.

  Remember this principle, page refresh loading, should avoid the page elements of the shaking, displacement, etc., these are additional repainting, will make your CPU and fans excited.

• Picture settings do not respond to redrawing the size, if you do not set the size, while the external container does not have a high width, then the first loading of the picture, occupy space from 0 to the full appearance, the left and right up and down can be shifted, a large-scale redraw. See Sina Weibo loading time page height as the picture is constantly getting taller, these all make the browser redraw, one is the experience may not be good, the second is to burn the CPU.

  You can use width/height controls, or set them in CSS.

• <textarea>Or use <script type="text/html"> storage to load HTML or template HTML dynamically, reducing the rendering time of the first screen load.
• Absolute positioning of elements with complex animations-out of the document flow, avoiding strong backflow. Modern browsers can progressively use CSS3 transition to animate, higher performance than changing pixel values.
• Do not use iframe DOM elements that are said to cost the most.

Iv. reducing the number of static resource requests

• Starting with the CSS Sprite, the size of the sprite has been reduced due to lower maintenance costs at the end of the period
• Characters and graphs are generated, such as: the graph effect is described before.
• CSS graphics generated, such as triangles:
• CSS simulation, such as a few pixels of the projection effect
• CSS3 technology, such as the gradient effect CSS3 gradient + filter . Projection effect CSS3 box-shadow + filter blur.
• Base64 URL techniques, such as virtual point effects:

V. Reuse of resources

• Team CSS Style Library, quick build site –bootstrap a bit like our taste,,,,, .span1 .span2 .span3 .span4 .span4 ,...
• Aspect Adaptive – Regardless of the tab, button, or the size of the modules are aspect adaptive to suit a variety of environments, requirements
• CSS3 Font-face Technology – Solid color icon size and color can be controlled freely, enhanced multiplexing

Vi. js/html Interactive Correlation

• localStorageLocal storage and optimization. Two kinds of practice. One is: large data volume interaction, the data is not updated, including version control mechanism, a request, after peace of mind; the second is to replace the cookie to achieve certain functions, with expiration time management, reduce the page cookie size (ie6-7 still use cookies).
• Image/AD bit display loading, that is, scrolling show loading
• Default hidden resources such as dropdown/pinball are textarea hidden using. When it needs to be displayed, it is really revealed.
• Special Interactive JS resources are loaded asynchronously (uploading images, displaying maps, etc.)
• Insignificant resources avoid loading rendering peaks, such as outbound stations, iframe and so on, 1 seconds before the DOM creates loading processing (such as embedded Sina Weibo).
• Complex events Listen and initialize (the mouse moves or type into the region to initialize complex events).
• Keyboard event delay, such as search Autocomplete effect, or hover delay floating layer display
• mvc– data, presentation, interactive separation
• Data-oriented programming
• Avoid DOM manipulation, traverse data rather than DOM
• Event delegate to avoid excessive DOM element event binding
• Other n More JS writing details, etc.

Vii. potential of the browser itself

• olThe number of the list, table the self-adaptability
• <strong>Bold effect
• formCorrelation characteristics, the implementation of the element's own characteristics submit and reset other effects
• HTML5 placeholder and other n multi-modern browser support features, etc.

Eight, the problem lies

• No module loading mechanism, 20 module scripts are mixed together, a page may only use 4.
• The drawing of pictures is very common
• A variety of advertising tracking code, the site's front-end performance has been lowered by a level.
• HTML does not have a top-side display, removes redundant whitespace characters, and comments, so the HTML page size is not optimized. Not difficult, the program has not done the relevant processing.
• The head useless section is specially for IE6 's script output, has done the processing before, only IE6 the output, later because different city different station and so on reason, the backstage side does not bother to toss.

Ix. Conclusion

The grooming process found that some areas can be further improved, such as the city's drop-down elements can be placed in the hidden in the default textarea , I will get rid of it later. The actual situation of the project is different, the relevant processing optimization strategy is not the same, the applicability is not the same. You are welcome to share some of your optimization strategies in the form of comments, or to help point out some of the problems in my above statement.

Communicate with each other and make progress together!

Yes, you have a reliable position can be recommended, the Yangtze River Delta region, can be micro-blog private contact, the niche first thanked.

Other people's Views:

• @wo_is Immortal do not optimize for optimization, if necessary, as far as possible with the back-end mates.

Original article, reprint please indicate from Zhang Xin Xu-Xin space-Xin Life [http://www.zhangxinxu.com] This address: http://www.zhangxinxu.com/wordpress/?p=3152

(End of this article)

[Go] Improve front end performance and insufficient---Zhang Xin Asahi