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 settings4. 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:hand
display of the hand, is not supported on safariSolution: 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;