前端常见的性能优化有哪些?
- 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;