在项目的交互或视觉评审中,前端同学常常会对一些交互效果质疑,提出这样做不好那样做不好。主要原因是这些效果通常会产生一系列的浏览器重绘和重排,需要 付出高昂的性能代价。那么,什么是浏览器的重绘和重排呢?二者何时发生以及如何权衡?如何在具体的开发过程中将重绘和重排引发的性能问题考虑进去?本文期 待可以部分解释以上三个问题。
ie6双倍边距bug(ie6下块属性标签浮动,并且有横向margin,横向margin加倍)
a. ie6
b. 浮动
c. 横向margin
d. 块属性标签(加display:inline)
ie6下 li部分兼容性问题:
a. 左右两列布局,右边右浮动ie6ie7下拆行;(左边元素浮动)
b. ie6 ie7 li下元素都有浮动,在ie6ie7下方会产生4px间隙的问题;(加vertical-align:top;)
图片下方间隙问题
a. display;(改变标签本身特性)
b. overflow:hiden;(必须知道图片高度)
c. vertical-align(暂时最完美的方案)
css精灵
是一各网页图片处理方式,它允许你将一个页面涉及到的所有零星图片包含到一张大图中去
优点:利用css精灵能很好地减少了网页的http请求次数,从而大大的减少了页面的性能
缺点:降低开发效率;维护难度加大
css hack:针对不同的浏览器写不同的css样式的过程
\9 ie10之前的ie浏览器解析
+,*,ie7包括ie7之前的浏览器解析
_ie6包括ie6之前的ie浏览器解析
?
!important提升样式优先级权重
在ie6下高度小于19px的元素,高度会被当做19px处理;
解决ie6下的最小高度是加overflow:hidden;
解决办法:font-size:0;但只能解决到2个像素,小于2个像素这个方法将无法解决
haslayout 根据元素内容的大小或者父级的父级的大小重新计算宽度
display:inline-block
height:(除auto外的任何值)
float:(left或right)
widht:(除auto外的任何值)
zoom:(除normal外的任何值)
ie6双倍边距bug(ie6下块属性标签浮动,并且有横向margin,横向margin加倍)
a. ie6
b. 浮动
c. 横向margin
d. 块属性标签(加display:inline)
ie6下 li部分兼容性问题:
a. 左右两列布局,右边右浮动ie6ie7下拆行;(左边元素浮动)
b. ie6 ie7 li下元素都有浮动,在ie6ie7下方会产生4px间隙的问题;(加vertical-align:top;)
图片下方间隙问题
a. display;(改变标签本身特性)
b. overflow:hiden;(必须知道图片高度)
c. vertical-align(暂时最完美的方案)
css精灵
是一各网页图片处理方式,它允许你将一个页面涉及到的所有零星图片包含到一张大图中去
优点:利用css精灵能很好地减少了网页的http请求次数,从而大大的减少了页面的性能
缺点:降低开发效率;维护难度加大
css hack:针对不同的浏览器写不同的css样式的过程
\9 ie10之前的ie浏览器解析
+,*,ie7包括ie7之前的浏览器解析
_ie6包括ie6之前的ie浏览器解析
?
!important提升样式优先级权重
在ie6下高度小于19px的元素,高度会被当做19px处理;
解决ie6下的最小高度是加overflow:hidden;
解决办法:font-size:0;但只能解决到2个像素,小于2个像素这个方法将无法解决
haslayout 根据元素内容的大小或者父级的父级的大小重新计算宽度
display:inline-block
height:(除auto外的任何值)
float:(left或right)
widht:(除auto外的任何值)
zoom:(除normal外的任何值)