前端常见的性能优化和浏览器兼容性问题

前端常见的性能优化有哪些？

• 01.尽量减少 HTTP 请求
• 02.使用 CDN（内容分发网络）
• 03.添加 Expirem 头
• 04.压缩组件（Gzip）
• 05.将 CSS 样式表放在顶部（head）
• 06.将 js 脚本放在底部
• 07.避免使用 CSS 表达式
• 08.减少 DNS 查询
• 09.精简 js（压缩/混淆）
• 10.避免重定向（不要丢'/'）
• 11.使用 Ajax 可缓存
• 12.删除重复脚本（代码模块化）

前端常见的浏览器兼容性问题

• 1.不同浏览器的标签默认的外补丁和内补丁

  解决方案：CSS 里增加通配符

* {
    margin: 0 ;
    padding: 0 ;
}

• 2.IE6 双边距问题：在 IE6 中设置了 float，同时又设置 margin，就会出现边距问题

  解决方案：设置 display:inline;

• 3.当标签的高度设置小于 10px，在 IE6、IE7 中会出现超出自己设置的位置

  解决方案：超出高度的标签位置 overflow:hidden,或者设置 line-height 的值小于你的设置高度

• 4.图片默认有间隙

  解决方案：使用 float 为 img 布局

• 5.IE9 以下的浏览器不能使用 opacity

  解决方案：

  opacity:0.5;
  filter:alpha(opacity = 50);
  filter:progid:DXImageTranform.Microsoft.Alpha(style = 0,opacity = 50);
  

• 6.边距重叠问题：当相邻两个元素都设置了 margin 边距时，margin 将取最大值，舍弃最小值；

  解决方案：为了不让边距重叠，可以给子元素增加一个父级元素，并设置父级元素为 overflow:hidden;

• 7.cursor:hand 显示手形，在 safari 上不支持

  解决方案：统一使用 cursor:pointer;

• 8.两个块级元素，父级元素设置了 overflow:auto;子元素设置了 position:relative;且高度大于父级元素,在 IE6、IE7 会被隐藏而不是溢出;

  解决方案：父级元素设置 `position:relative;