Common front-end performance optimization and browser compatibility issues

Common front-end performance optimization What?

  • 01. HTTP requests to minimize
  • 02. Use CDN (Content Delivery Network)
  • 03. Add Expirem head
  • 04. compression assembly (Gzip)
  • 05. The CSS style sheet on top (head)
  • 06. The js script at the bottom
  • 07. Avoid using CSS expressions
  • 08. Reduce DNS queries
  • 09. streamlining js (compression / confused)
  • 10. Avoid redirection (not lose '/')
  • 11. Use Ajax cacheable
  • 12. Remove duplicate scripts (Code Modular)

Front-end common browser compatibility issues

  • 1. different browser tabs default outer and inner patch patch

    Solution: CSS has increased by wildcard

* {
    margin: 0 ;
    padding: 0 ;
}
  • 2.IE6 from bilateral issues: setting the float in IE6, but also set the margin, the margin will be a problem

    Solution: Set display:inline;

  • 3. When setting the height of the label below 10px, in IE6, IE7 will appear in a position disposed beyond their

    Solution: beyond the height position of the label overflow:hidden, or the line-height setting value is less than the height of your settings

  • 4. Picture gap default

    Solution: Use float for the layout img

  • 5.IE9 following browsers can not use opacity

    solution:

    opacity:0.5;
    filter:alpha(opacity = 50);
    filter:progid:DXImageTranform.Microsoft.Alpha(style = 0,opacity = 50);
  • 6. margins overlap: when two adjacent elements are provided with margin margin, margin will take the maximum, minimum discarded;

    Solution: In order to prevent overlapping margins, a parent element may be added to the sub-element with the parent element to overflow: hidden;

  • 7. The cursor:handdisplay of the hand, is not supported on safari

    Solution: unified use cursor: pointer;

  • 8. The two block elements, the parent element disposed overflow:auto;sub-element set position: relative; and a height greater than the parent element, will be hidden in IE6, IE7 not overflow;

    Solution: A parent element is set `position: relative;

Guess you like

Origin www.cnblogs.com/itcast-lbq/p/11908914.html