& Lt; Switch & gt; Organization: improve the processing and deficiencies of the front-end performance, and sort out the front-end

<Switch> sorting: improve the processing and deficiencies of the front-end performance, and sort out the front-end

From: Zhang xinxu-xin space-xin Sheng live [http://www.zhangxinxu.com]

2. The most basic

• CSS top, JS bottom
• YUI compressor/Gzip
• CDN has
• Necessary CSS Sprite
• Ajax cacheable

There is nothing to say above.

Iii. CSS rendering, page re-painting, and Backflow

• Avoid similar.a.b{}.list a{}And some other complex selectors to improve the overall CSS rendering of the entire site.
• AvoidSomeExpression to avoid IE6AlphaImageLoaderPng transparent filter. You can use fireworks to generate the png8 alpha transparency (currently, photoshop only has the png8 index transparency ).
• Set the height as appropriate. For example, if the div content may have highly different dynamic content loading. What does it mean? For example, the personal user information in the upper right corner is dynamically loaded after the page is rendered. However, there may be a small icon with a height of 20 pixels, and the text occupies a height of 12 PX * 1.4 = 16.8px. IE6 has another tragedy of high row rejection. Therefore, if this part of the div is not high, the personal information will appear after loading, the whole page sink several pixels (3.2 pixels ?) Page re-painting.

  Remember this principle. When you refresh and load a page, you should avoid page element shaking and displacement. These are extra re-painting, which will make your CPU and fan excited.

• The image does not respond to the re-drawing size, if yourIf you do not set the size and the external container does not set the dead height width, the occupied space of the image will appear from 0 to full during the first loading, and the left and right may both be displaced, large-scale re-painting occurs. For details, refer to the issue that the page height keeps getting higher as images are displayed on Sina Weibo. All of these make the browser re-paint. First, the experience may be poor, and second, the CPU is burned.

  You can usewidth/heightControl, or set in CSS.

• <textarea>Or use<script type="text/html">Store the dynamic loading HTML or template HTML to reduce the rendering time for loading the first screen.
• Elements with complex animations are absolutely positioned-separated from the document stream to avoid strong backflow. Modern browsers can gradually use CSS3 transition to achieve the animation effect, which is higher than changing the pixel value.
• Not usediframeIt is said that the DOM element with the largest overhead.

Iv. Reduce the number of static resource requests

• The CSS sprite mentioned earlier has reduced the scale of sprite due to reduced maintenance costs.
• Generation of characters and graphics, for example, the effect of the graph is described before.
• CSS image generation, such as triangle:
• CSS simulation, such as the projection effect of several pixels
• CSS3 technology, such as gradient effect CSS3gradient+filter. Projection effect CSS3box-shadow+filterBlur.
  
• Base64 url technology, such as the effect of virtual points:
  

5. Resource Reuse

• Team CSS style Library, quick website construction-Bootstrap is a bit similar to ours,.span1,.span2,.span3,.span4,.span4,...
• High-width adaptive-tabs, buttons, and other large and small modules are highly adaptive to suit various environments and needs.
  
• CSS3 font-face technology-solid color Icon size and color can be controlled at will, enhance Reuse
  

Vi. js/HTML Interaction

• localStorageLocal Storage and optimization. Two practices.
  First, there is a large amount of data interaction, and the data is not updated very much, including the version control mechanism. After a single request, there will be no worries;
  
  
  
  Second, instead of cookies to implement some features, with expiration time management, reduce the page cookie size (IE6-7 still uses cookies ).
  
• Image/ad space display loading, that is, scrolling display Loading
• Drop-down/pop-up boxes and other default hidden resource usagetextareaHide. It must be displayed.
• Asynchronous loading (uploading images, displaying maps, etc.) when JS resources are used for special interactions)
• Irrelevant resources avoid loading and rendering peak display, such as external sitesiframeWait 1 second after loading, and then create and load the DOM (for example, embedded Sina Weibo ).
• Complex Event listening and initialization (initialize complex events only when you move the mouse or type in this area ).
• Keyboard event latency, such asAutocompleteEffect, orhoverLatency floating layer display
• MVC-data, presentation, and interaction Separation
• Data-Oriented Programming
• Avoid DOM operations and traverse data instead of DOM
• Event Delegate to avoid binding too many DOM elements to events
• Other N-plus JS compilation details

VII. Potential of browsers

• olNumber of the list,tableSelf-adaptability
• <strong>Bold Effect
• formRelated features, feature implementation of elementssubmitAndresetEffect
• HTML5placeholderAnd other features supported by N multi-modern browsers

VIII. Problem

• There is no module loading mechanism, and 20 module scripts are mixed together. Only four modules can be used on one page.
• Image stretching is common.
• Various ad tracking codes lower the front-end performance of a website.
• HTML has no top-side display, removing redundant spaces and comments. Therefore, the HTML page size is not optimized. It's not hard. The program has never done any relevant processing.
  
• A useless header segment for IE6scriptOutput, which was previously processed and only output by Internet Explorer 6. Later, the backend is too lazy because of different sites in different cities and other reasons.

IX. Conclusion

Some areas can be further improved during sorting. For example, drop-down elements of a city can be hidden by default.textarea. The actual conditions of the project are different, the related processing optimization strategies are also different, And the applicability is also different. You are welcome to share some of your optimization strategies in the form of comments, or help me point out the problems I have mentioned above.

Communicate with each other and make progress together!

Others' opinions:

• @ Wo_is do not optimize the game for optimization. If necessary, try to work with the backend.

(This article is complete)