前端常见的性能优化和浏览器兼容性问题
前端常见的性能优化有哪些?
- 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;
博客的价值在于传播,分享,交互,欢迎大家对我的文章发表评论意见。本人持求同存异的价值观,只要意见就事论事,本人不会删除你的评论。但不能保证被博客园删除、技术处理等,对此表示无能为力。
评论区内容不限于文章内容,但需要准守博客园评论规定。