CSS:重绘与重排、优化图片、渐进式渲染、CSS3新增属性、CSS hack
重绘(Repaint)与重排(Reflow):
- 重绘:当元素的外观被改变,但不影响布局(如颜色改变),浏览器会将新样式添加到渲染树中,并重新绘制影响的部分。
- 重排:布局发生改变(如大小、位置改变),浏览器需要重新构建渲染树。
优化图片:
- 使用CSS属性
background-size: cover;
来确保背景图像适应容器大小。 - 对于动态内容,使用
canvas
元素处理图像。
- 使用CSS属性
渐进式渲染:
- 使用
<link rel="preload">
来指定先加载的资源。 - 使用
<script>标签的
async或
defer\`属性来异步加载JavaScript。
- 使用
CSS3新增属性:
- 边框、阴影、圆角:
border-radius
、box-shadow
。 - 渐变、变换:
linear-gradient
、transform
。 - 动画、过渡:
animation
、transition
。
- 边框、阴影、圆角:
CSS Hack:
- 浏览器特定样式:例如
_moz
仅Firefox、*zoom:1
为IE6-7。 - 条件注释:例如
<!--[if IE 6]>
只针对IE6。
- 浏览器特定样式:例如
注意:在实际开发中应尽量避免使用Hack,并且优化CSS以减少重排和重绘。
评论已关闭