CSS：重绘与重排、优化图片、渐进式渲染、CSS3新增属性、CSS hack

作者：System 时间：2024年08月16日分类：所有,css3 字数：628

这篇文章距离上次修改已过439天，其中的内容可能已经有所变动。

重绘(Repaint)与重排(Reflow)：
- 重绘：当元素的外观被改变，但不影响布局（如颜色改变），浏览器会将新样式添加到渲染树中，并重新绘制影响的部分。
- 重排：布局发生改变（如大小、位置改变），浏览器需要重新构建渲染树。
优化图片：
- 使用CSS属性background-size: cover;来确保背景图像适应容器大小。
- 对于动态内容，使用canvas元素处理图像。
渐进式渲染：
- 使用<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以减少重排和重绘。